Kite. Экспертиза

SEO-рекомендации
по SPA-сайтам

Цель документа

Дать понятную методологию выбора типа пререндера для SPA-сайта, снабдить максимально актуальной и полной информацией по работе с JavaScript-rich сайтами.

Основные термины

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

JavaScript изначально создавался для того, чтобы сделать web-страницы «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка, тут же выполняются.

JavaScript создан, чтобы сделать веб-страницу интерактивной и максимально интересной для пользователей.
2
Single Page Application (одностраничное приложение)
Web-приложение, работающее на языке JavaScript, компоненты которого (javascript-файлы, модули, css-файлы и т. д.), загружаются единожды на одной странице, а контент подгружается по необходимости.
3
JS-framework'и и библиотеки
Инструменты для построения динамических веб/мобильных/настольных приложений на языке JavaScript. Например, React, Angular, Vue.
4
Рендеринг
Процесс перевода JS-кода в стандартный HTML-код, понятный для поисковиков. То есть для того, чтобы отдавать поисковому роботу контент в нужном виде, обязательно нужно производить его рендеринг.

Методология выбора типа рендеринга

1
Только
Google
Ничего не делаем, выбираем WRS
2
Нужен Google + Яндекс, небольшой проект
Можно использовать аутсорс
3
Нужен Google + Яндекс, большой проект
Используем SSR

Обоснования для разработчиков

На этапе выбора варианта рендеринга вас ждет диалог-баталия с клиентом и командой разработки. На этом этапе важно отстоять свою точку зрения — рассказать о том, как каждый вариант отразится на SEO проекта. Каждую ресурсоемкую задачу нужно хорошо обосновать. Скорее всего Ваш разговор будет происходить так.
Разработка:
Давайте не будем ничего делать? У нас хватает других задач. Просто переведем проект на JS, а поисковики уже сами во всем разберутся. Google — умеет индексировать JS с помощью технологии WRS. Вот ссылка на официальный источник Google — разбирайтесь, раз не в курсе.
На что вы можете ответить следующее. WRS (web rendering service) это технология рендеринга, основанная на обработке JS с помощью браузера Google Chrome (также ее называют CSR — client side rendering, то есть рендеринг на стороне клиента).

Когда ее можно использовать. Если совсем забыть про Яндекс (и другие ПС) и делать сайт для Google. В то же время из этой же ссылки следует, что технология основана на браузере Google Chrome M41. Это браузер 2015 года, поэтому множество новых возможностей будет проигнорировано, возможна некорректная обработка. Сравнить можно здесь.
Технология основана на браузере Google Chrome M41
Технология рендеринга WRS основана на браузере Google Chrome M41

Минусы

По официальным заявлениям индексировать JS умеет только Google. Про остальные ПС можно забыть, или использовать более сложный и опасный метод — подмена по User-Agent.

Google использует для рендеринга Хром 41, браузер 2015 года. Возможна некорректная обработка.

Google не действует как настоящий браузер (например, не переходит по ссылкам onclick).

Оптимизирует свои ресурсы на загрузку — не будет ждать дольше 5 секунд.

Рендеринг на мобильных устройствах в любом случае займет кучу времени (в зависимости от характеристик аппарата). Например, чтобы обработать 1MB JS на мобильном устройстве Samsung Galaxy S7 нужно около 850 ms, а на менее производительном Nexus 5 уже почти 1700 ms!

Разработка:
Нет, нам важен Яндекс. Давайте искать другое решение. Например, у Яндекса есть инструкция, в которой предлагается использовать для JS сайтов AJAX Crawling Scheme. Аналогичная инструкция есть и у Google.
Суть метода — для каждой индексируемой динамической страницы должна быть статичная HTML-версия. Располагаться она должна на отдельном Url+ ?_escaped_fragment_= в URL. Также нужно использовать метатег в коде динамической страницы, чтобы сообщить боту о наличии HTML-версии страницы. То есть, чтобы проиндексировать site1.ru/example/, боту нужна страница site1.ru/example/?_escaped_fragment_= с идентичным содержимым.

