Обработка веб-приложений на основе JavaScript с помощью робота Googlebot предполагает несколько этапов - на схеме ниже показано, по какому алгоритму робот Googlebot выполняет эти операции.
Однако, если на определенном этапе возникнут ошибки, контент может не попасть в индекс или попасть некорректно.
Сегодня мы обсудим как устранить проблемы кода JavaScript, из-за которых контент вашего сайта не отображается в результатах поиска Google.
В особенности это руководство будет полезно, если у вас одностраничное приложение (SPA веб-сайт), где подобные проблемы могут привести к различным сложностям в сканировании.
Рекомендации:
1. Используйте инструменты проверки
Чтобы выяснить, как Google сканирует и обрабатывает тот или иной URL, используйте проверку оптимизации для мобильных или инструмент проверки URL в Search Console.
Таким образом вы сможете узнать больше о загруженных ресурсах, данных в консоли JavaScript, исключениях, отрисованных объектах DOM и так далее, что позволит выявить ошибки.
Примечание: Для отладки страниц следует использовать не ссылки на кеш, а инструмент проверки URL, так как в нем доступны более поздние версии ваших страниц.
2. Предотвратите заранее появление ложных ошибок 404
С этим могут быть трудности, если у вас одностраничное приложение. Избежать индексирования страниц с 404-ошибкой позволяют следующие два способа (можно использовать один из них или оба):
- Переадресация на URL, при переходе по которому от сервера приходит код статуса 404.
Пример:
fetch(`https://api.kitten.club/cats/${id}`)
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
// redirect to page that gives a 404
window.location.href = '/not-found';
}
});
- Добавление метатега robots с директивой noindex или включение этой директивы в существующий метатег robots.
Пример:
fetch(`https://api.kitten.club/cats/${id}`)
.then(res => res.json())
.then((cat) => {
if (!cat.exists) {
const metaRobots = document.createElement('meta');
metaRobots.name = 'robots';
metaRobots.content = 'noindex';
document.head.appendChild(metaRobots);
}
});
Примечание: когда одностраничное приложение использует для обработки ошибок клиентский код JavaScript, оно зачастую передает код статуса HTTP 200 вместо соответствующего ситуации кода. Из-за этого есть вероятность, что страницы ошибок будут индексироваться и показываться в результатах поиска.
3. Учитывайте, что робот Googlebot будет отклонять запросы разрешений пользователей
Функции, для которых требуется разрешения пользователей, не подходят для робота Googlebot, а также некоторых пользователей. Например, если установить в качестве обязательной функции Camera API, робот Googlebot не сможет обеспечить наличие камеры. В подобном случае продумайте как пользователям ознакомиться с вашим контентом, не предоставляя разрешение на доступ к камере.
4. Не используйте URL фрагментов, чтобы загружать разные материалы
Одностраничное приложение может загружать разные экраны с помощью URL фрагментов (например, https://example.com/#/products). Поскольку поддержка схемы сканирования AJAX была прекращена в 2015 г., URL фрагментов не всегда совместимы с роботом Googlebot. Если вам нужно загружать в одностраничном приложении разные материалы с учетом URL, рекомендуем использовать History API.
5. Показывая контент, обеспечьте актуальность данных
Как и обычные браузеры WRS (Web Rendering Service, компонент робота Googlebot) загружает каждый URL, выполняя переадресации серверов и клиентов. Однако WRS не сохраняет состояние страниц между их загрузками. При загрузке страниц очищаются:
- данные локального хранилища и данные сеансов;
- файлы cookie HTTP.
6. Чтобы при добавлении роботом Googlebot вашего контента в кеш Google не возникало неполадок, используйте цифровые отпечатки контента
Чтобы сократить число сетевых запросов и потребление ресурсов, робот Googlebot применяет агрессивное сканирование. WRS может игнорировать заголовки кеширования, что иногда приводит к использованию устаревших ресурсов JavaScript или CSS.
Чтобы избежать этой проблемы, можно указать цифровой отпечаток контента в качестве части названия файла, например main.2bb85551.js. Цифровой отпечаток определяется контентом файла, поэтому при каждом обновлении создается новое название файла. Подробнее по ссылке.
7. Убедитесь, что в вашем приложении используется проверка поддержки функций для всех нужных API, и при необходимости добавьте резервный процесс или полифил
Агенты пользователя поддерживают не все функции веб-страниц и могут намеренно отключать некоторые функции. Предположим, вы используете WebGL для обработки фотоэффектов в браузере, но проверка поддержки функций показывает, что робот Googlebot несовместим с WebGL.
Чтобы устранить эту неполадку, можно отказаться от фотоэффектов или применить обработку на стороне сервера (тогда ваш контент будет доступен всем, в том числе роботу Googlebot).
8. Обеспечьте передачу контента по протоколу HTTP
Чтобы получать контент с вашего сервера, Googlebot подключается к нему по протоколу HTTP. Подключения других типов не поддерживаются (например, использующие WebSockets или WebRTC).
Чтобы такие подключения не вызывали проблем, дублируйте их с применением HTTP. Тогда робот не встретит препятствий при сканировании, ошибки будут обрабатываться корректно и получится проверять поддержку функций.
9. Убедитесь, что отрисовка ваших веб-компонентов выполняется корректно
Используйте для этого проверку оптимизации для мобильных или инструмент проверки URL.
WRS представляет структуру Light DOM и Shadow DOM в упрощенном виде. Если ваши веб-компоненты не используют механизм <slot> для контента Light DOM, изучите их документацию или выберите другие компоненты. Более подробная информация приведена в рекомендациях по веб-компонентам.
Примечание: когда вы устраните проблемы из списка, снова протестируйте свою страницу. Выполните проверку оптимизации для мобильных или используйте инструмент проверки URL в Search Console.
Если неполадка устранена, появится зеленый флажок и сведения об ошибках исчезнут. Если устранить ошибки не удалось, опубликуйте сообщение на специальном форуме.
10. Используйте рендеринг
Чтобы минимизировать количество проблем, описанных выше, можно использовать следующие способы:
- Использовать собственный server-side рендеринг.
- Использовать такие сервисы, как: Prerender.io, Renderjs.io и другие.
Еще больше статей об интернет-маркетинге и увеличении онлайн-продаж здесь: https://www.trinet.ru/blog/.
Понравилась статья? Поставьте лайк 👍 , оставьте комментарий и подписывайтесь на наш канал.