Россия+7 (495) 960-65-87

BDD 2018: SPA+SEO. Как ПС индексируют и ранжируют JavaScript-rich сайты

Россия+7 (495) 960-65-87
Шрифт:
3 13166

9-11 августа в Калининграде прошла шестая ежегодная конференция по интернет-маркетингу и заработку в сети Baltic Digital Days 2018. В первый день конференции Владимир Короленко (Kite – Digital Agency) выступил с мастер-классом на тему «JS+SEO: как ПС индексируют и ранжируют JavaScript-rich сайты».

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

В один прекрасный день звонит маркетолог или владелец проекта и сообщает чудесную новость: «Ребята, мы тут посовещались с разработкой и решили переехать на SPA-сайт на JS-движке ReactJS. Подготовите нам рекомендации?».

Ваши первые мысли, после осознания масштаба проблемы (в зависимости от того, сталкивались вы с JS-сайтами или нет):

  • «Блин, ну вот все же нормально было, зачем?»
  • «WTF??»/«Это еще что такое?»

Как ПС индексируют и ранжируют JavaScript-rich сайты

Первым делом вы, конечно, пойдете гуглить. Но проблема в том, что информации много, но она обрывочная, а удачных кейсов по переезду крайне мало.

Хотим помочь разобраться с технологией, дать рекомендации, которые можно сразу использовать в работе. Независимо от того, собирается клиент переезжать на SPA-сайт или уже переехал. Начнем с азов и теории, а потом расскажем о применении наших рекомендаций на практике.

Что такое JS-сайты, SPA, React и т.д.

Что же это за зверь такой «SPA-сайты» и чем они отличаются от статических сайтов на HTML, динамических на PHP и т.д.

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

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

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

Как ПС индексируют и ранжируют JavaScript-rich сайты

Single Page Application в переводе на русский язык означает «одностраничное приложение». Это web-приложение, работающее на языке JavaScript, компоненты которого (JavaScript-файлы, модули, CSS-файлы и т.д.) загружаются единожды на одной странице, а контент подгружается по необходимости.

JS-фреймворки и библиотеки — это инструменты для построения динамических веб/мобильных/настольных приложений на языке JavaScript.

Как ПС индексируют и ранжируют JavaScript-rich сайты

В чем отличие от статических сайтов

Главное отличие динамических сайтов на JavaScript от статических в том, что для поисковых систем это до сих пор «магия», которая усложняет индексацию на всех этапах обработки контента.


Визуализация с сайта elephate.com

Типичный для SPA-сайта HTML-код

Как ПС индексируют и ранжируют JavaScript-rich сайты

Страница полностью строится на стороне браузера пользователя. Браузер выполняет JavaScript и создает контент на лету.

Контент, который видит пользователь, меняется в зависимости от взаимодействия с SPA-сайтом, при этом весь процесс происходит без перезагрузки страниц и на одном URL.

Так видит пользователь страничку на проекте mybook.ru:

Как ПС индексируют и ранжируют JavaScript-rich сайты

А так для пользователя выглядит официальный сайт JS-фреймворка React:

Как ПС индексируют и ранжируют JavaScript-rich сайты

И вдруг внезапно. Так видит поисковой бот Google ту же самую страничку:

Как ПС индексируют и ранжируют JavaScript-rich сайты

А так для поискового бота Яндекса выглядит официальный сайт JS-фреймворка React:

Как ПС индексируют и ранжируют JavaScript-rich сайты

Краулер ПС обработать такой контент не способен. Нарушается сразу несколько основополагающих принципов индексации.

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

На последнем пункте стоит остановиться подробнее.

Что про JS говорят поисковые системы?

Как думаете, что случится с проектом после переезда на SPA-движок, если ничего не предпринимать и оставить все как есть?

Как ПС индексируют и ранжируют JavaScript-rich сайты

Как разные JavaScript движки индексируются поисковиками? Основано на эксперименте, опубликованном на MOZ

Google проиндексирует и обработает большую часть контента. Для обработки JavaScript используется механизм на основе браузера Google Chrome. Правда, со своими особенностями, о которых мы еще расскажем.

Как ПС индексируют и ранжируют JavaScript-rich сайты

