Объяснение JavaScript и DOM для SEO от некодера от Wordtracker

1. Что такое JavaScript?
2. Да, но как это на самом деле работает?
3. ДОМ
4. JavaScript и SEO
5. Эта страница JavaScript?
6. Распространенные проблемы с Javascript для SEO
7. доступность
8. Ошибки кодирования
9. Критический путь рендеринга
10. 5 секунд осталось ...
11. Хватит блокировать JavaScript
12. В итоге

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

Есть ли SEO и не думаю, что вам нужно знать о JavaScript? Ну, Джон Мюллер (старший аналитик веб-мастеров Google) не согласен. Каждый, кто занимается SEO, должен знать о JS.

«В ближайшие годы вы столкнетесь со значительно большим количеством JavaScript, чем за последние два десятилетия в SEO. Если вы увлечены техническим SEO, то после HTML вам нужно будет все больше понимать JS ».

JohnMu, Google: https://old.reddit.com/r/SEO/comments/98g82r/how_much_javascript_do_i_need_to_know_for_seo/

В прошлом JavaScript был более популярен, особенно во времена Java-апплетов, конкурирующих с Flash за добавление небольших динамических элементов на веб-страницы. Это не было индексируемо поисковыми системами, и это не было такой большой проблемой. Различные веб-технологии имеют тенденцию выходить из строя (так же, как Flash, который почти исчез), и JavaScript тоже, похоже, находится на выходе. Однако по мере того, как популярность HTML5 и CSS3 росла, так же как и JavaScript, в новых фреймворках, таких как Angular и React.

Эти платформы являются управляемыми JS способами создания веб-страниц, которые допускают большее количество динамического контента. Хотя Google настаивает на том, что они вполне способны индексировать JS, реальность немного другая. Это во многом сводится к негибкости рендеринга JS по сравнению с HTML и CSS. Другими словами, вероятность того, что Google не сможет прочитать страницу в JS, выше, чем страница в HTML / CSS.

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

Что такое JavaScript?

JavaScript - это язык сценариев, который позволяет создавать интерактивный или динамический веб-контент. Или, другими словами, контент, который динамически обновляется. Так как вы взаимодействуете с контентом, он может меняться. Это открывает целый мир функциональности за пределами того, что может быть достигнуто с помощью CSS и HTML.

Например, большая часть Wordtracker построена с Angular (хотя в прошлом мы использовали другие библиотеки, такие как React и Coffee.JS для различных элементов). Это позволяет нам использовать инструмент подсказки ключевых слов в том же приложении, что и домашняя страница. Это дает нам гораздо большую гибкость в том, как взаимодействуют эти различные части Wordtracker.

Да, но как это на самом деле работает?

Вот где приходит DOM. Объектная модель документа - это представление того, что вы видите на странице в том виде, в каком оно отображается в вашем браузере. Это может сильно отличаться от кода страницы, такого как HTML / CSS за страницей, так как скрипты и другой динамически обновляемый контент влияют на него. DOM находится посередине между кодом страницы и тем, что отображается.

ДОМ

В вашем браузере вы можете использовать функцию «Проверка элемента» (есть в Chrome, Firefox, Edge), чтобы посмотреть, как выглядит DOM, и изменить ее самостоятельно. Внесенные здесь изменения отражаются в отображаемой версии страницы, которую вы видите.

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

Короче говоря, JavaScript - это способ манипулирования DOM, чтобы вы могли изменить то, что показано пользователю в браузере.

JavaScript и SEO

Не всегда было так, чтобы JavaScript хорошо играл с поисковыми системами. На самом деле многие SEO все еще придерживаются этого мнения. Но Google, выпустивший собственную JavaScript-инфраструктуру, Angular, а также Bing и другие поисковые системы, добился больших успехов в индексации контента в JavaScript.

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

Эта страница JavaScript?

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

Сравнение этого с реальной страницей и использование функции проверки элемента для просмотра DOM показывает, что здесь есть много дополнительной информации, которая должна откуда-то приходить. Мы также видим, что запускается скрипт .js:

<script src = " /public-assets/application-b57a1b2cae4eae27a49c.js «> </ Скрипт>

Там, где код страницы отличается от отображаемой страницы, должно быть что-то, что меняет DOM, и вполне вероятно, что это будет JavaScript.

Распространенные проблемы с Javascript для SEO

Основная проблема здесь заключается в сканировании и рендеринге контента JavaScript. Таким образом, возможность видеть содержание, а затем правильно его интерпретировать. Или, как говорит Google;

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

https://webmasters.googleblog.com/2014/05/understanding-web-pages-better.html

Но на самом деле они имеют в виду, что мы не идеальны. Сказать «иногда JavaScript слишком сложен» - это просто еще один способ сказать «иногда наше понимание JavaScript недостаточно хорошо». Хотя это заявление от 2014 года, оно по-прежнему верно, что иногда они просто не смогут сделать его совершенно правильно. Таким образом, первая проблема может заключаться в том, что Google просто не может индексировать контент, потому что JavaScript в нем слишком сложен.

доступность

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

«Googlebot использует службу веб-рендеринга (WRS), основанную на Chrome 41 (M41). Как правило, WRS поддерживает те же функции и возможности веб-платформы, что и версия Chrome, которую он использует ».

https://developers.google.com/search/docs/guides/rendering

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

Вы можете использовать инструмент «Получить как Google» в своей поисковой консоли, чтобы увидеть, как страница выглядит для Google, и убедиться, что контент отображается так, как должен:

https://support.google.com/webmasters/answer/6066468?hl=en

Ошибки кодирования

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

Не так с Javascript. Если у вас возникла ошибка, сценарий потерпит неудачу, и ни один контент не будет доступен. Это намного менее простительно, так что Google пропустит контент, и ваш рейтинг пострадает.

Посмотрите на этот замечательный пример с Hulu.com и на то, как его реализация JavaScript привела к значительным потерям в рейтинге:

https://www.elephate.com/blog/javascript-seo-backfire-hulu-com-case-study/

Критический путь рендеринга

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

Если ваш JavaScript-код должен быть загружен до критического содержимого, сложенного над фолдом, так что верхняя тяжелая страница с большим количеством больших скриптов, которые необходимо загрузить на ранней стадии, блокирует остальную часть контента. Это известно как «блокировка рендеринга JavaScript».

Используйте инструменты, такие как Google Page Speed ​​Insights проанализировать страницу и выделить ошибки, такие как эта:

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

5 секунд осталось ...

Google дает активам 5 секунд для загрузки и все. В этот момент он перестанет ждать и перейдет к следующему. Это означает, что если ваш JavaScript медленнее 5 секунд, Google откажется от него.

Вы также должны учитывать свой «бюджет сканирования», общее количество времени и ресурсов, которые Google выделит для сканирования вашего сайта. Все сайты не равны. Чем популярнее ваш сайт, тем более щедрым будет Google с его бюджетом на сканирование. Если ваш сервер медленнее реагирует, он будет сканировать меньше страниц.

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

Хватит блокировать JavaScript

Мы все знаем классическую ошибку, когда сайт не индексируется, поскольку кто-то установил robots.txt в:

Пользователь-агент: *
Disallow: /

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

Если вы блокируете Google доступ к вашим файлам JavaScript, они предупредят вас в вашей консоли поиска.

В итоге

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

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

Руководство Elephate Ultimate по JavaScript:
https://www.elephate.com/blog/ultimate-guide-javascript-seo/

Понимание объектов в JavaScript:
https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript

Что такое DOM:
https://www.w3.org/TR/WD-DOM/introduction.html

Похожие

Комментарии