Правила для 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

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

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

1. индексируемые url-адреса: каждому веб-сайту нужны уникальные url-адреса, чтобы их вообще можно было проиндексировать. однако pushstate, созданный с помощью javascript, url не генерирует url. следовательно, вашему сайту с javascript нужен отдельный веб-документ, который будет выдавать код состояния 200 ok в ответ серверу на запрос клиента или бота. поэтому каждый продукт, представленный с помощью js (или каждая реализованная с js категория веб-сайта), должен иметь url-адрес на стороне сервера, чтобы сайт можно было проиндексировать.

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

3. отсутствие метаданных. при использовании javascript многие веб-мастера или seo-специалисты забывают основы, и не передают метаданные боту. однако и для javascript, и для html сайтов действуют одинаковые seo стандарты . помните о заголовке и мета-описании тегов alt для изображений!

4. a href и img src: роботу google нужны ссылки, по которым он может переходить, чтобы находить другие сайты. следите за наличием ссылок с атрибутами href- или src-в ваших js-документах.

5. создание унифицированных версий: из-за рендеринга javascript возникают predom и postdom версии. чтобы избежать маскировки, убедитесь, что нет никаких противоречий и, например, что канонические теги или разбивки на страницы интерпретируются правильно

6. сделайте доступ для всех ботов. не все боты могут работать с javascript, как googlebot. поэтому стоит разместить заголовок, метаинформацию и социальные теги в html-коде .

7. не отключайте js поверх robots.txt: убедитесь, что ваш javascript также может сканироваться роботом googlebot. для этого не исключайте каталоги из robots.txt.

8. используйте текущую карту сайта: чтобы показать google все возможные изменения в содержимом js, нужно постоянно поддерживать актуальность атрибута lastmod в карте сайта xml.

Проверка веб-сайтов на JavaScript: что делать при аудите

1. Проведите визуальный чекап. Чтобы понять, как увидит веб-сайт посетитель, нужно разделить контент сайта на:

• видимое содержимое;

• содержимое, требующее взаимодействия;

• скрытое содержимое;

• содержимое от третьих лиц, например рейтинги;

• содержимое с товарными рекомендациями.

2. Проверьте HTML-код. Отключите CSS, JavaScript и файлы cookie в режиме веб-разработчика, чтобы увидеть, чего не хватает на сайте. Эти те элементы, которые контролирует JavaScript.

Управляйте такими мета-элементами, как заголовок и описание веб-сайта. Они должны быть доступны через событие загрузки, чтобы боты могли индексировать эти элементы Заголовок и метатеги прописать стоит в коде HTML, даже при работе с сайтами JS.

3. Еще раз проверьте HTML-код. Заново загрузите сайт с уже отключенными JavaScript и CSS. Затем вызовите меню Chrome, кликнув правой кнопкой мыши на сайте, и выберите «Проверить элемент». Справа откроется еще одно окно. Щелкните по тегу HTML правой кнопкой мыши — выберите «Копировать внешний HTML». И наконец, вставьте код в редактор. Теперь такие поисковые системы, как Google, смогут проиндексировать этот код.

Какие инструменты использовать для проверки JavaScript?

1. prerender.io — программное обеспечение с открытым исходным кодом для оптимизации рендеринга js-сайта;

2. brombone — загрузит отобразит ваш сайт в браузере, чтобы вам было легче проверить корректность работы ajax-запросов и javascript. таким же образом можно протестировать и dom. изменения — если рендеринг работает, то сайты сохраняются в формате html. можете разрешить обработанным js-сайтам выдавать прокси-сервер от brombone при обращении к сайту поискового робота. для правильной реализации инструмента вам понадобится карта сайта в формате xml.

3. angular js. с его помощью можно предварительно визуализировать снимки html для более быстрого поиска и индексации js-сайта google ботом.

4. seo.js. в этой программе код js также обрабатывается как html и доступен google для сканирования. программный код передается на ваш сервер. собственная панель управления помогает управлять нужными js-элементами и сайтами. более того — программа создаст и xml карту сайта.

5. изоморфный javascript. с этим инструментом приложения можно запустить как на стороне сервера, так и на стороне клиента. это значит, что и, серверная, и интерфейсная часть используют один и тот же код. javascript становится более seo-friendly благодаря реализации отсутствующего рендеринга.

Читайте также первую часть статьи: JavaScript и SEO — Руководство по передовой практике

SЕО-специалист Веб-студии «Centum-D» Андрей Кучугура