Home

Applications built with Angular are not Search Engine friendly by default. If you view the source of the Angular application you won’t find any content there. So, our application pages won’t appear in the search engine results. It may or may not be the behaviour you want. So, If you don’t want the search engines to crawl through your content, you’re good to go already. But, If there’s a requirement like you have created a blog in Angular then you might want to make the Angular application SEO friendly.

Let’s see how we can add SEO to our Angular app easily using ng-toolkit by following these steps.

Creating Angular App

Make sure you have node and angular-cli_ installed on you system.

To create new application you can run the following command,

ng new myAppSeo --routing

--routing flag will add the routing module in our application.

Running Angular App

We can change the directory to our newly created project and run the following command,

ng serve -open

Here, -open will open the project directly in the browser. Otherewise, we have to manully open the url.

Alternatively, you can use the following shorthand command too,

ng s -o

Here, s stands for serve & -o flag stands for open.

After running this command, the output will look something like this.

If we take a look at the source code by pressing Ctrl+U on windows or right clicking the application and click view source, we can see the following output.

Here, in the view source page we can see, inspite of we have some content on the page, we still don’t see any of this content in the source code.

Now let’s see how can we fix it, so that the content will appear in the view source, which will make the app search engine friendly.

Adding @ng-toolkit/universal

With ng-tookit, it is very easy to make the app engine friendly. We just need to run the following schematics command and it will take care of the rest.

ng add @ng-toolkit/universal

Server side rendering will only work in the production envirionment.

Now that we have installed @ng-toolkit/universal in our Angular app. So, we can build the app for production now with the following command,

npm run build:prod

This will build the app for production. Now we can run the following command to open the production application,

npm run server

After running this command, the front page will look the same as before. But if we view the source again, the output will look like following,

Here, you can see the content of the page that you weren’t able to see before and now search engines can crawl through this content.