SEO tips and tricks for Angular web apps

Photo by Stephen Phillips - Hostreviews.co.uk on Unsplash

Googlebot can process JavaScript. Does it mean that Angular single-page apps got the green light to get indexed and rank high in Google Search results?

It's not that simple. To get your app indexed correctly, you should, at least, configure it for SEO-friendly URLs and title/description meta tags. Chances are, you’ll have to go the extra mile to ensure correct indexing of your JS-generated content in Google.

Apart from that, you may want your app to be friendly to less advanced search engines as well as social network crawlers. For this, you’ll have to tap into pre-rendering, server-side rendering, or dynamic rendering.

Now, let’s consider all aspects of SEO optimization for Angular web apps and overview the tools, methods, and best practices that can help.

Is Angular SEO-friendly by default?

By default, Angular apps run client-side. It means that the first thing that loads when your app starts is an empty HTML shell. It contains nothing but a script that will render all the content and populate the page with it.

Browsers and crawlers access the on-page texts and links as well as unique titles and descriptions of the page only after and if they render JavaScript. This limits the SEO potential of your Angular single-page application and exposes it to potential problems.

In Angular 11 and newer versions, Google included new default libraries to make Angular fully SEO-friendly. The libraries allow the required meta tags to be edited and set, either configuring Angular Universal to start-up in a pre-render mode or letting the application manage the state itself.

Common Angular SEO pitfalls you can face

If you go with a standard client-side rendered Angular app, Bing, Yahoo, DuckDuckGo, and Yandex won’t index your URLs. All they will see would be empty HTML pages because their bots don’t render dynamic content. Social media bots don’t do that too. It means that the Twitter crawler won’t be able to fetch beautiful summary cards for your pages.

What if Google is the only search engine that matters to your project? You have good chances for your dynamic pages to get indexed. However, you don’t have any guarantees. Google Search Central documentation lists several reasons that may stop your JS-rendered content from correct and fast indexation:

• Delays in indexing dynamic content caused by Googlebot’s rendering engine queue
• Slow or delayed load of your JS code especially that’s triggered by on-page actions
• Complex JS code that’s expensive to run and exceeds Googlebot’s rendering budget
• During-rendering failures causing parts of your content don’t make it to the index

As you can see, the more work for third-party software, the higher are the risks that something goes wrong. So, how do you ease your Angular app indexing on search engine crawlers and social media bots?

Ways to help Google crawl Angular

There is only one way to remove any SPA-related obstacles for indexing and ranking your online assets. You should ensure every URL of your app returns a fully rendered HTML page with metadata and content available right upon loading. And the page load should be fast on both mobile and desktop.

SPA owners now solve this task using one of three methods: server-side rendering, pre-rendering, or dynamic rendering. All three give the needed result – crawlers get the whole content upon loading and index it similar to regular HTML pages. However, the methods work in different ways:

• With server-side rendering, each HTML page is rendered on the server during the run time. It means that before the page loads, it takes some time for the server to render HTML upon request and send it to the browser. This method can potentially decrease the page load speed, especially if many requests are coming at a time.
• With pre-rendering, an HTML file for every URL is rendered during the build time. It means that your app has all HTML files built in advance so that the pages are ready to load fast upon request. The downside is that making changes on those pages requires re-building them.
• With dynamic rendering, your app has pre-rendered HTML pages and serves them to crawlers only. The real users, however, interact with the regular client-side rendered version of the app.

Every JS framework has its tools and ways to implement those methods of tackling SEO challenges. Angular provides a comprehensive SSR and pre-rendering solution called Angular Universal.

Reasons to use Angular Universal in your app

To make your Angular app SEO-friendly, you can either implement Universal from the start or progressively add it to an existing regular application. When using it, you leverage the so-called Angular Universal Bundle and benefit from both client-side and server-side rendering in one app.

Here’s how the Bundle works. Angular Universal fetches HTML pages for your app ahead of time to serve them during the initial page load. Then, it ships the code of the regular client-side rendered app to the browser to substitute the initial static HTML. After the swap happens, the app continues running in the client-side rendering mode.

With Angular Universal Bundle, you get into a better position to satisfy technical SEO requirements and ensure the best experience for users:

• Crawlers and bots process the initial static HTML pages matching indexable URLs
• App content loads within milliseconds without making people stare at blank screens
• Users enjoy the flawless dynamic page experience when start interacting with pages

To use Angular Universal, you’ll need some help from an experienced Angular developer. They’ll configure your app to have correct metadata, set up a Node.js Express web server for pre-rendering, and handle the State transfer API to optimize the app performance.

What does it take to make an Angular app SEO-friendly?

We asked Alexandre Brandizzi, Fullstack Developer at Proxify, to estimate the time needed to transform a regular Angular app into an SEO-friendly one. Here’s an approximate scope of work your developer would have to do:

• Analyze the existing app architecture and functionality. (2h).
• Check the previously built SEO functionality, if any. (2h).
• If dealing with a legacy app, upgrade Angular version. (24h, optional)

It’s good to keep your application up-to-date and take advantage of the newest changes and improvements available in the newer versions of the Angular framework. Version 11 includes libraries for setting meta tags dynamically. Either you’re using the pre-render mode or not, you still will benefit from this feature. However, sometimes an upgrade can be a show breaker. If the app has external dependencies not compatible with the newer versions of the framework, it may require extra time to fix all possible issues.

• Make necessary changes in the app after the upgrade. (56h, optional)

For your app to function as intended after the upgrade, your developers may have to substitute old dependencies with some alternatives. The time estimate for this task takes into account the time needed to thoroughly test the new code.

• Apply SEO-related changes in the app root file. (4h)
• Enable Angular SSR load using Angular Universal. (3h)
• Check if the SEO configuration meets the business requirements. (2h)

Keep in mind that this time estimation was based on the maximum time needed to implement each step. The actual scope of work may vary depending on the initial state of your Angular app. Typically, the more recent is the version of the framework your app was built with, the fewer challenges you face.

Angular developers knowledgeable in SEO

If you’re ready to introduce Angular Universal and boost your app SEO potential, it’s time to find the right developer for you. Proxify talent network will help you select the best candidate. Just send us a talent request today and meet your Angular Star within the next two weeks.

Quick Angular SEO Q&A

You ask, we answer.

Is Angular good for SEO?

Similar to any other JavaScript framework, Angular requires using special tools to optimize SPAs for search engines. Those tools allow you to implement SSR (server-side rendering) and meet all technical SEO requirements for correct page indexation and good ranking.

How do you make Angular SEO-friendly?

To build an SEO-friendly SPA with Angular, you’ll need to use Angular Universal. You can either implement it from the start or progressively add it to an existing Angular app. Universal resolves all the issues with meta tags and URLs for indexation as well as ensures quick initial page load times.

What is Universal in Angular?

Angular Universal is an SSR and pre-rendering solution that allows you to benefit from both server-side and client-side rendering in one app. It fetches HTML pages for all app URLs ahead of time. Those pages are served to search engine bots and the content gets crawled without any problems. For real users, Universal ships the code of the regular client-side rendered app along with the static HTML. The initial page content loads from a static HTML and then the client-side app takes over the page and ensures an interactive user experience.