В первой части: как Google и другие поисковые системы работают с JavaScript; как проверить, есть ли на вашем сайте какие‑то проблемы с JS; каковы лучшие практики JavaScript SEO и наиболее распространенные проблемы, которые SEO‑специалисты упускают из виду.

Во второй части: как Google индексирует JS‑контент; каковы проблемы с его индексацией; как проверить, проиндексирован ли ваш JS‑контент; что такое «индексация контента в две волны».

ГЛАВА 4. Лучшие рекомендации по SEO для JavaScript‑сайтов

На этом этапе вы уже имеете представление о том, как Google и другие поисковые системы работают с JavaScript. Давайте разберём некоторые из лучших практик для SEO‑специалистов при оптимизации таких сайтов:

Показывать Google весь контент.
Правильно реализовывать пагинацию.
Использовать корректные <a href> ссылки.
Оптимизировать изображения.
Использовать рендеринг на стороне сервера.
Оптимизировать отрендеренный HTML, чтобы помочь Google увидеть контент.

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

Покажите Google весь контент

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

Поэтому:

избегайте блокировки важных JavaScript файлов в файле robots.txt, чтобы Google мог обрабатывать ваш контент и взаимодействовать с ним;
не используйте хэши в URL — есть опасность того, что они не будут просканированы Googlebot;
убедитесь, что Google может видеть ключевую информацию в исходном коде страницы, и ему не придётся зависеть от действий пользователя для загрузки контента (например, нажатия кнопки);
остерегайтесь редиректов JavaScript — хотя в определенных ситуациях это и оправданное решение, они могут вернуть видимость контента в Интернете, и вместо этого стоит отдать предпочтение редиректам 301 на стороне сервера.

Как работают редиректы и какие бывают

Правильно реализуйте пагинацию

Многие сайты используют пагинацию или бесконечную прокрутку, чтобы фрагментировать большие объёмы контента.

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

Многие сайты используют пагинацию, которая зависит от действия пользователя — клика. Вместо этого стоит реализовывать пагинацию правильно, используя корректную <a href> ссылку.

Что такое и как работает пагинация

Используйте корректные < a href > ссылки

Googlebot не только не прокручивает страницу, но ещё и не нажимает на кнопки. Так что единственный способ позволить Google увидеть вторую страницу пагинации или обнаружить все ссылки на другие страницы — это использование правильных <a href> ссылок.

Иными словами, добавляйте ссылки в соответствии с веб‑стандартами, чтобы не зависеть от действий пользователя.

❗️ Важное замечание: ссылки, скрытые под rel=”next”, также не помогают. В марте 2019 года Google объявил, что данная разметка больше не используется.

Оптимизируйте изображения

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

Добавляйте изображения согласно веб‑стандартам:

связывайте ваши изображения с помощью HTML‑тега 'src';
рассмотрите возможность использования встроенной отложенной загрузки изображений на уровне браузера.

Используйте рендеринг на стороне сервера

Рендеринг на стороне сервера позволяет Googlebot и пользователям получить полностью визуализированную HTML‑страницу сайта с сервера.

Основное SEO‑преимущество наличия контента на сервере заключается в том, что ботам легче и быстрее его обрабатывать. Следовательно, рендеринг на стороне сервера может улучшить процесс сканирования и индексации страниц.

Более того, рендеринг на стороне сервера также является рекомендуемым решением для представления контента JavaScript в Google.

Оптимизируйте отрендеренный HTML, чтобы помочь Google увидеть контент

Взгляните на исходный код страницы и DOM (объектную модель документа) и уделите особое внимание:

ключевому контенту;
каноническим тегам;
структурированным данным;
важным тегам, например, meta robots или hreflang;
внутренним ссылкам.

Бывает, что JavaScript не сильно меняет визуал, и вы даже не замечаете его элементы. Как бы то ни было, он может незаметно изменить ваши метаданные, что потенциально приводит к серьёзным проблемам.

Микроразметка Schema: исчерпывающее руководство для SEO

ГЛАВА 5. JavaScript FAQ — другие вопросы по SEO JavaScript‑сайтов

Автор статьи собрал наиболее частые вопросы по SEO JavaScript‑сайтов, которые пользователи задавали ему на протяжении многих лет.

Может ли Googlebot нажимать кнопки на сайте или прокручивать страницу?

Googlebot не нажимает ни на кнопки, не прокручивает страницу.

Это подтверждается официальной документацией официальной документацией Google:

«В ленте новостей вашего сайта может использоваться бесконечная прокрутка — к большому удовольствию пользователей!

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

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

Можно ли снизить влияние JavaScript на веб‑производительность?

Да, JS‑код можно минимизировать и сжать. Ещё можно использовать такие техники, как встряхивание дерева или разделение кода на фрагменты, чтобы обслуживать необходимый код только в тот момент, когда есть потребность.

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

Google становится технологически более продвинутым. Исчезнет ли SEO JavaScript?

Нет, в ближайшее время SEO JavaScript никуда не исчезнет. Во всяком случае, оптимизация станет ещё более технической по мере появления новых фреймворков и технологий и роста веб‑стека.

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

«[…] Я не думаю, что SEO JavaScript‑сайтов исчезнет. Существует столько вещей, с которыми вы можете ошибиться, и требуется большой опыт, чтобы уметь отлаживать, выявлять и улучшать ситуацию […]

Вам действительно необходимо знать принцип работы JavaScript, и когда что‑то пойдёт не так, вам не составит труда обнаружить проблему. Новые фреймворки, как и новые элементы в Chrome — все они связаны между собой».

В настоящий момент JavaScript используется в более чем 98,3% всех сайтов. Если вы хотите превзойти своих конкурентов, вам необходим SEO JavaScript‑сайтов сегодня и в будущем.

Отличается ли SEO PWA от SEO JavaScript?

В целом, прогрессивное веб‑приложение (PWA) — это тип веб‑сайта на JavaScript, поэтому все рекомендации, применимые к веб‑сайтам на JavaScript, должны применяться и к PWA.

Однако стоит учитывать один важный момент: в службе веб‑рендеринга Google отключены сервисные работники.

Это имеет серьёзные последствия:

Если сайт не работает, когда в браузере отключены веб‑работники, он не будет работать в системах рендеринга и ранжирования Google.
Если за важную часть сайта ответственны веб‑работники, она не будет видна Google.

Чем важна индексация с приоритетом мобильных устройств для моего JavaScript‑сайта?

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

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

Что следует учитывать:

Может ли Google отобразить сайт идеально? Используйте инструмент проверки URL с агентом пользователя — смартфон Googlebot.
Видит ли Google меню?
Видит ли Google содержимое, скрытое под вкладками и кнопками?
Может ли Google видеть ссылки на вторую страницу пагинации?

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

Могу ли я увидеть Googlebot по строке user‑agent и предоставить ему предварительно отрендеренную версию моего сайта?

Да, если вы видите, что Google не справляется с вашим веб‑сайтом, вы можете предоставить Googlebot предварительно отрендеренную версию.

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

В итоге

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

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

Но поскольку страницы, перегруженные JavaScript, могут негативно повлиять на индексацию, разобраться в сути проблем, связанных с SEO, может оказаться ещё сложнее.

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

Ещё по теме 👇

Как посмотреть сайт «глазами» поискового робота с помощью Google Chrome

Как сделать качественный SEO‑аудит сайта самостоятельно: полное руководство

WebP‑формат: что это такое и как его использовать

Теги:

#javascript