На сегодня это официальная рекомендация от Яндекс по поводу JS и AJAX сайтов.

Минусы

Это устаревшая технология, которая отмечена Google как «нежелательная» с 2015 года. Более того, после лета 2018 года Google перестает поддерживать схему.

Неоднократно появлялись кейсы, когда версия с _escaped_fragment_ просто игнорируется Google в пользу JS-версии. Например, Юрий Хаит на конференции F1.

Также страдает краулинговый бюджет, который выделяют поисковые системы на сканирование сайта — поисковому роботу приходится заходить на два URL, вместо одного. При большом количестве страниц есть вероятность, что поисковой робот не будет своевременно добавлять и обновлять нужный контент.

Когда: не желательно использовать.
Разработка:
Мы можем отдать рендеринг на аутсорс. Сейчас есть разные сервисы, которые предоставляют свои сервера для рендеринга. Например, prerender.io, renderjs.io.
Для рендеринга используется механизм на основе Google Chrome 61, в планах обновление до Google Chrome 67.

Минусы

Зависимость от внешних ресурсов. Если сервис лагает, придется пройти всю цепочку от фиксирования бага, до общения с поддержкой до его исправления. Это долго, проект в это время не индексируется нормально.

Дорого на больших объемах. Например, Prerender. io с обновлением кеша раз в сутки — 360 $/месяц (50 тыс. — 100 тыс. страниц).

Крайне важно! Также использует _escaped_fragment. Планы после 2 кв. 2018 неизвестны.

Update (07.2018):

  • Больше не использует _escaped_fragment для демонстрации HTML-версии страницы. На сайте до сих пор устаревшая информация. Боты определяются по User-Agent и им отдается HTML-версия.
  • Цена по-прежнему высока для крупных проектов: кроме озвученных на сайте тарифов — рендеринг 2 млн страниц, с обновлением кеша раз в 1−3 дня, стоимость 3,080−9,232 $.

