Вы все еще отдаете поисковиках HTML-версию своего SPA приложения? 2016 год на дворе, времена изменились.
AJAX как технология окончательно сформировалась к 2005 году. В 2006 году W3C выпустил первую предворительную спецификацию объекта XMLHttpRequest в попытке создать официальный веб-стандарт. В 2009 году Google выступил с предложением сделать AJAX-страницы доступными для поисковиков. Тогда они не могли интерпретировать JavaScript, поэтому был предложен ряд практик, которые гарантировали что поисковые системы смогу индексировать AJAX-приложение.
Веб-мастерам приходилось генерировать HTML-версию своего сайта, а в head главной страницы вставлять <meta name=«fragment» content="!">. А со страниц с адресом ?_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-пауку:
C помощью $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’ом на этапе сборки проекта.
ссылка на оригинал статьи https://habrahabr.ru/post/314172/
Добавить комментарий