Но в Рунете есть еще и Яндекс, который мы просто не можем игнорировать. Яндекс до сих пор обрабатывает динамический контент (JavaScript, AJAX) в порядке эксперимента. Для корректной индексации необходимо наличие полной HTML-копии страницы.

Как ПС индексируют и ранжируют JavaScript-rich сайты

Официальная информация из блога Яндекса

Как ПС индексируют и ранжируют JavaScript-rich сайты

Комментарии там же, ссылка на официальную рекомендацию Яндекса по индексации JS и AJAX

Один из самых известных случаев произошел в начале июня — Яндекс перестал индексировать сайты, созданные на конструкторе Wix, после того как конструктор изменил алгоритм генерации страниц.

Как ПС индексируют и ранжируют JavaScript-rich сайты

По заявлению представителей Яндекса, теперь все хорошо и проблем с индексацией сайтов на Wix нет. Но факт остается фактом. Если вы не хотите проблем с индексацией на проекте — нужна статичная HTML-копия для Яндекса.

Как ПС индексируют и ранжируют JavaScript-rich сайты

Возвращаясь к вопросу, что произойдет после переезда — клиент потеряет трафик и, как следствие, деньги. Хорошо, если у него есть SEO-шники, у которых можно запросить рекомендации).

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

Почему клиенты выбирают JS-фреймворки

Несмотря на то, что для многих крупных проектов переход на JS-движок — только дань моде, у JS-сайтов есть и настоящие плюсы.

Сторона пользователя

  • Скорость. Отсутствие перезагрузки страниц обеспечивает быстрое взаимодействие с пользователем. От этого — максимально лояльная проекту аудитория и увеличение количества конверсий.
  • Отзывчивый (Responsive) дизайн вместо адаптива. Благодаря этому увеличивается количество устройств и потенциальных пользователей.
  • Расширенные возможности по персонализации контента. Зарегистрированному пользователю можно «собирать» максимально персонализированные страницы и разделы (умные ленты, рекомендации и т.д.).

Сторона разработки

  • Модульность. Благодаря этой особенности JS-фреймворков становится возможно разделение продукта на компоненты, которые отдаются разным командам разработки. В итоге проект собирается как конструктор из кубиков. А сроки разработки сокращаются за счет параллельной работы.
  • Четкое разделение front-end и back-end команд разработки.
  • Широкие возможности по созданию архитектуры (можно собрать что угодно).
  • Проекты проще в разработке — код значительно короче благодаря возможности повторного использования компонентов.
  • Разные платформы (desktop и mobile приложения) на основе одного кода.

Неочевидные плюсы SPA

  • Конкурентоспособность на рынке труда. Переход на новую и современную технологию, которая сейчас активно развивается — возможность привлечь лучших разработчиков. Крутые спецы не хотят работать с архаичными технологиями. А их присутствие в команде — часто само по себе толчок к развитию.
  • Рефакторинг. Если у вас две версии сайта (основной поддомен для десктоп-устройств и отдельный для мобильных), и над ними в разное время работали несколько команд разработки и верстальщиков, рано или поздно вы столкнетесь с необходимостью делать рефакторинг для развития проекта. В этом случае JS-фреймворки отличное решение. Вы сможете объединить все версии на одном коде, который значительно легче поддерживать и развивать дальше.

Как видно, плюсов много, хотя некоторые из них достаточно спорные. И конечно, целесообразность переезда для каждого проекта индивидуальна.

Что же все-таки делать по SEO, если для проекта переход на SPA — единственный путь развития с точки зрения маркетинга и продукта?

Варианты рендеринга, плюсы и минусы

Есть очень важный технический термин, который в свете SPA-сайтов нужно запомнить и понять. Это понятие «рендеринг». Этот термин — ключ к успешному индексированию проекта.

Рендеринг — это процесс перевода JS-кода в стандартный HTML-код, понятный для поисковиков.

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

Часто на этапе выбора варианта рендеринга вас ждет диалог-баталия с клиентом и командой разработки. На этом этапе важно отстоять свою точку зрения — рассказать о том, как каждый вариант отразится на SEO проекта. Каждую ресурсоемкую задачу нужно хорошо обосновать (спойлер: она и правда ресурсоемкая). Скорее всего, разговор будет происходить так.

WRS — технология обработки JS от Google

