Автор: Томек Рудзки (Tomek Rudzki), руководитель отдела исследований и разработок, Onely
В настоящее время компании довольно часто создают свои сайты, используя современные JavaScript-фреймворки и библиотеки, такие как React, Angular или Vue. Уже очевидно, что сеть отошла от простого HTML и вступила в эру JS.
Хотя нет ничего необычного в том, что бизнес хочет воспользоваться преимуществами новейших технологий, нам необходимо принять во внимание суровую реальность этого тренда: большинство переходов на JS-фреймворки не планируются с учётом пользователей или органического трафика.
Это можно назвать «Javascript-парадоксом»: крупные бренды «вскакивают в поезд JS» на волне шумихи о том, что эти фреймворки позволяют создавать потрясающий UX.
Реальность же показывает, что JavaScript-фреймворки действительно сложны, а переход на них не всегда проходит гладко. В итоге компании теряют органический трафик и затыкают дыры вместо создания интересного UX для своих пользователей.
Поскольку пути назад нет, SEO-специалистам нужно научиться справляться со своими JS-сайтами. Однако это легче сказать, чем сделать, поскольку добиться успеха для JS-сайта в поисковых системах – это реальный вызов как для разработчиков, так и для оптимизаторов.
В статье мы рассмотрим шесть шагов, которые помогут вам диагностировать и решать проблемы, связанные с JavaScript SEO.
Шаг 1. Используйте инструмент проверки URL, чтобы увидеть, как Google обрабатывает ваш контент
Инструмент проверки URL в Google Search Console позволяет проверить, правильно ли Google обрабатывает страницы.
Для этого нужно открыть Search Console и ввести URL страницы, которую вы хотите проверить.
После этого нужно кликнуть на «Test live URL», а по завершению проверки – на «View tested page».
Наконец, нужно будет нажать на вкладку «Screenshot», чтобы просмотреть обработанную страницу.
Прокрутите скриншот вниз, чтобы убедиться, что всё в порядке. Ответьте себе на следующие вопросы:
- Видим ли основной контент?
- Может ли Google видеть добавленные пользователями комментарии?
- Может ли Google получать доступ к таким областям, как похожие товары и статьи?
- Видите ли вы другие важные элементы страницы?
Почему скриншот выглядит иначе, чем то, что мы видим в браузере? Возможные причины:
- При рендеринге Google столкнулся с таймаутами.
- В процессе рендеринга произошли какие-то ошибки. Возможно, вы используете те функции, которые не поддерживаются Google Web Rendering Service (Google использует для рендеринга Chrome 41, который не поддерживает многие современные функции).
- Критически важные JS-файлы заблокированы от Googlebot.
Шаг 2. Убедитесь, что вы не заблокировали JS-файлы по ошибке
Если Google не может правильно обработать страницу, вы должны убедиться, что важные JavaScript-файлы не заблокированы для Googlebot в файле robots.txt.
К счастью, инструмент проверки URL показывает все ресурсы обработанной страницы, заблокированные в robots.txt.
Но как узнать, что заблокированный ресурс важен с точки зрения рендеринга? У вас есть два варианта: базовый и продвинутый.
Базовый вариант
В большинстве случаев хорошей идеей может быть спросить об этом разработчиков. Они создали сайт, и они должны знать ответ на этот вопрос.
Очевидно, что если имя скрипта – content.js или productListing.js, то он явно релевантный и не должен блокироваться.
К сожалению, на сегодня инструмент проверки URL не предоставляет информацию о важности заблокированных JS-файлов. При этом в предыдущей версии этого инструмента – Сканере Google для сайтов – такая опция была.
Продвинутый вариант
Теперь для этого у нас есть "Инструменты разработчика" в браузере Google Chrome.
В целях обучения мы проверим следующий URL: http://botbenchmarking.com/youshallnotpass.html
Откройте страницу в самой последней версии Chrome и перейдите в "Инструменты разработчика". Затем откройте вкладку «Network» и обновите страницу.
Наконец, выберите нужный ресурсы (в нашем случае это YouShallNotPass.js), кликните по нему правой кнопкой мыши и выберите пункт «Block request URL».
Обновите страницу и посмотрите, не исчез ли какой-то важный контент. Если это произошло, то вам нужно удалить соответствующее правило из файла robots.txt.
Шаг 3. Используйте инструмент проверки URL для устранения ошибок JavaScript
Если вы видите, что Googlebot не обрабатывает вашу страницу должным образом, то это может быть связано с ошибками JavaScript, которые произошли во время рендеринга.
Чтобы диагностировать их, в инструменте проверки URL нужно открыть вкладку «More info». Затем покажите эти ошибки своим разработчикам, чтобы они могли их устранить.
При этом важно помнить, что всего лишь ОДНА ошибка в JS-коде может остановить рендеринг для Google, что сделает сайт неиндексируемым.
Ваш сайт может хорошо работать в большинстве новых браузеров, но если он сбоит в более старых браузерах (а движок рендеринга Google, как мы помним, основан на Chrome 41), то ваши позиции в поисковой выдаче могут снизиться.
Нужны примеры?
- Единственная ошибка в официальной документации по Angular привела к тому, что Google не мог рендерить наш тестовый Angular-сайт.
- Когда-то Google деиндексировал отдельные страницы Angular.io, официального сайта Angular 2+.
Примечание. Если по какой-то причине вы не хотите использовать инструмент проверки URL для отладки ошибок JavaScript, вместо него вы можете использовать Chrome 41.
Лично я предпочитаю Chrome 41 для этих целей, поскольку он более универсальный и даёт большую гибкость. При этом инструмент проверки URL более точный в симулировании Google Web Rendering Service, поэтому я рекомендую его новичкам в JavaScript SEO.
Шаг 4. Проверьте, был ли ваш контент проиндексирован Google
Видеть, может ли Google должным образом обрабатывать сайт, недостаточно. Необходимо удостовериться, что он корректно индексирует контент. Для этого лучше всего использовать команду site:.
Это простой, но мощный инструмент. Синтаксис будет выглядеть так: site:[URL или сайт] «[фрагмент, который нужно найти]». Главное, убедиться, что вы не поставили пробел между site: и URL.
Допустим, вы хотите проверить, индексирует ли Google следующий текст: «Develop across all platforms», который находится на главной странице Angular.io.
Введите следующую команду в Google: site:angular.io "DEVELOP ACROSS ALL PLATFORMS"
Как видно на скриншоте ниже, Google проиндексировал этот контент:
Выводы:
- Используйте команду site: всякий раз, когда это возможно.
- Проверьте разные шаблоны страниц, чтобы удостовериться, что весь сайт работает хорошо. Не останавливайтесь на одной странице!
Если всё хорошо, переходите к следующему шагу. Если это не ваш случай, то причин может быть несколько:
- Google всё ещё не обрабатывает ваш контент. Рендеринг должен осуществляться через несколько дней/недель после того, как Google посетил URL. Если характеристики вашего сайта требуют, чтобы контент индексировался максимально быстро, внедрите SSR.
- Google столкнулся с таймаутами при рендеринге страницы. Насколько ваши скрипты быстрые? Остаются ли они рабочими, когда нагрузка на сервер высокая?
- Google по-прежнему запрашивает старые JS-файлы. Google старается активно кешировать данные, чтобы сэкономить вычислительные мощности. Поэтому CSS- и JS-файлы могут агрессивно кешироваться. Если вы устранили все ошибки в JS, но Google всё ещё не может должным образом обрабатывать сайт, то причина может быть в том, что он использует старые, кешированные JS- и CSS-файлы. Чтобы обойти это, вы можете вставить номер версии в имя файла. Например, назвать его bundle3424323.js. Подробнее об этом можно прочитать в разделе «HTTP-кеширование» на сайте Google Developers.
- Во время индексирования Google может не сканировать некоторые ресурсы, если решит, что они не вносят вклад в основной контент страницы.
Шаг 5. Убедитесь, что Google может находить внутренние ссылки
Есть несколько простых правил, которым важно следовать:
- Google нужны правильные <a href> ссылки для обнаружения ссылок на вашем сайте.
- Если ваши ссылки добавляются в DOM только, когда кто-то нажимает на кнопку, то Google их не увидит.
Несмотря на всю простоту, многие крупные компании по-прежнему допускают эти ошибки.
Правильная ссылочная структура
Чтобы просканировать сайт, Googlebot нужны традиционные <a href> ссылки. Если они не предоставляются, многие страницы останутся недоступными для Google!
Этот нюанс хорошо объяснил сотрудник Google Том Гринвей (Tom Greenway) на конференции I/O.
Важно отметить, что если у вас имеются <a href> ссылки, которые содержат дополнительные параметры, такие как onClick, data-url, ng-href, то это вполне допустимо для Google.
Распространённая ошибка со стороны разработчиков: Googlebot не может получить доступ ко второй и последующим страницам пагинации.
Просматривая мобильные версии Aliexpress и IKEA, вы быстро заметите, что они не позволяют Googlebot видеть ссылки на страницы, что странно. Когда Google включит mobile-first индексацию для этих сайтов, то они пострадают.
Как это проверить самостоятельно?
Если вы ещё не загрузили Chrome 41, сделайте это по ссылке: Ele.ph/chrome41.
Затем перейдите на любую страницу. Мы для примера будет использовать мобильную версию AliExpress.com. Предлагаем вам сделать то же самое.
Откройте мобильную версию категории «Mobile Phones» на сайте:
Затем кликните правой кнопкой мыши на «View more» и выберите кнопку проверки, чтобы посмотреть, как реализована мобильная версия.
Как вы можете видеть, здесь нет никаких <a href> и <link rel> ссылок, указывающих на вторую страницу пагинации.
В категории «Мобильные телефоны» на Aliexpress содержится более 2000 товаров. При этом Googlebot может получить доступ только к 20 из них, а это всего лишь 1%!
Это значит, что 99% товаров из этой категории невидимы для мобильного робота Googlebot. Невероятно!
Эти недочёты возникают в результате неправильного внедрения lazy loading. И есть множество других сайтов, допускающих те же ошибки.
При этом стоит отметить, что использование только ссылочного атрибута rel=”next” – это слишком слабый сигнал для Google, который должен усиливаться традиционными <a href> ссылками.
Проверка, может ли Google видеть ссылки в меню
Ещё один важный шаг в аудите JS-сайта – это проверка того, может ли Google видеть ссылки в меню. Используйте для этого Chrome 41.
В качестве примера мы используем Target.com:
Для начала откройте любой браузер и выберите несколько ссылок из меню:
- https://www.target.com/c/clothing/-/N-5xtd3 -> Одежда
- https://www.target.com/c/shoes/-/N-55b0t -> Обувь
- https://www.target.com/c/furniture/-/N-5xtnr -> Мебель
Затем откройте Chrome 41. В "Инструментах разработчика" перейдите на панель элементов.
Какой результат? Google может видеть ссылки из меню Target.com.
Теперь проверьте, может ли Google видеть эти ссылки на вашем сайте.
Шаг 6. Проверьте, может ли Google находить контент, скрытый на вкладках
В случае e-commerce сайтов нередка ситуация, когда Google не может находить и индексировать контент, скрытый под вкладками (описания товаров, мнения, похожие товары и т.п.).
Важная часть любого SEO-аудита – убедиться, что Google может видеть этот контент.
Откройте Chrome 41 и перейдите на страницу любого товара на Boohoo.com. Например, Muscle Fit Vest.
Нажмите на «Details & Care», чтобы посмотреть описание товара:
Теперь проверьте, содержится ли оно в DOM. Для этого откройте «Инструменты разработчика" в Chrome и нажмите на вкладку «Network».
Убедитесь, что опция «Disable Cache» отключена.
Нажмите F5, чтобы обновить страницу. После этого перейдите на вкладку «Elements» и поищите описание товара:
Как мы видим, в случае Boohoo.com, у Google есть доступ к этому контенту.
Отлично! Теперь проверьте свой сайт.
Вместо заключения
JavaScript SEO – это, несомненно, довольно сложная тема. Но я надеюсь, что эта статья была для вас полезной.
И ещё один совет напоследок: если вам не удаётся улучшить ранжирование своего JS-сайта в Google, подумайте над внедрением динамического или гибридного рендеринга.
