Поисковая оптимизация сайтов, использующих SPA-приложения
При создании новых высоконагруженных веб-сервисов и сайтов разработчики стремятся использовать современные технологии. В силу этого всё большую популярность набирают различные JavaScript-фреймворки и библиотеки (Angular, React, Vue, Inferno и прочие), которые, безусловно, помогают создавать SPA (Single Page Application) приложения с лучшим на сегодня опытом взаимодействия, позволяют разрабатывать легко масштабируемые, удобные в поддержке веб-приложения.
Но у SPA-приложений имеется один существенный недостаток, сейчас поисковые роботы всё ещё плохо индексируют сайты, контент на которых рендерится с помощью JavaScript.
Поисковые боты были изначально разработаны для обхода статичных HTML-страниц и не умели интерпретировать JavaScript-код. Это означает, что части страницы, загруженные через AJAX, оставались невидимы для поисковых роботов, так как передача данных осуществляется после загрузки станицы. AngularJS и вовсе полностью охватывает асинхронную модель, и именно это создаёт проблемы для поисковых ботов.
Этот факт не позволяет в полной мере использовать современные технологии в разработке сайтов, сильно зависящих от поисковой индексации, так как оптимизация SPA-приложений технически очень сложная и требует значительных трудозатрат на реализацию изоморфных или универсальных приложений.
Если не выполнить процедуру правильной подготовки проекта к индексации поисковыми системами, то значительная часть страниц сайта не попадает в индекс, а также контент на самих страницах будет лишь частично распознаваться поисковиками. Следовательно, такая проблема будет явно влиять на ранжирование ресурса и его динамику по SEO-продвижению.
Как обстоят дела сейчас на рынке
- В 2009 году Google предложила решение с «_escaped_fragment_», AJAX-сайты должны были иметь статические версии страниц, а технология лишь помогала поисковому боту найти их.
- В 2014 году Google заявила, что будет сама индексировать сайты с динамическим контентом, загружаемым с помощью JavaScript.
- В 2015 году Google заявила, что уже очень хорошо научилась индексировать сайты с динамическим контентом, и анонсировала отказ от решения 2009 года с «_escaped_fragment_». И более того, она не рекомендует его использовать.
- В декабре 2017 года Google сообщила, что с 2018 года перестанет поддерживать решение с «_escaped_fragment_», потому что научилась индексировать сайты с динамическим контентом.
Итого: сейчас всё хорошо.
«Яндекс»
- По сей день официальная справка говорит, что для индексации SPA-сайтов следует использовать решение с «_escaped_fragment_».
- В ноябре 2015 «Яндекс» начал использовать в тестовом режиме JavaScript и CSS для индексации, но только для ограниченного круга ресурсов.
- Официальный ответ сотрудника от 24 апреля 2017 года – AJAX-сайты «Яндекс» так и не научился индексировать.
Итого: всё плохо, AJAX-сайты «Яндекс» так и не поддерживает.
В «Яндексе» и сейчас предлагают инструкцию по настройке AJAX-сайтов то есть говорят, что каждая индексируемая AJAX-страница должна иметь HTML-версию.
Так как поддержка ещё одной версии сайта (статической) — удовольствие не из дешёвых, то мы рассмотрим сервис, автоматизирующий этот процесс, — Prerender.
Что такое Prerender
Prerender — это Open Source решение, которое является прослойкой между поисковым ботом и вашим сайтом, помогая поисковому боту увидеть AJAX-сайт так, как видите его вы, когда открываете в браузере.
Prerender может быть установлен как на ваши сервера, что абсолютно бесплатно, так и использоваться без инсталляции благодаря облачному сервису Prerender.io, который за очень разумную плату будет делать всю работу на своём оборудовании.
Методы интеграции
Что касается установки данного сервиса для работы с сайтом, здесь имеется много готовых решений. На официальном сайте вы можете найти ссылки на четыре способа настройки Prerender.
Самым простым способом будет настройка Nginx или Apache, так как на ноябрь 2017 года этими веб-серверами пользуются более 60% сайтов в интернете, а их настройка для использования сервиса Prerender не составит труда вашему системному администратору или разработчику.
Если же в силу ограничений хостинга или каких-либо других у вас нет возможности сделать данные настройки на стороне сервера, то вы можете использовать один из готовых официальных модулей для интеграции с Prerender (ExpressJS или Rails) или воспользоваться модулями, разработанными сообществом сервиса.
После того как вы сделаете необходимые настройки, вам потребуется также установить специальный тег в блоке <HEAD> на всех страницах, которые должны будут обработаны сервисом Prerender: <meta name="fragment" content="!">.
На этом настройка интеграции сервиса будет закончена.
Как это работает
Prerender делает за «Яндекс» его работу.
Когда поступает запрос от поискового бота «Яндекса», он перенаправляется на сервис Prerender.
Prerender запускает на сервере браузер Chrome и открывает запрошенную «Яндексом» страницу и ждёт, когда она полностью загрузится и отрисуется.
Prerender сохраняет уже отрисованную с помощью JavaScript страницу и отдает её «Яндексу» как статическую.
Таким образом, посетители сайта всё так же могут пользоваться динамическим быстрым интерфейсом SPA-приложения, а боты поисковых систем получают подготовленные для индексации статические HTML файлы.
Проверка
После того как все необходимые страницы сайта будут обработаны сервисом, вы можете проверить результат симулятором или в Fetch and Render из Search Console (Посмотреть как Googlebot), при этом на конце URL-адресов страниц необходимо добавлять "?_escaped_fragment_=". Данный параметр соответствует запросу поискового робота, когда он встречает тег fragment в блоке <HEAD> страницы вашего сайта. Например, если страница вашего сайта имеет URL: https://site.ru/catalog/.
То в сервисе «Посмотреть как Googlebot», нужно ввести URL:https://site.ru/catalog/?_escaped_fragment_=.
В «Яндекс.Вебмастере» доступен инструмент «Переобход страниц», вы можете воспользоваться им для того, чтобы ускорить обновление данных о страницах в базе индексирующего робота. В инструмент необходимо добавлять страницы именно по адресу HTML-копии, то есть с
?_escaped_fragment_=.
Что получим
Один из примеров, как будет выглядеть неподготовленный сайт для поисковых ботов.
В декабре 2017 года внедрили сервис на сайт.
Динамика по увеличению количества проиндексированных страниц в Google после внедрения сервиса.
Динамика по увеличению количества проиндексированных страниц в «Яндексе» после внедрения сервиса.
Как мы видим, есть значительный рост по количеству проиндексированных страниц, что в свою очередь положительно влияет и на поисковую оптимизацию ресурса.
Кейс интеграции от citilink.ru
В «Ситилинке» в 2016 году появилась мобильная версия построенная на фреймворке AngularJS. Особенность данного сайта в том, что он на 100% рендерится в браузере с помощью JavaScript. Вот так выглядит сайт при отключённом JS.
Поэтому мы сразу задумались над тем, какое решение выбрать, чтобы помочь поисковым ботам проиндексировать сайт.
Было установлено несколько серверов с Prerender и Memcache для кеширования результатов Prerender.
Особенность настройки была в том, что мы не стали использовать схему интеграции с «_escaped_fragment_», а отправляли запросы на Prerender по UserAgent, это позволило нам не заворачивать ботов Google на Prerender, так как он сам неплохо справлялся, а перенаправлять только тех ботов, которые нам были интересны (например, «Яндекс»).
Как бонус мы получили возможность переадресовывать на Prerender даже тех ботов, которые не поддерживают «_escaped_fragment_», это оказалось полезным для того, чтобы в популярных мессенджерах и соцсетях формировались правильные превью для нашего сайта.
Страницы в поиске после внедрения Prerender.
В процессе интеграции мы столкнулись с некоторыми трудностями, которые потребовали внесения правок в наше AngularJS приложение.
Большинство вопросов исчезает после прочтения «Лучших практик».
Рассмотрим некоторые из них.
Несуществующие страницы отдавали HTTP код 200 ОК, вместо 404 Not Found.
Для решения этой проблемы достаточно, чтобы ваше приложение добавляло meta-тег «<meta name="prerender-status-code" content="404">», который даст понять Prerender, каким HTTP-кодом ответить.
Не работал 301 редирект.
Опять же понадобились правки, добавляющие meta-теги:
«<meta name="prerender-status-code" content="301">»
«<meta name="prerender-header" content="Location: http://www.example.com">».
Prepender либо не дожидался, когда страница отрисована, либо ждал гораздо дольше, чем это нужно.
Решение: нужно изначально добавить в HTML код:
<script> window.prerenderReady = false; </script>
И когда ваше приложение считает, что оно закончило загрузку заменить значение переменной:
window.prerenderReady = true.
Заключение
Использование технологии Prerender на сайте полностью не избавляет вас от проблем. На слабых серверах сайт может долго отдаваться поисковым ботам, и они могут подумать, что сайт очень медленный (появляются ошибки в веб-мастере, что слишком долгий ответ сервера).
Также возможны различные непредсказуемые баги. Мы рекомендуем не использовать клиентский рендеринг в тех случаях, где можно от него отказаться. Особенно в конкурентных нишах, где крайне важна SEO.
За конструкцию "SEO оптимизация" сразу вон из профессии.
А за CD-диск?))
Яндекс, пожалуйста сделай уже нормальную индексацию SPA. Испанский стыд же.
Зачем? Органической выдачи уже почти не осталось.
SSR наше всё
Пререндер - всегда плохое решение, если речь идёт не о сайте-визитке с 5 страницами. Везде, где подразумевается какой-либо каталог, ты зачастую не можешь и не должен обходить все 5к+ страниц и все возможные естественные роуты, и обновлять их время от времени вручную. Есть SSR, есть гидратация, есть кеш, чтобы это работало и быстро и автоматически, и для любого поисковика
Кто еще не видел эту статью https://www.elephate.com/blog/ultimate-guide-javascript-seo/ — must read. Про Chrome 41 действительно правда, сам недавно пофиксил один из проектов, который без SSR.