SEO in Angular applications

What is SEO?

Search engine optimization (SEO) is the process of making your website and its content accessible and discoverable by internet search engines, such as Google, Bing, Yahoo, AOL, DuckDuckGo, etc. SEO is aimed to improve the quality and quantity of your website's traffic by trying to create the most relevant search results for your pages, while also making sure that these results are ranked as high as possible in the search result list.

Ideally when someone searches for the name of your business or product, you want your website to be the first one in the list, or at least to appear on the first result page. If your application supports more languages, you might want to show a translated search result for your page, based on the geolocation or browser settings of the user.

Setting up a worthy SEO for your project is the key to achieve these goals.

How do search engines work?

Most search engines are constantly exploring the internet by using special scripts commonly referred to as crawler robots or crawlers. Once a crawler has discovered your website, it will try to understand its content in a process called indexing.

In summary, every search engine logic can be divided into two main stages: crawling and indexing.

The crawling stage is responsible for finding your pages and navigating inside of them by detecting and following HTML links. As a result, a map of web pages will be created, and an indexing stage will be started for every discovered page on this map.

?During this indexing stage the page will be analysed:

• title and description for your page will be determined,
• images, videos on your page will be catalogued,
• and links on the page will be updated, mapped again and followed by another crawling process (the page behind that link will be processed the same way in a recursive manner).

All the information collected about the page is stored in the index database of the search engine. This database will be used to provide the results for a search query.

At the company, we were commissioned to add a reliable SEO support for our Angular SPA web application, a digital marketplace for industrial software and hardware equipment. This involved not only including our pages in Google search results, but also keeping them customized for our products in the web store. In addition, we had to support the search results in multiple languages.?

Having a complex and operational web store already in place, our options were limited. We couldn't just redesign and change the rendering logic overnight, just for the sake to be SEO-friendly. We had to cook with what we had.

Angular SEO

An Angular application is a single page application (SPA). This means that the entire application logic is running on the client side, in a single HTML page. Whenever the user navigates inside the application, instead of loading a completely new HTML page, the browser renders the required content dynamically on the same page, using JavaScript in the background. This is also called Client-Side Rendering (CSR).

The problem with this however, is that most search engines cannot execute JavaScript. Their indexing procedure only understands static HTML pages. In case of Angular, the HTML that is loaded on the first request is just an anaemic shell, an empty HTML page without static content. This HTML will be populated with content dynamically by the JavaScript bundle, which is the container of the main Angular logic.

To tackle this problem, two of the most popular techniques are the following:

• SSR (Server-Side Rendering) - With this approach, the requested Angular page is rendered on the server, then is sent over to client as a complete, static HTML file, filled with content. Angular officially supports server-side rendering with the Angular Universal package.
• Pre-rendering - A static HTML is created and stored for every page during application build time. These pre-rendered pages will be sent over to the client upon request.

Both methods will solve the CSR problem and will make your application SEO-friendly, however setting these up for an already existing and complex project can be cumbersome and time-consuming.

Google SEO and Angular

Luckily, Google comes to our rescue, as Googlebot can execute JavaScript.

On top of the two typical stages every search engine is working with (Crawling and Indexing stages), Google has a 3rd stage called Rendering, which is meant to execute JavaScript and fetch the dynamic page content.

The Rendering stage is executed separately in a queue, independently of the first two. This can be explained by the fact that executing JavaScript can be quite resource heavy. There are millions of webpages using JavaScript on the internet, so this rendering queue can be very long. An Angular SPA to be rendered and indexed correctly can take from a few hours up to even multiple days. Because of this, if the indexing speed of your website is among your top priorities, it is suggested not to rely on the JavaScript rendering phase and use either SSR or pre-rendering instead.?

Our decision

Because of time constraints and other SEO techniques (SSR and pre-rendering) being too expensive to implement for a complex ongoing project, we decided to support only Google's search engine as a first step.

Since the indexing speed was not our priority, we could simply rely on the JavaScript Rendering stage of Googlebots.

Solution

Below we highlight the most important changes we had to implement in our Angular SPA application to make it Google SEO-friendly.

As described above, our resources were limited because we didn't want to use SSR (Server-side rendering) or pre-rendering techniques. We had to rely on CSR (Client-side rendering) and the JavaScript rendering stage of Googlebots.

Accurate page titles and descriptions

Probably the most important step in making our website SEO-friendly is to provide meaningful titles and descriptions for the pages, as these texts will appear in the search results by default.

