Как стать автором
Обновить

JavaScript и SEO в 2016 году

Время на прочтение 3 мин
Количество просмотров 24K
Вы все еще отдаете поисковикам HTML-версию своего SPA приложения? 2016 год на дворе, времена изменились.


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-пауку:


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

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

Работают оба варианта:


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

<p ng-show="isFirefox">Если вы пользуетесь браузером Firefox...</p>

А в этом блоке не доступен:

<p ng-if="isFirefox">Просто нажмите на подсвеченную стрелку...</p>

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

А Яндекс?


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

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

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

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

Лично я использую плагин html-snapshots, который запускается в Gulp'ом на этапе сборки проекта.
Теги:
Хабы:
+11
Комментарии 69
Комментарии Комментарии 69

Публикации

Истории

Работа

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн