Kite. Экспертиза
SEO-рекомендации
по SPA-сайтам
по SPA-сайтам
Основные термины
1
JavaScript
Язык программирования, который позволяет Вам создавать динамически обновляемый контент, управляет мультимедиа, анимирует изображения, и делает почти все из того, что относится к манипуляции со страницей, взаимодействию с посетителем и, в какой-то мере, с сервером.
JavaScript изначально создавался для того, чтобы сделать web-страницы «живыми». Программы на этом языке называются скриптами. В браузере они подключаются напрямую к HTML и, как только загружается страничка, тут же выполняются.
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 года, поэтому множество новых возможностей будет проигнорировано, возможна некорректная обработка. Сравнить можно здесь.
*UPD: С 7 мая 2019 года Googlebot для рендеринга страниц использует последнюю 74 версию. Теперь Googlebot поддерживает более 1000 новых функций, в том числе:
- ES6 и новые функции JavaScript;
- IntersectionObserver для отложенной загрузки;
- API веб компонентов v1.
Когда ее можно использовать. Если совсем забыть про Яндекс (и другие ПС) и делать сайт для Google. В то же время из этой же ссылки следует, что технология основана на браузере Google Chrome M41*. Это браузер 2015 года, поэтому множество новых возможностей будет проигнорировано, возможна некорректная обработка. Сравнить можно здесь.
*UPD: С 7 мая 2019 года Googlebot для рендеринга страниц использует последнюю 74 версию. Теперь Googlebot поддерживает более 1000 новых функций, в том числе:
- ES6 и новые функции JavaScript;
- IntersectionObserver для отложенной загрузки;
- API веб компонентов v1.
Технология рендеринга WRS основана на браузере Google Chrome 74
Минусы
⸺ По официальным заявлениям индексировать JS умеет только Google. Про остальные ПС можно забыть, или использовать более сложный и опасный метод — подмена по User-Agent.
⸺ Google не действует как настоящий браузер (например, не переходит по ссылкам onclick).
⸺ Оптимизирует свои ресурсы на загрузку — не будет ждать дольше 5 секунд.
⸺ Рендеринг на мобильных устройствах в любом случае займет кучу времени (в зависимости от характеристик аппарата). Например, чтобы обработать 1MB JS на мобильном устройстве Samsung Galaxy S7 нужно около 850 ms, а на менее производительном Nexus 5 уже почти 1700 ms!
⸺ 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 сайтов.
На сегодня это официальная рекомендация от Яндекс по поводу JS и AJAX сайтов.
Минусы
⸺ Это устаревшая технология, которая отмечена Google как «нежелательная» с 2015 года. Более того, после лета 2018 года Google перестает поддерживать схему.
⸺ Неоднократно появлялись кейсы, когда версия с _escaped_fragment_ просто игнорируется Google в пользу JS-версии. Например, Юрий Хаит на конференции F1.
⸺ Также страдает краулинговый бюджет, который выделяют поисковые системы на сканирование сайта — поисковому роботу приходится заходить на два URL, вместо одного. При большом количестве страниц есть вероятность, что поисковой робот не будет своевременно добавлять и обновлять нужный контент.
Когда: не желательно использовать.
⸺ Неоднократно появлялись кейсы, когда версия с _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 неизвестны.
⸺ Дорого на больших объемах. Например, 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.
⸺ Нужен высокий уровень скиллов от команды разработки, сложная задача для внедрения.
⸺ Время отдачи первой версии для бота и клиента. Первый слепок должен отдаваться максимально быстро. Необходимо заморачиваться с кешированием и своевременным обновлением кеша.
⸺ Нужно постоянно мониторить доступность страниц (код ответа сервера), метатеги и крайне желательно сам контент на странице (может сломаться рендер блока с текстом).
⸺ Для безопасной работы нужно любые доработки тестить не на боевом сервере.
!!!Реализация серверного рендера для 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 74 (при использовании WRS).
Мониторинг
Радар Топвизора — ответ сервера, метатеги, контент (с возможностью разметки важных фрагментов кода).
При разметке контента должна быть возможность выделить важные фрагменты кода
Важные страницы в панели Вебмастера Яндекс.
!Важно. Не забывать, что в любой момент может сломаться что угодно, и важно вовремя это заметить. Когда страницы выпадут из индекса — будет уже поздно.
Инструкции по настройке счетчиков для аналитики
Для сбора правильной статистики нужно дополнительно настроить счетчики Яндекс. Метрики и Google Analytics. Связано в первую очередь с основной проблемой — фиксирование перезагрузки страницы, передача данных о количестве просмотров.
Google — инструкция по настройке счетчика.
Яндекс общая, из неё частная.
Также для каждого JS-фреймворка есть специальные плагины для аналитики. Этим нужно озадачить разработчиков.
Google — инструкция по настройке счетчика.
Яндекс общая, из неё частная.
Также для каждого JS-фреймворка есть специальные плагины для аналитики. Этим нужно озадачить разработчиков.
Что мы предлагаем?
Можем помочь в выборе движка и типа рендеринга, который больше подойдет для вашего проекта, проконтролировать индексацию при переезде сайта на JS или провести полноценное продвижение c прогнозами для различных проектов на SPA
Получить консультацию
Оставьте свои контактные данные и мы с вами свяжемся
Оставляйте комментарии
Обязательно оставляйте свои комментарии, что нужно добавить и раскрыть подробнее, главная цель — максимально полная инструкция по настройке SPA сайтов для SEO.
Офис в Краснодаре
Офис в Москве
Донская, 32/Малая Калужская, 15, стр. 1
(офис 221)
Почта
© 2015—2022 kite.™
ООО «Открытое маркетинговое агентство»
ООО «Открытое маркетинговое агентство»
Напишите нам
Расскажите подробнее о продукте.
Нажимая на кнопку, Вы подтверждаете свое согласие c обработкой персональных данных.