Когда: с учетом обновленных данных можно использовать для небольших проектов.
    Разработка:
    Что ж, давайте производить рендеринг на стороне нашего сервера. В большинстве JS-фреймворков есть поддержка пререндера (SSR — Server Side Rendering). Например, React, Angular, Vue.

    Минусы

    Нагрузка на сервер.

    Нужен высокий уровень скиллов от команды разработки, сложная задача для внедрения.

    Время отдачи первой версии для бота и клиента. Первый слепок должен отдаваться максимально быстро. Необходимо заморачиваться с кешированием и своевременным обновлением кеша.

    Нужно постоянно мониторить доступность страниц (код ответа сервера), метатеги и крайне желательно сам контент на странице (может сломаться рендер блока с текстом).

    Для безопасной работы нужно любые доработки тестить не на боевом сервере.

    !!!Реализация серверного рендера для Angular, React, Vue.
      Можем помочь в выборе движка и типа рендеринга, который больше подойдет для вашего проекта

      Критичные SEO-элементы

      Приведенные ниже элементы должны в обязательном порядке уходить в рендеринг и быть доступными сразу, на «холодном» старте страницы.
      Стандартные метатеги (Title, Description), подзаголовки (H1-H6), все остальные метатеги (meta robots, canonical и т. д.)
      Графическая информация, со всеми метатегами (title, alt и т. д.)
      Ссылки на страницах, как внутренние, так и внешние, со всеми атрибутами (например index, follow и т. д.). Ссылки использовать только в формате a href, никаких onclick
      Текстовое содержание страницы с используемым форматированием (абзацы, подзаголовки и т. д.). !Важно. Проверяйте, чтобы в подзаголовках, тексте не было комментария кода (часто бывает на ReactJS)
      Меню и дополнительные элементы навигации — хлебные крошки, дополнительные блоки со ссылками на разделы, страницы и т. д.
      Микроразметка: OG разметка, разметка хлебных крошек, разметка книг, контактов и т. д.

      Общие рекомендации

      1
      Поисковикам необходимо отдавать рендер всей страницы. Каждой отдельной странице — отдельный URL. (Для этого есть компонент роутинга в JS-движке).
      2
      НЕ менять структуру URL. Очень большие риски ошибки, которая наложится на все остальное.
      3
      Скорость взаимодействия с продуктом — все данные должны вытягиваться первично, скорость отдачи HTML не должна превышать 5 секунд. Для ускорения отдачи контента и снижения нагрузки на сервер — кешировать страницу и хранить на CDN. Время загрузки, как фактор ранжирования для поисковых систем, будет прямо зависеть от скорости рендеринга.
      4
      Необходимо максимально быстро обновлять кеш страницы, если он используется. В идеальном виде — сразу после появления нового контента. Если нет — то на хабовых страницах хотя бы 3—4 раза в сутки. Плюс редакторские материалы дополнительно можно закидывать на принудительный переобход.
      5
      Каждая страница должна отдаваться по своему отдельному URL. Не использовать хеш и хешбенг (# и /#!/) в URL — будут проблемы со сканированием. Плохой URL— example.ru/#/first-page, example.ru/#!/first-page. Хороший URL — example.ru/first-page.
      6
      Необходимо отслеживать не только состояние ответа сервера (200/404 и т. д.). Главное не забывать про наличие контента на странице. Так как может сломаться пререндер, страница будет 200 OK, но пустая. Есть два варианта — Радар Топвизор (можно использовать разметку нужных блоков) или свой плагин.
      7
      Очень внимательно с пагинацией — на страницах пагинации обязательно должны быть ссылки a href на следующие страницы и метатеги rel="next", rel="prev".
      8
      Все ссылки должны быть формата a href, не использовать onclick.
      9
      Должна быть корректная, быстро обновляемая карта сайта.

      Проверка и тестирование

      Посмотреть как GoogleBot в панели Вебмастера Google.
      Инструменты для краулинга — Comparser, ScreamingFrog.
      Оператор поиска site: с вхождением точной фразы по странице.
      Google Chrome 41 (при использовании WRS).

      Мониторинг

      Радар Топвизора — ответ сервера, метатеги, контент (с возможностью разметки важных фрагментов кода).
      Разметка важных фрагментов кода
      При разметке контента должна быть возможность выделить важные фрагменты кода
      Важные страницы в панели Вебмастера Яндекс.
      !Важно. Не забывать, что в любой момент может сломаться что угодно, и важно вовремя это заметить. Когда страницы выпадут из индекса — будет уже поздно.

      Инструкции по настройке счетчиков для аналитики

      Для сбора правильной статистики нужно дополнительно настроить счетчики Яндекс. Метрики и Google Analytics. Связано в первую очередь с основной проблемой — фиксирование перезагрузки страницы, передача данных о количестве просмотров.

      Google — инструкция по настройке счетчика.

      Яндекс общая, из неё частная.

      Также для каждого JS-фреймворка есть специальные плагины для аналитики. Этим нужно озадачить разработчиков.

      Что мы предлагаем?


      Можем помочь в выборе движка и типа рендеринга, который больше подойдет для вашего проекта, проконтролировать индексацию при переезде сайта на JS или провести полноценное продвижение c прогнозами для различных проектов на SPA
      Получить консультацию
      Оставьте свои контактные данные и мы с вами свяжемся
      Ваш e-mail
      Ваше имя
      Ваш номер телефона

      Оставляйте комментарии

      Обязательно оставляйте свои комментарии, что нужно добавить и раскрыть подробнее, главная цель — максимально полная инструкция по настройке SPA сайтов для SEO.
      Ваш e-mail
      Ваше имя
      Комментарий
      Made on
      Tilda