AngularJS and SEO

AngularJS and SEO

What is SEO?

SEO

SEO stands for “search engine optimization.” It is the process of getting traffic from the search results on search engines (organic, non-paid).
Search engines like google (bing and others) get data about your site and display it when someone searchs. This is why the data provided by your site is very important, so that it can be indexed, and displayed the right way.
If you want more info about SEO you can find it in Google’s Search Engine Optimization Starter Guide

The Problem

AngularJS and other client-side frameworks use the browser to build the content of the page. When Google crawls one of this sites, it just reads the raw pages. It doesn’t open them in a browser and it doesn’t run the javascript. So, it can’t see the content, it just sees an empty page. Google won’t be able to show your data or direct the users to your page if it can’t even know what your site is about. This is not good if you want to get popular.

When Google indexes your pages, it sees:

imagen1

Or maybe just

imagen2

But you need to see

imagen3+

You can test what google can crawl in your site using Google Search Console.

The Solution

An answer to this problem could be to behave different when a request from a crawler is received, if it is a crawler you send the full html (like a picture of your html after the js has been rendered).
There are many platforms that do this (and you can also build your own), but our team decided to use: Prerender.io . Prerender is an open source platform that allows javascripts sites to be crowded by search engines. It renders javascript in a browser, then save the static HTML, and return that to the crawlers.

imagen4

The Prerender.io middleware that you install on your server will check each request to see if it’s a request from a crawler. If it is a request from a crawler, the middleware will send a request to Prerender.io for the static HTML of that page. If not, the request will continue on to your normal server routes. The crawler never knows that you are using Prerender.io since the response always goes through your server.

So, we install prerender in our server, set it up in our ExpressJS app, and then test our prerender middleware. If no problems appear and we use google search console again it should render our site properly. Problem solved!

Other recommendations

● Use html5 pushstate. When you define your application and configure your
routes file, just add $locationProvider.html5Mode(true);
● Use a sitemap
● Use html5 semantic tags

 

Share This
Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn