Как обрабатывать рендеринг JavaScript

1. Как работает JS?
2. Рендеринг на стороне клиента и на стороне сервера
3. Как проверить, правильно ли отображается ваш сайт
4. 1. Сайт: команда
5. 2. Хром 41
6. 3. Chrome DevTools
7. 4. Извлечение и отображение в консоли поиска Google
8. 5. Анализ логов сервера
9. Возможные проблемы при рендеринге вашего сайта
10. 1. Тайм-ауты
11. 2. Ограничения браузера
12. 3. Контент, требующий взаимодействия с пользователем для загрузки
13. Что мы можем сделать, чтобы Googlebot улучшал рендеринг сайтов?
14. Избегайте ссылок OnClick
15. Избегайте # в URL
16. Уникальные URL-адреса на уникальный фрагмент контента
17. Избегайте ошибок JS
18. Не блокируйте JS в robots.txt
19. Предварительно обрабатывать
20. Резюме

Автор: Бартош Горалевич

19 июня 2018 года

С кажущимися бесконечными возможностями JavaScript обычные веб-сайты, основанные только на HTML и CSS, уходят в прошлое. Но в то время как JavaScript обеспечивает динамический опыт для пользователей, он также создает минное поле для разработчиков. Из-за этого JavaScript SEO стал чем-то, что невозможно игнорировать, особенно когда речь идет о том, чтобы убедиться, что веб-сайты Googlebot правильно отображаются.

Как работает JS?

Для тех, кто не знаком с JavaScript, вот краткое введение.

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

Рендеринг на стороне клиента и на стороне сервера

Есть две концепции, которые мы должны упомянуть, говоря о JavaScript. И очень важно понимать различия между ними: рендеринг на стороне сервера и рендеринг на стороне клиента.

Традиционно, как и в случае со статическими HTML-страницами, код отображается на сервере (рендеринг на стороне сервера). При посещении страницы робот Googlebot получает полный и «готовый» контент, поэтому ему не нужно ничего делать, кроме загрузки файлов CSS и отображения информации в вашем браузере.

С другой стороны, JavaScript, как правило, запускается на клиентском компьютере (рендеринг на стороне клиента), что означает, что робот Googlebot сначала получает страницу без содержимого, а затем JavaScript создает DOM (объектную модель документа), которая используется для загрузки визуализированного объекта. содержание. Это происходит каждый раз, когда страница загружается.

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

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

Как проверить, правильно ли отображается ваш сайт

Чтобы робот Google корректно отображал ваш сайт, вы должны сосредоточиться на правильном отображении как ссылок, так и контента на вашем сайте. Если вы не отображаете ссылки, робот Googlebot будет испытывать трудности при поиске на вашем сайте. И если вы неправильно отобразите контент на своем веб-сайте, робот Googlebot не сможет его увидеть.

Вот несколько вариантов, чтобы помочь вам в этой области.

1. Сайт: команда

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

Во-вторых, вы можете проверить, проиндексирован ли сам ваш контент, загруженный JavaScript, Google.

Для этого вам нужно найти определенную строку текста, которая не представлена ​​в вашем исходном HTML-коде и загружается только после выполнения JavaScript. После этого найдите эту строку текста в индексе Google с помощью команды site: yourdomain.com .

http://take.ms/AXVnd

Обратите внимание, что это не будет работать с командой cache : поскольку кэшированные версии ваших страниц содержат только оригинальный, еще не отрендеренный код.

2. Хром 41

В Август 2017 Google обновил свои руководства по поиску и объявил, что они используют Chrome 41 для рендеринга. Это изменило правила игры для SEO, потому что теперь вы можете проверить, как Google на самом деле отображает страницу, а не гадать и надеяться на лучшее.

Теперь вы можете просто скачать Chrome 41 и проверьте, как сайт или веб-страница отображается и просматривается роботом Googlebot.

http://take.ms/pEFAS

3. Chrome DevTools

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

Самый быстрый и простой способ проверить, все ли элементы на основе JavaScript загружены без каких-либо действий пользователя, - это использовать Chrome DevTools:

1. Откройте свой сайт в Chrome
2. Откройте вкладку Элементы в DevTools
3. Посмотрите, как ваша страница была обработана, просмотрев DOM реальной страницы, созданный браузером, - убедитесь, что все важные навигационные элементы и элементы контента уже присутствуют там.

Я рекомендую проверить это в Chrome 41. Это даст вам уверенность в том, что этот элемент технически виден роботом Googlebot.

Вы также можете, конечно, проверить это в текущей версии Chrome и сделать некоторые сравнения.

http://take.ms/GgsqO

4. Извлечение и отображение в консоли поиска Google

Еще один полезный инструмент, который может дать нам представление о том, как Google отображает наш веб-сайт, - это функция Fetch and Render в консоли поиска Google.

Сначала вы должны скопировать и вставить свой URL. Затем нажмите «Выбрать и сделать» и подождите некоторое время. Это позволит вам увидеть, может ли робот Google отображать вашу страницу, и увидеть связанные статьи, копии или ссылки.

http://take.ms/prmvp

Здесь вы также можете использовать Тест Google для мобильных устройств , который покажет вам ошибки JavaScript и код отображаемой страницы.

5. Анализ логов сервера

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

Есть много элементов, которые вы можете проанализировать благодаря журналам сервера. Например, вы можете проверить, посещает ли робот Googlebot ваши старые статьи - если нет, то, вероятно, существует проблема со ссылками, которая может быть вызвана проблемами с JS.

Вы также можете проверить, видит ли робот Googlebot все разделы вашего сайта - если нет, это также может быть вызвано проблемами с рендерингом.

