Community Post

How to build SEO Friendly website using Angular 2 Universal?

Sunil Neurgaonkar

Before directly coming to the knowledge for building SEO friendly website in Angular 2 Universal, I recommend that you should have prior knowledge to the following concepts:

  1. Angular 2
  2. Node.js and Express
  3. Typescript

I assume that you have already build your website using Angular 2 and HTML, and now you can refer to the steps given below to make your website SEO friendly.

First things first, what is preboot in Angular 2 Universal -

Before your website fully loaded, if you have taken any action like mouse click, typing into text field, the browser stores record of action in preboot options. This would help you to track or record the user action on the site.

Setup below Dependencies into package.json:

1.angular2 2.angular2-universal 3.express 4.preboot 5.Typescript 6.typings

As you know the Angular 2 load its application into tag which is given in the selector of decorator of your component. For SEO we have different metadata and title for all pages. This could easily happen in Angular 2 Universal.

Steps for SEO Based Angular 2 Universal Website :

  1. Replace your index.html with
<html>
</html>

When we do this, we get all the control over the tags present inside the . Once we get the control, we can dynamically change the data present inside tags as we change our website page.

  1. Create your own html tag in selector of your HTML Component:
@Component({
directives: [AppComponent],
providers: [ServiceForSEO],
selector: 'html',
template: ‘htmlComponet.html’
});

Doing this allows us to get required control over the HTML tags. The selector functionality of the decorator of Component will render all the data from the htmlComponent.html file into the tag of your index.html file.

  1. Insert all the meta and title using variables in your htmlComponent.html:
<head>
<title>{{headObject.title}}</title>
<meta charset="UTF-8">
<meta name="description" [attr.content]="headObject.description"/>
<meta name="keywords" [attr.content]="headObject.keywords"/>
<script>
//any other script
</script>
</head>
<body>
<my-app>
</my-app>
<body>

Here we actually put the variables which are required to render dynamic data as we browse through different pages of the website. For example, in the above code, we have declared a ‘headObject’ object which includes all the variables for different tags.

  1. Change the variables inside the tags using your own service by assigning the desired values of meta tags, title tag, Open Graph tags and all other tags. To execute the code, place it inside your page’s component, that is, ngOnInit()

In every page’s typescript file, you need to override the ngOnInit() function with the variables assigned to that particular page. Also, invoke the service function wherever you want dynamic data. That service will communicate with the ‘headObject’ which is constantly listening to changes. This change is identified by an ‘Injectable’ which further transfers data to the listeners. For example, in this case, the listener is ‘htmlComponet.html’

@Injectable()
export class SeoService {
 // Observable string sources
 private _showHeadSource = new Subject<HeadClass>();
 // Observable string streams
 changeTitle$ = this._showHeadSource.asObservable();
 // Service change commands
 change(headObject: any) {
   this._showHeadSource.next(headObject)
 }
}

This post first appeared on - Techprimelab Blogs