SEO is the most popular topic in the internet. Everyone try to get their web site on top of the google search result. But most people don’t know how to do it efficiently.

We know, Angular is one of the popular platform for building mobile and desktop web applications. It enables SEO features with Angular Universal (Server side rendering).

There are lot of SEO articles are available for CMS platforms like WordPress. But not for Angular. So in this tutorial, I am going to teach you how to do SEO for your latest Angular 11 application.

Most importantly: don’t panic. You don’t need to be an expert on this.

Let’s start with the basics

First you should need an Angular Universal app before initiate SEO. Why angular universal app? For search engines to experience Angular content, they need to execute JavaScript. Many search engines can’t render JavaScript. So we need angular universal app for this.

If you have Angular app without server side rendering, Please read below post to know about, how to convert your existing angular app to angular universal SSR app.

https://deeflow.com/blog/post/best-way-to-server-side-rendering-with-angular-universal

Then you can start SEO on your angular app.

There are four easy steps you can follow to optimize your angular app.

1. SEO with Meta Tags

First one is Meta Tag, I think you know already regarding ‘meta’ tags. It is simple but very powerful tag when we consider the topics SEO. Meta tags not only for normal HTML app, they need in Angular too. So you need to add below Meta tags in your index.html file.

<meta property=og:title content= />
<meta property=og:description content= />
<meta property=og:image: content= />

<meta property=og:image:type content=image/jpg />
<meta property=og:image:width content=400 />
<meta property=og:image:height content=300 />
<meta property=og:type content=website />

<meta name=keywords content=dee, flow, community, community, deeclassroom, quiz, bot, automation, qlake, blog> // any keywords related to your page or site

In this code block you can see new property called og:<>. So what is this property? These properties are known as open graph properties and essential for Facebook, twitter like social network crawlers to identify the shared content. That’s why we include these properties in our index.html file. But you may be thinking why content attribute keep empty?

Yes, because our content change dynamically with our components. So we need to update these Meta tags in your any component.ts file. But if you don’t have such dynamic change content. You can add content in your index.html file. This is how we can do it with dynamically change content.

Any of your component.ts file (import needed)

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

Then declare below variables in your component.ts file

public metaTitle: string;
public metaDescription: string;
public metaImage: string;

Now you need to update these tags. So add metaService in your constructor

constructor(private metaService: Meta){}

Then update your Meta tags in any function like this. This example shows you how to update these tags inside subscribe function with http get request.

viewPost() {

this.route.paramMap
.pipe(switchMap((params: ParamMap) => this.blogService.view_post(params.get('slug')))).subscribe(res => {
        this.posts = res['results'];
        this.pid = res['results'][0].id; 

      // import parts started from here
	    this.metaTitle=res['results'][0].title;
        this.metaDescription=res['results'][0].content;
        this.metaImage=res['results'][0].image;
        this.titleService.setTitle(this.metaTitle);

        this.metaService.updateTag({ name: 'description', content: this.metaDescription.replace(/(<([^>]+)>)/gi, ).substring(0,125)+'...'});
        
        this.metaService.updateTag({ property: 'og:title', content:this.metaTitle});
        this.metaService.updateTag({ property: 'og:description', content:this.metaDescription.replace(/(<([^>]+)>)/gi, ).substring(0,125)+'...'});
        this.metaService.updateTag({ property: 'og:image', content:this.metaImage});
        this.metaService.updateTag({ property: 'og:type', content:website});

As you can see now our Meta tag part is completed. Build your project with SSR and see how it works in real environment.

2. SEO with Robots.txt file

Then we are going to learn how to do SEO with robots.txt file. This file help Googlebot like search engines bots to find and access your site content.

This is also a simple but very powerful SEO trick. Normally robots.txt file auto generated in popular CMS like WordPress. But not in angular.

So you need to create a new robots.txt file in your src/ folder.

Follow these steps with me to achieve this trick.

Go to your src/ folder and create a new file with name robots.txt

Open it any of your plain text editor. Don’t use word. Because it may be add external links and other this to your file? Hence use any plain text editor like notepad.

If your need to customize your robots.txt, Read below article for more information. In this tutorial I am going to teach you with the default robots.txt file. So we only need to add below two lines in our robots.txt file.

User-agent: *
Disallow:

Then we need to edit angular.json file and add robots.txt file assets section

assets: [
    src/favicon.ico,
    src/robots.txt,
    src/assets
   ],
styles: [
  //
],

Yeah, it’s done. Build and deploy you should be able to access this robots.txt file once you deployed your application.

Like this.

http://localhost:4200/robots.txt

3. SEO with sitemap.xml file

Now we are moving to our third SEO trick.

Normally this file contains mostly used site links of our site/app. sitemap.xml also can help search engines to get popular links from your app/site.

You can easily generate a new sitemap.xml file by going to this site

https://www.xml-sitemaps.com

Then you need to update this file with your any site links

<?xml version=1.0 encoding=UTF-8?>
<urlset
      xmlns=http://www.sitemaps.org/schemas/sitemap/0.9
      xmlns:xsi=http://www.w3.org/2001/XMLSchema-instance
      xsi:schemaLocation=http://www.sitemaps.org/schemas/sitemap/0.9
            http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd>

<url>
  <loc>https://deeflow.com/</loc>
  <lastmod>2021-01-20T16:33:21+00:00</lastmod>
  <priority>1.00</priority>
</url>
<url>
  <loc>https://deeflow.com/classroom</loc>
  <lastmod>2021-01-20T16:33:21+00:00</lastmod>
  <priority>0.90</priority>
</url>
<url>
  <loc>https://deeflow.com/quizy</loc>
  <lastmod>2021-01-20T16:33:21+00:00</lastmod>
  <priority>0.80</priority>
</url>
</urlset>

Finally, it will be necessary to modify the file angular.json

assets: [
    src/favicon.ico,
    src/robots.txt,
    src/sitemap.xml,
    src/assets
   ],
styles: [
  //
],

That's it

Yeah! In this tutorial we learned how to SEO with angular 11. If you like this post share it with your friends.