The Definitive Guide to Angular SEO in 2020
By: Bharath Ravi
Tags: Angularseo, Angular, JavaScript, Search Engine Optimizati, SEO

Tools to Help You!

Let’s list the tools and practices we can take to make sure your angular application is SEO ready.

From the docs:

Angular universal is a technology that renders Angular applications on the server. A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. Angular Universal executes on the server, generating static application pages that later get bootstrapped on the client. This means that the application generally renders more quickly, giving users a chance to view the application layout before it becomes fully interactive. — Angular documentation

As we previously stated, crawlers only evaluate your page based on the page source of your application. This is what a typical Angular application page source looks like:

Typical angular app page source

As you can see, the content is not visible in page source. We have multiple JavaScript bundled files at the end of the file, which will execute on page load and render data to the browser.

This is where Angular universal comes in. This tool executes the associated JavaScript files and serves a compiled index.html page to the client with content rendered. Now when the crawlers hit the URL, this page with the content is received and is ready for evaluation.

This is what an Angular universal server-side rendered application source code looks like:

Angular universal SSR page source

You can read more on Angular universal and SSR here.

2. Title and Meta tags

Meta tags are snippets of text that describe a page’s content. Meta tags don’t appear on the page itself, but in the page’s source code. Meta tags are essentially little content descriptors that help tell search engines what a web page is about. They’re most important while social sharing as almost all social media platforms use these tags to preview the link.

You can use Meta class from @angular/platform-browser to facilitate the rendering of meta tags on each page. You can set a tag on load of the page and update it as required.

Dynamically rendering title tag is possible using Title class imported from @angular/platform-browser.

Read more on rendering meta tags here.

Schema structured data is a way to provide additional metadata that describes the content on our pages. This is the preferred way, as Google highlights pages based on these specifications.

Here's a simple example of structured data for a recipe page:

You can use the ngx-json-ld package for your Angular application to get this to work effortlessly! This package is very light and easily implemented.

Refer to schema.org for all available schemas also and take a look at this article for more information.

4. Canonical URL

Canonical URLs help search engines consolidate the information they have for individual URLs (such as links to them) into a single, authoritative URL. This does the job of making authorizing of a page by providing an exact URL. Its important to avoid duplicates of canonical URL as well. For example:

<link rel=”canonical” href=”https://www.tesla.com/" />

You can add a canonical URL using the Document Injector as follows:

5. Lazy loading

Your SEO score depends heavily on the page load speed. It’s critical to maintain a lower initial page load time to make the user stay on the page. Typically, below five seconds is a decent initial load time to hold back the user.

As we all know, Angular applications are bulky. The angular team is putting their best efforts to get a smaller bundle size, yet it is still bulky. That means that the initial loading time of our Angular application could be slower, which could seriously affect your SEO performance.

This is where lazy loading comes in. Lazy loading is a technique of breaking down your application module into smaller chunks, so that modules can be downloaded lazily, on-demand.

For example, if you have a homepage and contact page , you can break this down to two modules and load it lazily. You may have multiple packages and components for the contact page , which need not be downloaded to the browser on initial load.

Lazy loading can boost the application performance significantly and result in a faster initial load performance. Learn more about lazy loading here.

6. Progressive web apps (PWA)

A Progressive Web App, or PWA, is a web application with a set of capabilities (similar to native apps) that provide an app-like experience to users. PWA makes it possible for web applications to be added as a native app on the user’s mobile (or desktop) home screen, without even have to go through the app deployment process.

Implementing PWA in Angular is a piece of cake — it provides this support out of the box. The SEO aspect of PWA is mainly on offline caching. Once the user visits our page, the data is cached on the device. Next time, this offline data helps to serve the page faster and make the user experience better.

ng add @angular/pwa — project *project-name*

This one line command adds PWA features that you can configure to your Angular application. Once the user visits your application, there will be an offline version of the app available

Read more about implementing PWA in angular here.

7. Pre-rendering

Pre-rendering is the technique of compiling the page into a static file beforehand, to have a faster initial load time at the client-side.

You can achieve this by using the pre-rendering feature of angular universal.

The difference between SSR and pre-rendering is that the former renders the index.html file on the fly when a request is made using a node.js server and the latter renders this beforehand, so that the index.html page can be served as a static asset. If you have less frequent updates of data, prerendering is the way to go.

I have written an article on how to prerender in Angular and how it helps with SEO — find it here.