JavaScript и SEO в 2016 году01.11.2016 18:18

Вы все еще отдаете поисковиках HTML-версию своего SPA приложения? 2016 год на дворе, времена изменились.
6d1ddef189f5440bbcec2c1ed30e679d.jpg

AJAX как технология окончательно сформировалась к 2005 году. В 2006 году W3C выпустил первую предварительную спецификацию объекта XMLHttpRequest в попытке создать официальный веб-стандарт. В 2009 году Google выступил с предложением сделать AJAX-страницы доступными для поисковиков. Тогда они не могли интерпретировать JavaScript, поэтому был предложен ряд практик, которые гарантировали что поисковые системы смогу индексировать AJAX-приложение.

Веб-мастерам приходилось генерировать HTML-версию своего сайта, а со страниц с адресом ?_escaped_fragment=page отдавать срендеренную HTML-версия страницы с отработанным JavaScript’ом. По этому поводу существует подробное руководство от Яндекса и Google.

Однако с октября 2015 года Google отмечает свое руководство как устаревшее, не рекомендуемое (deprecated). Запись в блоге Гугла утверждает что поисковый паук способен интерпретировать веб-страницы точно так же, как современные браузеры.

Практика


Итак, в наличии одностраничный сайт на AngularJS. Нужно с минимальными телодвижениями обеспечить его индексацию в Google и заодно проверить, действительно ли Google исполняет весь JavaScript-код.

Первым делом включим HTML5 History API Mode для UI-router: 

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

Теперь нужно настроить nginx так, чтобы все запросы отправлялись на index.html: 
location / {
	try_files $uri $uri/ /index.html =404;
}

Собственно, всё. Этого достаточно, чтобы Google начал индексировать сайт. В качестве пруфа могу привести свой личный проект seo11.ru.

Это SPA приложение на Angular 1.5, но все страницы проиндексированы, даже без sitemap.xml.

Контент страниц вставляется через ui-view, но он без проблем доступен Google-пауку:
3b3f6f3c82574c1fbb54aeaa56769da6.png

С помощью $stateProvider для каждой страницы сайта прописаны уникальные title и description: 

SEO 1:1

Работают оба варианта:
0691fc6c36de41ea8f0bc1ea5a71667f.png

Google отрабатывает страницу полностью, ровно так, как это делаешь ваш браузер. Вплоть до того, что текст в этом блоке доступен для поиска: 

Если вы пользуетесь браузером Firefox...

А в этом блоке не доступен: 
Просто нажмите на подсвеченную стрелку...

Разница в том, что ng-show просто добавляет display: hide к элементу, а ng-if вырезает элемент прямо из DOM.

А Яндекс?


Робот Яндекса тоже может индексировать JavaScript, но пока в рамках эксперимента. Об этом подробно написано в блоге. К сожалению, работает это не для всех сайтов и в настоящий момент нельзя быть уверенным, что ваш JS-сайт будет проиндексирован.

Увы, но в данном случае единственное решение, которое можно предложить для корректной индексации сайта, это использование HTML-копий по схеме, о которой упоминалось ранее.

Однако тратить на это значительные ресурсы не целесообразно, т.к. рано или поздно Яндекс будет полноценно исполнять JS-код для всех сайтов (если раньше не загнется).

На сегодняшний день наиболее простым способом генерации HTML-версии сайта является использование headless-браузера для ренгеринга страниц, например PhantomJS. Можно делать это на лету или же отдавать кэшированные заранее страницы (есть даже специальные сервисы, например prerender.io).

Лично я использую плагин html-snapshots, который запускается в Gulp’ом на этапе сборки проекта.

Комментарии (1)

  • 1 ноября 2016 в 17:15 (комментарий был изменён)

    +2

    ↑

    ↓

    Опыт перехода сайта на Single Page Application с упором на SEO

© Habrahabr.ru