Разработка: «Давайте не будем ничего делать? У нас хватает других задач. Просто переведем проект на JS, а поисковики уже сами во всем разберутся. Google — умеет индексировать JS, с помощью технологии WRS. Вот ссылка на официальный источник Google — разбирайтесь, раз не в курсе».

WRS (web rendering service) — это технология рендеринга, основанная на обработке JS с помощью браузера Google Chrome (также ее называют CSR — client side rendering, т.е. рендеринг на стороне клиента).

Как ПС индексируют и ранжируют JavaScript-rich сайты

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

Минусы:

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

  • Старый браузер Google Chrome 41 2015 года.
  • Google не действует как настоящий браузер (например, не переходит по ссылкам onclick).
  • Оптимизирует свои ресурсы на загрузку — не будет ждать дольше 5 секунд.
  • Anti-mobile First. Рендеринг на мобильных устройствах в любом случае займет кучу времени (в зависимости от характеристик аппарата). Например, чтобы обработать 1MB JS на мобильном устройстве Samsung Galaxy S7 нужно ~850ms, а на менее производительном Nexus 5 уже ~1700ms!

Статичная HTML-копия + AJAX Crawling Scheme

Разработка: «Нам важен Яндекс. Давайте искать другое решение. Например, у Яндекса есть инструкция, в которой предлагается использовать для JS сайтов AJAX Crawling Scheme. Аналогичная инструкция есть и у Google».

Суть метода — для каждой индексируемой динамической страницы должна быть статичная HTML-версия на отдельном Url+ ?_escaped_fragment_= в URL. Также нужно использовать метатег в коде динамической страницы, чтобы сообщить боту о наличии HTML-версии страницы.

Т.е. чтобы проиндексировать http://site1.ru/example/, боту нужна страница http://site1.ru/example/?_escaped_fragment_= с идентичным содержимым.

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

Как ПС индексируют и ранжируют JavaScript-rich сайты

Минусы:

  • Это устаревшая технология, которая отмечена Google как «нежелательная» с 2015 года. Более того, после лета 2018 года Google перестает поддерживать эту схему.
  • Неоднократно появлялись кейсы, когда версия с _escaped_fragment_ просто игнорируется Google в пользу JS-версии. Например, Юрий Хаит рассказывал о таком на F1.
  • Также страдает краулинговый бюджет, который выделяют поисковые системы на сканирование сайта — поисковому роботу приходится заходить на два URL вместо одного. При большом количестве страниц есть вероятность, что поисковой робот не будет своевременно добавлять и обновлять нужный контент.

Когда можно использовать: нежелательно.

Аутсорс сервисы — prerender.io и пр.

Разработка: «Мы можем отдать рендеринг на аутсорс. Сейчас есть разные сервисы, которые предоставляют свои ресурсы (сервера) для обработки JS (рендеринга) и берут на себя демонстрацию HTML-версии страниц.. Например, prerender.io, renderjs.io».

Как ПС индексируют и ранжируют JavaScript-rich сайты

Минусы:

  • Зависимость от внешних ресурсов. Если сервис лагает, придется пройти всю цепочку от фиксирования бага, общения с поддержкой до его исправления. Это долго, проект в это время не индексируется нормально.
  • Дорого на больших объемах. Например, Prerender.io, с обновлением кэша раз в сутки — 360 $/месяц (50 тыс.—100 тыс. страниц).

Как ПС индексируют и ранжируют JavaScript-rich сайты

Update по технологии (июль-август 2018):

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

Как ПС индексируют и ранжируют JavaScript-rich сайты

Когда можно использовать: с учетом обновленных данных технология подойдет для небольших проектов.

SSR — рендеринг на стороне своих серверов

Разработка: «Что ж, давайте производить рендеринг на стороне наших серверов».

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

Боты определяются по User-Agent и им отдается статичная HTML-версия, пользователю — динамическая (возможны вариации в виде изоморфного JavaScript, но это уже другая история).

Как ПС индексируют и ранжируют JavaScript-rich сайты

