Make Your Angular App SEO-Friendly Using Angular Universal

Applications created using Angular do, quite frankly, suck when it comes to SEO (Search Engine Optimization). That’s also what I thought until I found the Angular Universal project.

Angular Universal is, to quote the official introduction, a community-driven project to expand on the core APIs from Angular (platform-server) to enable developers to perform server-side rendering of Angular applications in a variety of scenarios.

Besides many other features, Angular Universal comes with extended support for SEO. In this article, we take a quick dive into how to make your Angular applications SEO-friendly using Angular Universal.

How Is Angular Universal Good for SEO?

Angular Universal is good for SEO because it offers the possibility to prerender all routes, making it easy for web crawlers to follow links and explore the content of your website.

Angular applications often face SEO challenges, primarily stemming from API data calls. However, by leveraging the dynamic rendering techniques in Angular Universal, you can generate HTML files that are easily indexed and crawled, therefore enhancing the visibility of your website on SERPs (Search Engine Result Pages).

Here’s an example of how to add metadata to your Angular components through the Meta and Title objects in Angular Universal:

import { Component, OnInit } from "@angular/core";
import { Meta, Title } from "@angular/platform-browser";

@Component({
  selector: "main",
  styles: [],
  templateUrl: "main.component.html",
})
export class MainComponent implements OnInit {
  constructor(private title: Title, private meta: Meta) {}

  ngOnInit(): void {
    this.title.setTitle("SEO Experts Superduper Awesome Company Inc.");
    this.meta.addTags([
      {
        name: "description",
        content: "This is an awesome website with great SEO-support",
      },
      {
        name: "og:title",
        content: "SEO Experts Superduper Awesome Company Inc.",
      },
      {
        name: "og:url",
        content: "https://insertyourdomainnamehere.com",
      },
      {
        name: "og:description",
        content: "This is an awesome website with great SEO-support",
      },
      {
        name: "viewport",
        content: "width=device-width, initial-scale=1",
      },
    ]);
  }
}

How to Make Your App Good for SEO with Angular Universal

First, you need to run the following command to enable SSR (Server-side rendering) for your application:

ng add @nguniversal/express-engine

This command will bootstrap your Angular application into an express server. You will notice that the command generated the following files:

To make your Angular application good for SEO you need to go through all possible routes and make sure all have a good title and metadata. You can learn more about best practices in SEO here.

If your application is a webpage with static pages you can prerender all routes and components by running the following npm command:

npm run prerender

or run the command directly which the npm command executes, replacing {name} with the name of your Angular application:

ng run {name}:prerender

Conclusion

In conclusion, Angular Universal is the go-to solution for improving the SEO support of your Angular applications.

With Angular Universal, you can prerender all routes in your Angular application. This enables faster indexing and crawling of your website for web crawlers. Angular Universal also features classes and configurations for improving your Angular applications metadata.

That’s all we had to talk about in this article! If you’re feeling adventurous you can check out our other Angular articles here.