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

Как вариант, изображение может выглядеть так (сайт после перевода на React JS):

Пример правильно настроенного сайта на JS:

https://za.elemis.com/pro-collagen-rose-cleansing-balm.html

И не настроено:

https://us.elemis.com/pro-collagen-rose-cleansing-balm.html

Рекомендации в статье основаны на объединенном опыте оптимизации этих сайтов как в Яндексе, так и в Google.

В Google служба веб-рендеринга (WRS, часть Caffeine Indexing System) отвечает за процесс рендеринга и сканирования. Схема индексации JS-сайтов следующая:

Узнать больше — в справке Google.

Самый простой способ проверить, настроен ли рендеринг, — использовать плагин переключателя агента пользователя (хромовый трансплантат).

Подходит для базовой проверки настроек отрисовки — если сайт работает полностью как SPA на JS, то его будет видно сразу, а вот если отрисовка конкретного блока нарушена — работать не будет.

Основным инструментом проверки является инструмент «Показать как Googlebot» в Google Search Console. С помощью этого сервиса также можно изучить конкретную страницу.

Также для сравнения исходного кода и отрендеренного кода вам поможет расширение View Rendered Source.

Это дает такие результаты:

Основные методы настройки рендеринга (подробнее см. https://vc.ru/seo/414784-javascript-i-seo-problemy-i-reshenia).

Не забудьте деактивировать расширение после анализа сайта!

Основные методы реализации рендеринга:

• Рендеринг сервера. Классический способ рендеринга на стороне сервера.

• Динамический рендеринг. Динамический рендеринг — это «переключение между содержимым, отображаемым на стороне клиента, и предварительно обработанным содержимым для определенных пользовательских агентов».

Этот метод не рекомендуется Google с 2022 года.

• Предварительный рендеринг. Формально пререндеринг завязан на SSR, но работает он иначе. Основное отличие заключается в том, когда именно HTML-код генерируется для данного URL-адреса. Классический SSR генерирует HTML при получении каждого запроса. Предварительный рендеринг состоит из создания страницы во время сборки и последующего повторного использования предварительно обработанного HTML для каждого запроса. Другими словами, каждый посетитель вашего сайта в случае использования SSR получает перерисованную заново страницу. Если используется предварительный рендеринг, страница, отображаемая один раз, доступна для всех посетителей.

Наиболее оптимальным является серверный рендеринг (SSR). Будем считать именно это.

Самая известная библиотека рендеринга — https://prerender.io/.

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

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

Мы не рассматриваем и не рекомендуем использовать рендеринг на стороне клиента (CSR).

Какие нюансы могут возникнуть:

• Если сайт создан с региональными поддоменами, следует проверить настройки рендеринга как на основном сайте, так и на поддоменах. Мы неоднократно сталкивались с ситуацией, когда не на всех поддоменах корректно настроен рендеринг, особенно если сайт итеративно переходит на новый фреймворк. В этом случае нужно уточнять у разработчиков и проверять поддомены, которые уже переведены на JS.

Пример

Старая версия сайта — внутренние ссылки НЕ ЧПУ:

Новая версия сайта — с ЧПУ:

Google давно видел только старую версию сайта, еще не переведенную на ReactJS. Правильный перенос позволил сразу выдать роботам нужную версию сайта с ЧПУ.

• Необходимо быстро проверить корректность обработки URL-адресов ЧПУ, заголовков, мета- и H1-тегов на сайте. Для этой задачи вам поможет Screaming Frog с опцией Configuration-User-agent-Googlebot (можно даже выбрать Googlebot для смартфонов и ПК, что для данной задачи не принципиально).

• Поисковые системы могут не видеть внутренние ссылки на сайте. Очень может быть, что поисковик показывает сайт, на котором нет ссылок и (и с точки зрения разработчика все будет работать нормально). А другие несвязанные страницы краулеры могут просто не увидеть, не проиндексировать, да и пользователи о них не узнают.

Чтобы избежать этой проблемы, ссылки представлены в виде статических элементов HTML, чтобы PS мог их видеть.

Ссылки должны быть в виде тега а не в виде других ссылок.

Обязательно проверяйте все внутренние ссылки, во всех навигационных меню, а также в фильтрах.

Примеры неправильного форматирования:

Или

Ссылки в фильтрах также должны быть оформлены в виде ссылок, что важно для продвижения.

Пример вывода некорректных ссылок (в нем нет активных ссылок):

Пример правильного вывода ссылки: https://www.mvideo.ru/portativnoe-audio-25/portativnaya-akustika-202/f/category=umnye-kolonki-7487:

Узнать больше — в справке Google.

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

Другой опасный пример — несинхронный вывод переменных в текстовых шаблонах.

То же самое можно сделать с якорями ссылок, нумерацией страниц, блоками ссылок и другими блоками страниц.

Вы должны быть осторожны со всем этим.

• Дублированный контент. Важно знать, что JS может привести к дублированию контента, если уникальный контент загружается динамически и имеет проблемы с рендерингом или загружается слишком долго. Google может видеть только повторяющиеся шаблоны. Необходимо проанализировать наличие дублирующегося кода в сохраненной копии и на самом сайте.

• Поисковые системы не видят важные вещи из-за отложенной ленивой загрузки. Ленивая загрузка может использоваться только для второстепенных элементов содержимого страницы.

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

Такая разработка может быть итеративной.

Даже на больших сайтах не весь JS-контент индексируется должным образом.

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

Вы должны быть осторожны при загрузке этих элементов.

Старый добрый заезд Я все еще работаю.

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

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

Фреймворк поможет оптимизировать скорость загрузки Next.js. Поскольку он хорошо оптимизирован для SEO, в том числе с возможностью вставки метатегов и микроразметки, он может успешно решать проблемы индексации страниц этих приложений поисковыми роботами, что негативно влияет на SEO.

Заключение :

• По возможности все нюансы при разработке/переносе сайта на JavaScript-фреймворк следует обговорить заранее. Это сведет к минимуму количество ошибок и стоит потратить внушительное количество часов на SEO-анализ.

• Не торопите процесс переноса сайта на рабочий сервер, пока не убедитесь, что все полностью готово.

• Подготовьтесь к тому, чтобы что-то пошло не так, как планировалось, а лучше – составьте обратный план (не в формате «план – SEO-специалист определяет задачу, а разработчик ее реализует», а «разработчик заранее планирует время на выполнение задачи, и реализует все SEO изменения до расчетов на боевом сервере).

• Яндекс в 2022 году сказал обновления индексации AJAXа в целом вся та же работа, которую нужно проделать для настройки корректной индексации в гугле, будет работать и для яндекса.