This can be achieved by providing a unique title and meta description tag inside the head section of every page:

The easiest way to implement this in Angular is by creating an SeoService, which will be responsible for all SEO-related activity. Angular already provides us tools to modify page titles and meta tags out of the box through the Title and Meta services, so we will just use them in our service.

Once this is done, wherever we need to set a title and description for a routed component (a distinct page), we inject this service in its constructor and use it inside the ngOnInit() method, or wherever it is needed.

Translated search results

As our digital marketplace application supports multiple languages, we wanted to show translated search results as well, based on the geolocation and browser settings of the users. This means that whenever a user is searching in Google for our website in Germany, or with German browser settings, we want to show them a German search result, directly pointing to the German version of our website. In the meantime, if someone is searching from Singapore, we want to show them an English search result, pointing to the international, English version of our website.

The first step to achieve this is to make sure that our translated pages are reachable through distinct URL-s. Keeping the current language of the page only in an internal application state but not exposing it in the URL will make them undetectable for the Google crawlers.

Correct URLs pointing to the same page, but in different translations can look like the following:

• English page URL: https://your.website.test/product/details?locale=en
• German page URL: https://your.website.test/product/details?locale=de

The next step is to let Google know that our pages are available in other languages as well. This can be accomplished by using alternate link elements in the head section of our HTML pages.

After this is in place, whenever a Googlebot crawls this page, it will notice that it is available in other languages as well (English and German). The 'x-default' alternate link is used as a fall-back mechanism for search results where the user is searching in a language other than English or German. This usually refers to the international version of your page, which is most likely in English as well.

Programmatically we can achieve this in the same SeoService we created in the previous section:

In every routed component (distinct page), we can simply call the 'setDocumentAlternateLinks()' method of the injected SeoService, with the current URL of the page and query parameter map as arguments to set the document header with alternate links automatically.

Disable OAuth redirects

In some special use cases, you might want to treat the Googlebots differently from the everyday users accessing your website. In other words, whenever a Googlebot is crawling your application, you want to provide a separate content or a distinct behaviour of your page, in contrast to a real user accessing your site with a standard browser session.

In our SEO implementation, this distinction was required for handling the OAuth redirects appropriately. Our OAuth provider, Auth0 was used in a way that on every page load, an automatic redirection logic was triggered to the Auth0 authenticator page, then back, in order to check if the user is already logged in with a valid token or not.

This whole redirection process was happening fast, without disrupting the user experience, but unfortunately, the crawlers were unable to follow this redirection chain, and they simply stopped processing our pages.

Luckily, because the Googlebots are crawling the websites as anonymous users, without any authentication data, there is really no need to check if we are dealing with a logged-in user or not. We could simply skip the entire redirection logic for the crawlers.

The next challenge we had to tackle was beginning to emerge: How can we know inside Angular, if the current client the application is running on is a Google crawler, or an ordinary browser client? If we can decide on that, the problem is solved. We simply disable the Auth0 redirections for the crawler clients, enabling Google to crawl our pages without any obstacles.

?According to the Google documentation, we can decide whether a client requesting our page is a Googlebot or not simply based on its IP address: https://developers.google.com/search/docs/advanced/crawling/verifying-googlebot

?All we need to do is to run a reverse DNS lookup on the client's IP address, and based on the result, check if the domain name is either 'googlebot.com' or 'google.com'.

Because a reverse DNS lookup cannot be executed on the client side in a browser, we must do it on the server-side, in our Backend.

After wrapping this logic in a new API endpoint, we can simply add it to our SeoService:

The only thing left is to simply enable/disable our Auth0 redirection logic based on the result of this observable.

In this article we have taken a comprehensive look on search engines, on what SEO is and on the available options we can choose from to make an Angular SPA application SEO-friendly. We have also examined as a case study our digital marketplace application and how we implemented the first step of Google SEO support for it.

Implementing a healthy SEO support for your Angular application is always a trade-off between what you want to accomplish and the resources available at your disposal.

If you want to implement a robust SEO, supporting all the major search engines, you must choose between either SSR (Server-Side Rendering) with Angular Universal, or pre-rendering techniques. ?If supporting only Google is a viable option for you, you can keep the default Angular CSR (Client-side rendering) technique, with implementing some small adjustments to help Google crawl and understand your content, as described in the previous section.

In the hope that we have managed to broaden your horizon on Angular's relationship with search engines, we wish you the best on your upcoming SEO journey. :)