Are you facing trouble on doing SEO for Angular JS Websites? Feeling Angular JS SEO is Tough? Looking for tips on Angular 2 SEO? Then this post is for you.
I have worked on various projects starting from Html sites, CMS like WordPress, Magneto etc. But working on a Single Page Application like sites built on Angular JS, React JS are always tough to be optimized for SEO.
In this post am going to help you optimize your website using a SEO tool called Prerender and will give few tips to track your website accurately using Angulartics Plugin.
Advantages of building websites using Angular JS:
- Angular JS helps you to create a Single Page Application in a very neat and clean way, as well it can be easily maintained.
- Angular JS comes with data binding capability to HTML, so it gives user a great experience on browsing your website.
- Angular JS code is unit testable.
- One of the main advantage of using Angular JS is it gives you reusable components.
- Angular JS helps the developer to write minimum lines of code as they are going to call pre-build components and they will get more functionality for less code.
- And the best advantage of using Angluar JS is this applications can run on all major browsers and mobile phones including Android and iOS based phones/tablets.
Disadvantages of building websites using Angular JS:
Angular JS has many advantages, as well it has few major disadvantages too. The below are two major disadvantages of using Angular JS.
How Angular JS Affects SEO:
- Search engines crawlers were originally designed to index the HTML content of web pages.
- It is really tough to do SEO for this kind of websites/apps as search engines consider these kind of websites as Single Page websites.
- A Single Page Application or Single Page Website Means Only One Page in Google’s or Bing’s Index
On Page SEO techniques like giving Meta Data – Title and Description, Heading Tags, Internal Pages, URL Optimization, Sitemap Generation, Robots.txt etc can’t be done in a easy way. Angular SEO will fail to have organized content in a strong semantic and informational hierarchy.
Angular JS SEO example:
Let’s take ―NTTDATA which is one of the top big data company across the globe. When I search for nttdata.com in Google it gives a result like
This is mainly because they don’t use Angular JS and they use normal JS and CSS and HTML files. They have right URL structure too which helps search engines to identify their website easily.
In our case you can see only one link for statementgames domain search, which clearly shows that Google is not indexing all other URL’s.
If you have website which is offering 3 or 4 services, then you should have different pages for each service with different content, title, description, url etc. But in case of Single Page Applications your website will have the same title, description, content for all pages. This will confuses the search engine when it scans your website/page.
- Title tag and Meta description tag being the most important tags and being displayed in Search Engine Ranking Page, if you cannot optimize your content accordingly, you are scoring low in SEO.
- You get only 60-63 characters for the Meta “title” tag and 155 characters for the Meta “description” tag, so if you want your site to be optimized for more than one topic, you simply won’t have the room to leverage these most important on-page SEO elements.
- Search engines will index all the pages of your website, providing multiple opportunities for your site to come up in searches. When your site consists of only one page, a single page is exactly what you’ll have indexed. That means if you have many services, many products, single page design will really compromise your rank and result in search engine.
How to do SEO for Angular JS websites in 2018:
The basic steps:
- Google requests your pages with a modified url.
- You return the pre-rendered HTML to the crawler.
Track Angular JS website traffic using Google Analytics
As you know Google or other search engine consider Angular JS website as a Single webpage. So you cannot properly track the visitors, conversions and other stuffs using Google Analytics. So you go with a official plugin called Angulartics. You can track your Angular 2 SEO efforts too using this Angulartics Plugin.
Follow this link to know “How to Install Angulartics Plugin to Track Angular JS Website using Google Analytics“.
For reference, the full protocol is in
If you use urls with #
Change your urls to #! instead of just using #.
Google looks for #! urls and then takes everything after the #! and adds it as a query parameter called _escaped_fragment_. That way, Google effectively fixes the problem of everything after the hash not being sent to your server.
Google finds urls like this:
Google sends a request to your server like this:
Now that Google is requesting urls with _escaped_fragment_, you just need to return the static HTML.
All you have to do is take the url that Google requested and turn it back into the original url. Then return the static HTML for that url.
―So for doing this lot of middleware’s are available in the market, one of the best middleware is PRERENDER.IO”
Conclusion on How to do SEO for Angular JS Websites: