JavaScript and SEO in 2016

You still give the search engines a HTML version of your SPA apps? 2016 at the courtyard, times have changed.

AJAX technology finally emerged in 2005. In 2006 the W3C released the first provisional specification of the XMLHttpRequest object in an attempt to create an official web standard. In 2009 Google proposed make an AJAX page available to search engines. Then they could not interpret JavaScript, so suggested a number of practices that will guarantee that search engines will be able to index an AJAX application.

Web masters had to generate a HTML version of your site, from pages with an address ?_escaped_fragment=page to give renderanno HTML version of the page with used JavaScript om. For this reason there is a detailed tutorial from Yandex and Google.

However, from October 2015 Google is celebrating its leadership as obsolete, deprecated (deprecated). Record in a blog post Google says that the search spider is able to interpret web pages exactly the same as modern browsers.

the

Practice

So, in the presence of a single-page website in AngularJS. You need with minimal fuss to ensure that it is indexed in Google and at the same time to see whether Google takes the entire JavaScript code.

First turn on HTML5 History API Mode for UI-router:

the

angular.module('app', ['ui.router'])
.config(function($locationProvider) {
$locationProvider.html5Mode(true);
});

Now we need to configure nginx so that all requests went to index.html:

the

location / {
try_files $uri $uri/ /index.html =404;
}

In fact, everything. That's enough to Google started indexing the site. As a proof I can give you my personal project seo11.ru.

It is a SPA Angular app on 1.5, but all the pages are indexed, even without sitemap.xml.

The content of the pages is inserted using ui-view, but he is available Google-spider


Use $stateProvider for each page spelled out a unique title and description:

the

<title data-ng-bind="title">SEO 1:1</title>
<meta name="description" content="{{description}}">

Both options:


Google fulfills page in its entirety, exactly as it is done by your browser. To the extent that the text in this block available for searching:

the

<p ng-show="isFirefox">If you use the Firefox browser...</p>

And this unit is not available:

the

<p ng-if="isFirefox">Simply click on the highlighted arrow...</p>

The difference is that ng-show just adds the display: hide to the element, ng-if cuts out the element directly from the DOM.

Yandex?

Yandex robot also can index JavaScript, but so far in the experiment. This is written in detail blog. Unfortunately, it works not for all sites and at the moment we cannot be sure that your JS site will be indexed.

Alas, in this case, the only solution that you can offer for proper indexing of the site, is the use of HTML copies on the scheme, which was mentioned earlier.

However, spend significant resources is not advisable, because sooner or later, Yandex will be able to take JS code for all websites (if it is not zagnetsya).

By far the most simple way of generating the HTML version of the site is the use of headless browser for ringaringa pages, such as PhantomJS. You can do it the fly or give pre-cached page (there are even special services, such as prerender.io).
I personally use the plugin html-snapshots, which runs in Gulp'ohms on the build stage of the project.

Article based on information from habrahabr.ru