Angular and SEO — Angular Universal — SSR

Now it is very common to hear the idea that Single Page Applications (SPA) are not reachable for search bots but since 2018 Google bots can scan and show pages filled with JavaScript.

But now I want to quote something from Google:

Times have changed. Today, as long as you do not prevent Googlebot from crawling your JavaScript or CSS files, we can usually display and understand your web pages like modern browsers.

Sometimes things go badly when rendering, which can negatively affect search results for your site.

Sometimes JavaScript can be too complex or cryptic for us to execute, in which case we cannot render the entire page.

So… :)
Despite the statements of Google and Yandex about the support of search bots for parsing SPA sites, you should not hope for normal indexing — search bots have few resources, your application must work out as quickly as possible, otherwise, you will either have a cut rating or not parse the page, the bot can also do not wait for all your scripts to run. That's why I will offer you to use Server Side Rendering (SSR).

What analytic will have your website after using SSR? I will show you one example: Change in attendance after switching to Server Side Rendering (SSR)

After switching to SSR

The classic problem of Single Page Applications & search engines that Single Page Applications (SPA) have only one main page, the index.html, getting DOM updates using JavaScript. Let's see how it looks like.

as you can see we have only <app-root> </app-root> in our code, and this explains what I tell before

Angular Universal

— It is a library for building server-side rendering of Angular applications, at the moment Universal is the official part of Angular.

To create the server-side app module, app.server.module.ts, run the following CLI command.

ng add @nguniversal/express-engine

The command creates the following folder structure.

To start rendering your app with Universal on your local system, use the following command.

npm run dev:ssr

The next important thing that I want to tell you in this section is:
Angular SEO Meta Service Methods.

Angular offers the Title and Meta services, and these tags are similar HTML meta tags that help in achieving the purpose of making the Angular app SEO friendly.

Meta is a service in Angular, and it belongs to a class family. Angular offers various Meta services to add, read, update, and remove HTML meta elements.

import { Title, Meta } from '@angular/platform-browser';

We inject the private metaTagService: Meta, private titleService: Titlein the constructor.

Now, we will set Title and Meta Description in Angular Universal app.

Don’t forget to import Title, Meta from @angular/platform-browser

import { Title, Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {

  constructor(
    private titleService: Title,
    private metaTagService: Meta,
  ) { }

  ngOnInit() {
    this.metaTagService.addTags([
      { name: 'keywords', content: 'Angular SEO Integration, Angular Universal' }
    ]);
  this.titleService.setTitle('Page title');
    this.metaTagService.updateTag(
      { name: 'description', content: 'Lorem' }
    );
  }
}

If you want to learn more about Server-side rendering (SSR) with Angular Universal: https://angular.io/guide/universal#server-side-rendering-ssr-with-angular-universal

I hope this article was useful for you and you will make amazing applications.

Best Regards,
Mushegh Zakaryan

https://www.linkedin.com/in/mushegh-zakaryan/