Минусы:

  • Большая нагрузка на сервер.
  • Нужен высокий уровень скиллов от команды разработки, сложная задача для внедрения, которая потребует большое количество часов back-end’а.
  • Время отдачи первой версии для бота и клиента. Первый слепок должен отдаваться максимально быстро. Необходимо настраивать кеширование и своевременное обновление кеша.
  • Нужно постоянно мониторить доступность страниц (код ответа сервера), метатеги и крайне желательно сам контент на странице (может сломаться рендер блока с текстом).
  • Для безопасной работы нужно любые нововведения тестить не на боевом сервере.

!Важно. Один из главных плюсов JS-фреймворков — его модульность — становится существенным минусом — сломаться может ЧТО угодно и КОГДА угодно.

Бывают ситуации, когда страница отдает корректный 200ОК, но в индексе — пусто (только head и footer), или нет части контента. Может сломаться рендер блока с текстом, рендер на пагинации, рендер комментариев и т.д.

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

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

Поведенческие — вишенка на торте

Пока не ясно, что с поведенческими факторами. От слова «совсем».

Дополнительные настройки счетчиков Метрики и Google Analytics позволяют зафиксировать перезагрузку страницы и смену URL — из этого считаются метрики глубины просмотра и времени на странице.

Но насколько корректно все измеряется и учитывается на JS-сайтах — не ясно. В любом случае остаются не зафиксированными передвижения мыши по экрану.

