Правила для JavaScript и SEO

Контент должен быть индексируемым в событии загрузки, чтобы контент JavaScript имел смысл для поисковых систем. Контент, зависящий от пользовательских событий, не индексируется. Для сайтов JS требуется индексируемый URL-адрес с поддержкой на стороне сервера. Те же самые передовые методы SEO, которые используются для HTML-сайтов, применимы к рендерингу JS-сайтов. Между версиями сайта на HTML и JS не должно быть противоречий. 

Основы разработки веб-сайтов на JavaScript

JavaScript сложнее HTML. Чтобы понять, что является наиболее важным для SEO, вы должны сначала попытаться понять, как работает JS:

1. Первоначальный запрос: браузер и бот поисковой системы запускают GET-запрос для HTML-кода веб-сайта и связанных с ним ресурсов.
2. Рендеринг DOM: сайт сценариев JS доставляет DOM (объектную модель документа) браузеру или боту. В документе показано, как контент будет формироваться на веб-сайте и каковы связи между отдельными элементами на сайте. Браузер отображает эту информацию и делает ее видимой и удобной для пользователя.
3. Загрузка IDOM: во время обработки целевого сайта браузер запускает события, принадлежащие DOMContentLoaded. Затем загружается и сохраняется исходный HTML-документ. Теперь браузер или бот готов реализовать элементы JavaScript.
4. Реализация JavaScript: элементы JS теперь могут изменять содержимое или функции веб-сайта без необходимости изменения, удаления или расширения исходного кода HTML.
5. Событие загрузки / после загрузки: как только ресурсы и ресурсы JS, зависящие от них, загружены, браузер начинает загрузку, и сайт завершает работу. После загрузки сайта JS пользователь может изменять или адаптировать дополнительное содержимое или функциональные элементы.

Поисковые системы, такие как Google, используют так называемые автономные браузеры, чтобы имитировать доступ к традиционному браузеру. В отличие от «обычного» браузера, браузер без “head” вызывает код через DOM, чтобы отобразить из него веб-сайт. Таким образом, робот Googlebot может, например, проверить, какие элементы JS вставляет, чтобы изменить HTML-сайт. После рендеринга робот Google может анализировать и индексировать отрисованные элементы, как источник HTML. Существует две версии JavaScript для поисковых роботов: HTML-код до DOM и визуализированный HTML-код после DOM.

Важные события из JavaScript, которые влияют на SEO

События загрузки и пользовательские могут явно повлиять на ваше SEO. Вот почему: событие загрузки «запускается» браузером, когда сайт полностью загружен. Роботы поисковых систем имитируют обычные браузеры при рендеринге JavaScript, поэтому событие загрузки важно для них — оно дает им возможность сделать снимок визуализированного контента. Все, что загружается после срабатывания события загрузки, не будет учитываться сканированием JS и, следовательно, не будут индексироваться, поскольку JS может быстро изменять содержимое сайта. Это особенно актуально для новостных сайтов или каналов социальных сетей, таких как Twitter и Facebook.

Временные рамки DOMContentLoaded можно измерить с помощью инструмента разработки Google. Пользовательские события: после события загрузки дальнейшие события могут запускаться через JS. Среди них, например, так называемые «onClick-Events». Это инициируемые пользователем события, такие как ограничение содержимого сайта или интерактивная навигация. Однако контент, который создается или изменяется в результате пользовательских событий, обычно не индексируется поисковыми системами, потому что это происходит после события загрузки.

Читайте также: Ошибки, которых следует избегать при использовании JavaScript