Angular universal for SEO. How do the Title and Meta services work?

Angular Universal is a server-side rendering solution that allows Angular applications to be rendered on the server-side before being sent to the client. This approach is beneficial for search engine optimization (SEO) because it allows search engines to crawl and index your website more easily.

To optimize your website for SEO with Angular Universal, you can use the Title and Meta services provided by Angular. These services allow you to set the title and meta tags for each page of your application, which is important for search engine optimization.

Setting up Angular Universal in an Angular application involves several steps

1. Create a fresh angular project to start

ng new angular-universal-with-angular15

2. Start the application

npm start

Notice, the application will default start with http://localhost:4200/

3. Time to write a few lines of code for testing purposes

The Title service allows you to set the title of each page dynamically, based on the content of the page. You can use the setTitle() method to set the title for each page. For example, you could set the title of your homepage like this:

import { Component } from '@angular/core';
import { Title } from '@angular/platform-browser';

@Component({
  selector: 'app-homepage',
  template: '<h1>Welcome to my website!</h1>',
})
export class HomepageComponent {
  constructor(private titleService: Title) {
    this.titleService.setTitle('My Website - Home');
  }
}

In this example, we import the Title service from the @angular/platform-browser module and inject it into our component. Then, in the constructor, we use the setTitle() method to set the title of the page.

The Meta service allows you to set the meta tags for each page, which are important for providing additional information to search engines. You can use the addTag() method to add meta tags to each page. For example, you could add a meta description tag like this:

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';

@Component({
  selector: 'app-homepage',
  template: '<h1>Welcome to my website!</h1>',
})
export class HomepageComponent {
  constructor(private metaService: Meta) {
    this.metaService.addTag({ name: 'description', content: 'Welcome to my website!'});
  }
}

In this example, we import the Meta service from the @angular/platform-browser module and inject it into our component. Then, in the constructor, we use the addTag() method to add a meta description tag to the page.

1. Download the sample example from here to play.
2. Run the sample application in http://localhost:4200/
3. Right-click on the app and go to view source.

What is the problem here in the view source (above image)?

You will notice <app-root></app-root> but not showing all the child elements and dynamic meta tags, because the angular app is by default CSR (Client Side Rending)

Why do we need to worry about view source for public-facing websites?

Server-side rendering with Angular Universal is important for public-facing websites for several reasons.

• First, server-side rendering can improve the performance of your website, especially for users with slower internet connections or less powerful devices. When a user visits your website, the server-side rendering allows the initial page to load faster, as the HTML and CSS are generated on the server and sent to the client, reducing the amount of work that the client-side JavaScript has to do. This can help to reduce the amount of time it takes for your website to become interactive, which is important for keeping users engaged.
• Secondly, server-side rendering is important for search engine optimization (SEO). Search engines like Google use web crawlers to index the content of websites, and these crawlers can have difficulty with indexing the content of client-side rendered websites. By using server-side rendering, you can ensure that your website is more easily crawled and indexed by search engines, which can help to improve its visibility in search results.

4. To Support SSR (Server Side Rendering) - Install a package called angular universal

ng add @nguniversal/express-engine

Here is Official Guide. https://angular.io/guide/universal

The command creates the following folder structure.

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

npm run dev:ssr

1. Download Angular SSR the sample example from here to play.
2. Run the sample application using the command npm run dev:ssr and navigate to http://localhost:4200/
3. Right-click on the app and go to view source.

Here are the differences in view-source now

You will notice <app-root>............</app-root> now showing all the child elements and dynamic meta tags because the angular app is now supporting SSR (Server Side Rending)

So what is happing inside now? In that object context, Angular initializes the application. The app makes requests to the backend, performs various asynchronous tasks, and applies any change detection from components to the DOM while still running inside the node.js/express environment. The render engine then serializes DOM into a string and serves up the string to the server. The server sends this HTML as a response to the GET request. Angular application on the server is destroyed after rendering.

Let's look at the dist folder

Note: dist folder when you run npm run dev:ssr, you have sever- contains the code that runs on the server-side when the application is being rendered, and browser - contains the code that runs on the client-side when the application is being rendered.

Note: if you will run this code now this will work fine because it's just a dump component

• The complexity starts with dynamic data where the front end asks for data from the backend API.
• And when you do a migration of existing CSR applications to Angular SSR

Follow another article about on - Part3 - Angular universal deployment

Thanks for reading!