Как ПС индексируют и ранжируют JavaScript-rich сайты

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

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

  • Выбираем тип рендеринга.
  • Отдаем поисковикам рендер всей страницы. Каждой странице — отдельный URL (для этого есть компонент роутинга в JS-движке).
  • Кэп: НЕ менять структуру URL при переезде. Очень большие риски ошибки, которая наложится на все остальное. Дополнительный стресс для ПС. Если проект создается с нуля — построить всю структуру заранее.
  • Кэшируем и обновляем. Чтобы максимально быстро отдавать страницу пользователю — используем кэширование. Для снижения нагрузки на сервер кэш можно хранить на CDN.
  • Кэш на листингах/категориях/списках желательно обновлять 3-4 раза в сутки, либо после появления нового контента. Редакторские материалы можно отправлять на принудительный переобход в ПС.
  • Не используем хеш в URL (# и /#!/). Возможны проблемы с индексацией таких URL.

Т.е. плохой URL: example.ru/#/first-page, example.ru/#!/first-page, хороший URL: example.ru/first-page

Как ПС индексируют и ранжируют JavaScript-rich сайты

Как ПС индексируют и ранжируют JavaScript-rich сайты

  • Настраиваем корректный 404 ответ сервера. Для SPA-сайта это нестандартная, но выполнимая задача.

Как ПС индексируют и ранжируют JavaScript-rich сайты

P.S. SPA-сайты — тренд в разработке. Не нужно бояться проблем с SEO. Детальная подготовка и своевременная фиксация багов снизит возможные проблемы при переезде.

Как ПС индексируют и ранжируют JavaScript-rich сайты

Презентация доклада

(Голосов: 1, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Даше Калинской


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Кирилл
    4
    комментария
    0
    читателей
    Кирилл
    6 месяцев назад
    Спасибо большое автору.
    Среди кучи рекламных материалов этого сайта, приятной неожиданностью становится возможность иногда встретить интересные статьи.
    -
    4
    +
    Ответить
  • Киров
    7
    комментариев
    0
    читателей
    Киров
    6 месяцев назад
    Эксперемнтаторы... уже давно провели серию эксперементлв и знаем что и как :)
    -
    0
    +
    Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Сколько ссылок помогут продвинуть молодой сайт
Павел Андрейчук
33
комментария
0
читателей
Полный профиль
Павел Андрейчук - Дело в том, что вряд ли в ваших платных "качественных" кейсах найдётся хоть пару % действительно новой и полезной информации которой бы не было на общедоступных источниках.
Рейтинг Известности 2018: второй этап народного голосования
Константин Сокол
3
комментария
0
читателей
Полный профиль
Константин Сокол - Кто был ответственный за дизайн таблицы голосования? Копирайтер?
Сайт на WordPress: за и против
Мира Смурков
1
комментарий
0
читателей
Полный профиль
Мира Смурков - Людмила, я согласен с большинством комментаторов. Вы хоть один полноценный магазин сделали на этих движках? Woocommerce это система с супер возможностями. И к ней есть дополнительные модули, с функционалом, который вряд ли появиться на Битрикс. А самому это программировать - сотни тысяч рублей на разработку. А приведя в пример сложности с robots.txt и Sitemap вы ставите под вопрос вашу компетенцию в понимании Интернет-бизнеса и веб-разработки в целом. Во-первых это такие мелочи, а во-вторых это все делается на вордпресса за 2 минуты, и опять же с возможностями многократно превышающими Битрикс.
Обзор популярных CMS: плюсы и минусы
Гость
1
комментарий
0
читателей
Полный профиль
Гость - как по мне joomla! самая удобная и гибкая система из всех современных (я про wp раньше так думал, пока меня в Extrit не убедили в обратном). Раньше всегда оставался на техподдержке, потому что сам заполнять не мог, а теперь делаю это сам, потому что админка простая как палка. + на других цмсках при просьбе что-то добавить мне либо цену загибали овер 100500 либо говорили - нереально, делай новый сайт. А на joomla норм
Google обошел Яндекс по популярности в России в 2018 году: исследование SEO Auditor
Рамблер
1
комментарий
0
читателей
Полный профиль
Рамблер - Вот вроде отечественный - это сказано верно.. «Я́ндекс» — российская транснациональная компания, зарегистрированная в Нидерландах. Так говорится в Википедии. И с хрена ли ОТЕЧЕСТВЕННЫЙ поисковик зарегистрирован в Европе? И где платится основная часть налогов? Ну-ууу, точно не в России. И если запахнет жаренным, то был Яндекс и нет Яндекса!
8 методик в SEO, от которых давно пора отказаться
Евгений Сметанин
11
комментариев
0
читателей
Полный профиль
Евгений Сметанин - Факторов вообще очень много, согласитесь, вы будете использовать максимальное их количество, особенно, если в ТОПе засели агрегаторы с сумасшедшими ПФ. В таких случаях, вхождение ключа в домен для маленького профильного сайта, сыграет свою положительную роль. Конечно же, если контент на страницах хорошего качества. У меня есть несколько успешных кейсов на эту тему. На сайте продают несколько видов товаров, а выстреливает в ТОП тот, название которого присутствует в доменном имени. Как корабль назовешь, так он и поплывет, верно?))
Инструкция: настраиваем цели Яндекс.Метрики через Google Tag Manager
Roman Gorkunenko
1
комментарий
0
читателей
Полный профиль
Roman Gorkunenko - Здравствуйте. Подскажите, пожалуйста, можно с айпи метрики вытащить среднюю стоимость клика по утм меткам? В метрике есть такой шаблон tags_u_t_m, но он не совместим с меткой директа, у них разные префиксы.
Аудит структуры интернет-магазина мебели от «Ашманов и партнеры»
Дмитрий
11
комментариев
0
читателей
Полный профиль
Дмитрий - Сергей, а вы допускаете, что вся ваша жизнь - seo-миф?
Идеальный каталог для продвижения сайта: структура и функционал
Татьяна Ягутьева
6
комментариев
0
читателей
Полный профиль
Татьяна Ягутьева - Уважаемый Денис, сделайте сами напишите свою статью. Посоветуйте другую универсальную CMS, желательно идеальную по всем параметрам. Битрикс очень сильно зависит от разработчика. Если у него прямые руки - бардака не будет. А вообще, конечно, холивар на тему CMS/конструкторов/фреймворков - наверное, вечный. Давайте не будем начинать :)
Как выбрать подрядчика для продвижения сайта: 7 уровней воронки поиска
aashutosh
1
комментарий
0
читателей
Полный профиль
aashutosh - data science training institute in noida- Webtrackker Technology (8802820025) providing Data Science Training in Noida. Get ✓ 40 Hours Learning training✓ 70 Hrs Projects ✓ 24 X 7 Support ✓ Job Assistance. WEBTRACKKER TECHNOLOGY (P) LTD. C - 67, sector- 63, Noida, India. E-47 Sector 3, Noida, India. +91 - 8802820025 0120-433-0760 +91 - 8810252423 012 - 04204716 EMAIL:info@webtrackker.com webtrackker.com/Best-Data-Science-Training-Institute-in-Noida.php
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
345
Комментариев
262
Комментариев
246
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
74
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
56
Комментариев
55

Отправьте отзыв!
Отправьте отзыв!