Press "Enter" to skip to content

How to do SEO for Angular JS Websites in 2018

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.
  • In Angular JS, we are going to view pure HTML Pages and the process or controls or functions are written in JavaScript.
  • 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.

  • Security − As you know Angular JS uses only JavaScript framework, application written in AngularJS are not safe. Both Server side authentication and authorization is needed to keep an application secure.
  • Can become useless − If your end user disables JavaScript or not gives permission to run JavaScript, then user will just see the basic page and nothing more.

How Angular JS Affects SEO:

    • Search engines crawlers were originally designed to index the HTML content of web pages.
    • Today, however, JavaScript and other frameworks like Angular JS and Backbone JS are playing a leading role in web development and the creation of content and application online. Unfortunately, the crawlers and the other indexing mechanisms behind search engines remain decidedly unfriendly to JavaScript powered sites.
    • 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

how angular affects seo

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.

how angular affects seo part 2

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:

“Serve the pre-rendered HTML to crawlers, not the JavaScript.”

Angular JS renders pages using JavaScript, but Google and other search engine crawlers don’t execute JavaScript. When they access your pages, they’re most likely going to get a bunch of empty div’s.

Angular JS is made by Google, so you know that one day they’ll be able to run the JavaScript. But for now, and until all the other search engine crawlers catch up, you have to return the completed HTML to the crawler if you want your website to be indexed properly.

The basic steps:

  1. Google notices that your page is rendered using JavaScript.
  2. Google requests your pages with a modified url.
  3. You return the pre-rendered HTML to the crawler.

We require a middleware that detects crawler and render the pages by executing full JavaScript behind the scenes in a browser, then return the static HTML to the crawlers.

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“.

Client Side: Follow Google’s JavaScript crawling protocol

For reference, the full protocol is in

https://developers.google.com/webmasters/ajax-crawling/docs/specification

Google’s JavaScript crawling protocol is meant for websites that render using JavaScript or need to wait on AJAX calls to complete. If you follow Google’s protocol, Google will send a request to your server with a modified url so that you can return the static HTML version of the page. Here’s how:

If you use urls with #

Nothing after the hash in the url gets sent to your server. Since JavaScript frameworks originally used the hash as a routing mechanism, that’s a main reason why Google created this protocol.

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:

http://www.statementgames.com/#/home

Google sends a request to your server like this:

http://www.statementgames.com/?_escaped_fragment_=/home

Server Side: Returning static HTML instead of Javascript

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:

As a Digital Marketer, I don’t advice people using Angular Js to build their website as it is very complicated and problematic while it comes to ranking/promotion. But Google is now starting to read JavaScript files, so we will come up with a better article after few months on SEO for Angular JS Websites.

 

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *