In Part I I talked about how google can crawl the AngularJS website successfully. Here I will be talking about the changes we implemented to improve the SEO of the website.

Page Title & Description

We have multiple controllers in our SPA application. each controller represent a “Page”. some of those “Pages” are standard account management related e.g. create account, reset password…etc. for those we will set the Title & Description on the app.js like below

For each route we set a DataLayer (seoData) that include a title & description then we pass this datalayer to the $rootScope on $routeChangeSuccess as below

In the addSEOData we are adding to the title a | separator and a the website brand name as default page title, we are also limiting the length of title to 70 char & the length of the description to 156 char. see below

This will update the title & description on the header of the website

In our website we allow the user to search for products, for this case we thought to set the title & description based on the search result so that the title will include the name of the product and the description will include some information about it. to do that we are calling the addSEOData when we display the product as below

SiteMap files

We need to tell google about our pages and mainly about the products. so we generated a URLs that will land the user on a product page and based on the Title & Description changes above we will get the product name as a page title. The format of the URL was like this

https://<WebsiteURL>/<Products Category>/<Product Name>

We added this format to the routing on app.js so that it will use the search controller to find the product

We submitted the sitemap to Google WebMaster tool and it was indexed correctly. Then in few days we started to see the SEO improvements

Yes…it is working and working very well…

Thanks for reading 🙂