Close

JavaScript SEO: Все, что нужно знать

Большинство сайтов используют JavaScript, чтобы добавить интерактивность и улучшить юзабилити. Некоторые используют его для меню, загрузки товаров или цен, загрузки контента из нескольких источников или, в некоторых случаях, для всего на сайте. Реальность современного веба в том, что JavaScript вездесущ.

Вот что говорит Джон Мюллер из Google:

SEO-специалистам необходимо знать, как Google обрабатывает JavaScript и как решать проблемы.

Что такое JavaScript SEO

JavaScript SEO – это часть технического SEO (Search Engine Optimization), цель которого – сделать сайты с JavaScript, удобными для сканирования и индексирования, а также удобными для поиска.

Как Google обрабатывает страницы, содержащие JavaScript

После появления JavaScript, поисковые системы вынуждены отображать страницы так, как это делает браузер, чтобы можно было видеть контент так, как его видит пользователь. Система, которая управляет процессом рендеринга в Google, называется службой веб-рендеринга (WRS). Google предоставил упрощенную схему, чтобы показать, как работает этот процесс.

1. Краулинг (Crawling)

Поисковый робот отправляет на сервер GET-запросы, в ответ получает заголовки и содержимое страницы. Скорее всего, запрос будет поступать от мобильного user-agent, так как сейчас большинство пользователей заходят в интернет с мобильных устройств. Проверить как Google сканирует сайт можно в Google Search Console.

Некоторые сайты могут также использовать обнаружение user-agent для отображения содержимого определенному пользователю. На сайтах c JavaScript, Google может видеть немного другую информацию, чем обычный пользователь.

Хотя Google и отображает ход процесса сканирования как «HTML», в действительности он также сканирует и хранит все ресурсы, необходимые для создания страницы – файлы Javascript, CSS, XHR- запросы и многое другое.

2. Обработка

Рассмотрим некоторые нюансы, имеющие отношение к JavaScript.

Ресурсы и ссылки

Google не перемещается по страницам как пользователь. Частью обработки является проверка страницы на наличие ссылок на другие URL и файлы, необходимые для создания страниц. Ссылки извлекаются и добавляются в очередь с различным приоритетом сканирования.
Стоит также отметить, что внутренние ссылки, добавленные с помощью JavaScript, не будут обнаружены до окончания рендеринга.

Хороший пример:

Код
<a href=”/page”>хороший пример</a>
<a href=”/page” onclick=”goTo(‘page’)”>тоже хорошо</a>

Плохой пример:

Код
<a onclick=”goTo(‘page’)”>отсутствует href</a>
<a href=”javascript:goTo(‘page’)”> отсутствует ссылка</a>
<a href=”javascript:void(0)”>отсутствует ссылка </a>
<span onclick=”goTo(‘page’)”>неподходящий HTML элемент</span>
<option value="page"> неподходящий HTML элемент </option>
<a href=”#”>нет ссылки</a>

Кэширование

Все загружаемые файлы, включая HTML-страницы, файлы JavaScript, CSS-файлы и т. д., активно кешируются Google. Он игнорирует настройки тайминга и загружает новую копию, когда захочет.

Дублированный контент

Дублированный контент может быть удален из загруженного HTML-кода перед его отправкой на рендеринг. Фактически, каждая страница сайта может отображать один и тот же код. Иногда это может привести к тому, что страницы будут рассматриваться как дубликаты и не сразу отправляться на визуализацию. Хуже того, в результатах поиска может отображаться не та страница или даже не тот сайт.

3. Рендеринг

На данном этапе страницы переходят к средству визуализации. Одна из самых больших проблем для многих SEO-специалистов при двухэтапной индексации (сначала HTML – потом рендеринг JS) заключается в том, что страницы могут не отображаться в течение нескольких дней или даже недель. Но обычно, после сканирования страниц Google-ботом, они отправляются в средство визуализации в среднем за 5 секунд.

4. Рендерер (визуализация)

Рендерер – это то место, где Google отображает страницу, чтобы увидеть то, что видит пользователь. Здесь обрабатывается JavaScript и любые изменения, внесенные JavaScript в DOM.

Кэширование

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

Что видит Googlebot

Googlebot не предпринимает никаких действий на страницах сайта. Он не нажимает на различные элементы и не скролит, но это не значит, что у него нет других обходных путей для сканирования страницы. Если контент загружен в DOM, то поисковый робот увидит его без необходимых действий.

5. Сканирование

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

Тестирование / устранение неполадок

Просмотр кода страницы

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

View-source показывает ту же информацию, что и запрос GET. Это необработанный HTML-код страницы.

Inspect показывает обработанный DOM после внесения изменений и контент, который видит робот Google.

Google кеш

Google кеш не является надежным способом проверки того, что видит робот Google. Обычно это просто исходный HTML.

Инструменты тестирования Google

Инструменты тестирования Google, такие, как инспектор URL-адресов в Google Search Console, тестер для мобильных устройств, тестер расширенных сниппетов, полезны для исправления возможных ошибок на сайте.

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

Поиск текста в Google

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

Варианты рендеринга

Существует множество вариантов рендеринга JavaScript. Любой вид SSR, статический рендеринг, настройка предварительного рендеринга подойдет для поисковых систем. Основной причиной проблем является полный рендеринг на стороне клиента, когда весь рендеринг происходит в браузере.

Повышение лояльности поисковых систем к вашему сайту с JavaScript

SEO-оптимизация сайта

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

Разрешение сканирования

Google должен иметь возможность доступа и загрузки ресурсов, чтобы правильно отображать страницы. Самый простой способ – это разрешить в robots.txt сканирование необходимых ресурсов:

Код
User-Agent: Googlebot
Allow: .js
Allow: .css

URL-адрес

Обновление контента, реализованного с помощью Vue и некоторых более ранних версий Angular, может привести к изменению URL-адреса. Таким образом, для такого URL как abc.com/#something, все, что находится после «#» Googlebot распознать не сможет. Для решения проблемы с хешами используется History API:

Код
Vue router:
Use ‘History’ Mode instead of the traditional ‘Hash’ Mode.
const router = new VueRouter ({
mode: ‘history’,
router: [] //the array of router links
)}

Дублированный контент

В JavaScript может быть несколько URL для одного и того же контента, что приводит к его дублированию. Это может быть вызвано использованием заглавных букв, идентификаторов, параметров с идентификаторами и т. д.

Код
domain.com/Abc
domain.com/abc
domain.com/123
domain.com/?id=123

Решение простое. Выберите один вариант, который необходимо проиндексировать, и установите канонические теги.

Страницы с ошибками

Поскольку JavaScript-фреймворки не являются серверными, они не могут выдать ошибку сервера, например 404. Для таких страниц можно сделать следующее:

1. Использовать JavaScript-редирект со страницы, которая имеет код состояния 404.
2. Запретить индексацию страницы с ошибкой при помощи тега noindex, а также размещение на данной странице сообщения об ошибке, к примеру, «Ошибка 404 Страница не найдена».

Вывод

Просто знайте, что Javascript не идеален, и это не всегда подходящий инструмент для работы. Он не может быть проанализирован постепенно, в отличие от HTML и CSS, и это может сильно повлиять на скорость загрузки страницы и ее производительность.

Источник

Добавить комментарий