Журналы сервера не покажут вам, как робот Google видит страницы. Вы можете только проверить, были ли страницы посещены и какие коды ответов были отправлены. Дополнительный анализ будет необходим, чтобы определить, были ли какие-либо проблемы вызваны JavaScript.

Кроме того, просматривая журналы сервера, вы можете проверить, запросил ли робот Googlebot ваши важные файлы JavaScript или полностью их проигнорировал.

Возможные проблемы при рендеринге вашего сайта

Даже если ваша страница правильно отображается в Fetch and Render в консоли поиска, это не означает, что вы можете расслабиться и отдохнуть. Есть и другие проблемы, за которыми нужно следить.

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

1. Тайм-ауты

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

Fetch and Render покажет вам, может ли страница быть отображена Google, но она не будет включать тайм-ауты. Важно помнить, что Fetch and Render намного проще, чем стандартный робот Google, поэтому вам нужно будет сделать дополнительный шаг, чтобы убедиться, что обслуживаемые вами скрипты могут загружаться менее чем за 5 секунд.

2. Ограничения браузера

Как я упоминал ранее, Google использует несколько устаревшую версию своего браузера для отображения веб-сайтов: трехлетний Chrome 41. А поскольку технология JavaScript развивалась и продолжает развиваться очень быстро, некоторые из ее новейших функций, которые работают в последние версии Chrome могут не поддерживаться в Chrome 41.

Поэтому лучшим решением будет загрузить браузер Chrome 41 (точную версию, которую Google использует для веб-рендеринга) и ознакомиться с ним. Проверьте журнал консоли, чтобы увидеть, где происходят какие-либо ошибки, и попросите ваших разработчиков их исправить.

3. Контент, требующий взаимодействия с пользователем для загрузки

Я знаю, что уже говорил это, но это действительно нужно повторить: робот Google не действует как пользователь. Googlebot не нажимает на кнопки, не раскрывает «читать дальше», не вводит вкладки, не заполняет никакие формы ... он только читает и следует.

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

Это особенно важно в отношении контента и меню «читать дальше», например, в меню гамбургеров.

Что мы можем сделать, чтобы Googlebot улучшал рендеринг сайтов?

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

Избегайте ссылок OnClick

Поисковые системы не рассматривают onclick = "window.location =" как обычные ссылки, что означает, что в большинстве случаев они не будут следовать этому типу навигации. И поисковые системы определенно не будут воспринимать их как сигналы внутренних ссылок.

Крайне важно, чтобы ссылки были в DOM до того, как был сделан клик. Вы можете проверить это, открыв Инструменты разработчика в Chrome 41 и проверив, загружены ли важные ссылки - без каких-либо дополнительных действий пользователя.

http://take.ms/wUC3a

Избегайте # в URL

Идентификатор фрагмента # не поддерживается и игнорируется роботом Google. Таким образом, вместо использования структуры URL example.com/#url , попробуйте придерживаться чистого форматирования URL - example.com/url .

Уникальные URL-адреса на уникальный фрагмент контента

Каждый фрагмент вашего контента должен быть расположен «где-то», чтобы поисковая система его проиндексировала. Вот почему важно помнить, что если вы динамически изменяете свой контент без изменения URL-адреса, вы запрещаете поисковым системам доступ к нему.

Избегайте ошибок JS

HTML очень простителен, но JavaScript определенно нет.

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

Чтобы проверить код и сохранить свой JavaScript без ошибок, вы можете еще раз использовать Chrome DevTools и просмотреть вкладку «Консоль», чтобы увидеть, какие ошибки произошли и в какой строке кода JavaScript.

Не блокируйте JS в robots.txt

Блокировка файлов JS - очень старая практика, но она все еще случается довольно часто. Это даже иногда происходит по умолчанию в некоторых CMS. И хотя цель состоит в том, чтобы оптимизировать бюджет сканирования, блокировка файлов JS (и таблиц стилей CSS) считается очень плохой практикой. Но не принимайте это от меня, вот что Google должен сказать о теме :

Так что не делайте ничего подобного:

http://take.ms/OoAEp

Предварительно обрабатывать

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

Prerendering предоставляет готовый снимок HTML вашего сайта. Это означает, что Googlebot не получает JavaScript, а только чистый HTML. В то же время пользователь, который посещает сайт, получает ту же версию вашей страницы, обогащенную JavaScript.

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

Использовать это решение легко - вам просто нужно добавить промежуточное программное обеспечение или фрагмент на ваш веб-сервер.

Резюме

Тема JavaScript SEO является самой динамичной темой в мире SEO и, безусловно, заслуживает вашего внимания, тем более что она развивается очень быстро. Проблемы, описанные в этой статье, - лишь малая часть того, что вы можете исследовать, чтобы убедиться, что робот Googlebot корректно отображает ваш сайт. Если вы заинтересованы в получении более широкой картины, посмотрите Elephate's Ultimate Руководство по JavaScript SEO ,

Бартош Горалевич является соучредителем Elephate , которая недавно была удостоена звания «Лучшее малое SEO агентство» на 2018 European Search Awards. Elephate верит в то, что прокладывает новые пути в SEO-индустрии с помощью смелых, точных SEO-кампаний для клиентов, SEO-экспериментов и тематических исследований. Bartosz возглавляет узкоспециализированную команду технических экспертов SEO, которые занимаются глубокой технической оптимизацией крупных международных структур. Технический SEO - это не только работа Бартоша, но и одна из его самых больших страстей, поэтому он любит путешествовать по всему миру, чтобы поделиться этим энтузиазмом с единомышленниками, занимающимися SEO.

Похожие

Комментарии