Ошибки, которых следует избегать при использовании 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 благодаря реализации отсутствующего рендеринга.