Получайте последние обновления и аналитическую информацию с Google I/O 2019.
С Google Поиском происходят замечательные вещи, и мы были рады поделиться ими на Google I/O 2019!
В этом посте мы сосредоточимся на лучших методах обеспечения доступности веб-приложений JavaScript в поиске Google, в том числе:
- Новый вечнозеленый робот Googlebot
- Конвейер Googlebot для сканирования, рендеринга и индексирования
- Обнаружение функций и обработка ошибок
- Стратегии рендеринга
- Инструменты тестирования вашего сайта в Google Поиске
- Общие проблемы и возможные решения
- Лучшие практики SEO в веб-приложениях JavaScript
Встречайте вечнозеленого робота Googlebot
В этом году мы анонсировали долгожданного нового вечнозеленого робота Googlebot .
Робот Googlebot теперь использует современный движок Chromium для рендеринга веб-сайтов для поиска Google. Кроме того, мы будем тестировать новые версии Chromium, чтобы обновлять робот Googlebot, обычно в течение нескольких недель после каждого стабильного выпуска Chrome. Это объявление является большой новостью для веб-разработчиков и специалистов по поисковой оптимизации, поскольку оно знаменует появление более 1000 новых функций , таких как ES6+, IntersectionObserver и Web Components v1, в Googlebot.
Узнайте, как работает Googlebot
Googlebot — это конвейер, состоящий из нескольких компонентов. Давайте посмотрим, как робот Googlebot индексирует страницы для поиска Google.
Процесс работает следующим образом:
- Робот Googlebot ставит URL-адреса в очередь для сканирования.
- Затем он получает URL-адреса с помощью HTTP-запроса на основе бюджета сканирования .
- Робот Googlebot сканирует HTML на наличие ссылок и ставит обнаруженные ссылки в очередь для сканирования.
- Затем робот Googlebot ставит страницу в очередь на рендеринг.
- Как можно скорее безголовый экземпляр Chromium отображает страницу, включая выполнение JavaScript.
- Робот Googlebot использует визуализированный HTML-код для индексации страницы.
Ваша техническая настройка может повлиять на процесс сканирования, рендеринга и индексирования. Например, медленное время ответа или ошибки сервера могут повлиять на бюджет сканирования . Другой пример: требование JavaScript для отображения ссылок может привести к более медленному обнаружению этих ссылок.
Используйте обнаружение функций и обрабатывайте ошибки
Постоянно обновляющийся робот Googlebot имеет множество новых функций, но некоторые функции до сих пор не поддерживаются. Использование неподдерживаемых функций или неправильная обработка ошибок могут привести к тому, что робот Googlebot не сможет отображать или индексировать ваш контент.
Давайте посмотрим на пример:
<body>
<script>
navigator.geolocation.getCurrentPosition(function onSuccess(position) {
loadLocalContent(position);
});
</script>
</body>
В некоторых случаях на этой странице может не отображаться никакого содержимого, поскольку код не обрабатывает ситуации, когда пользователь отклоняет разрешение или когда вызов getCurrentPosition возвращает ошибку. Робот Googlebot по умолчанию отклоняет подобные запросы на разрешение.
Это лучшее решение:
<body>
<script>
if (navigator.geolocation) {
// this browser supports the Geolocation API, request location!
navigator.geolocation.getCurrentPosition(
function onSuccess(position) {
// we successfully got the location, show local content
loadLocalContent(position);
}, function onError() {
// we failed to get the location, show fallback content
loadGlobalContent();
});
} else {
// this browser does not support the Geolocation API, show fallback content
loadGlobalContent();
}
</script>
</body>
Если у вас возникли проблемы с индексированием вашего сайта JavaScript, ознакомьтесь с нашим руководством по устранению неполадок , чтобы найти решения.
Выберите правильную стратегию рендеринга для своего веб-приложения.
Стратегией рендеринга по умолчанию для одностраничных приложений сегодня является рендеринг на стороне клиента. HTML загружает JavaScript, который затем генерирует контент в браузере по мере его выполнения.
Давайте посмотрим на веб-приложение, которое показывает коллекцию изображений кошек и использует JavaScript для рендеринга полностью в браузере.
Если вы свободны в выборе стратегии рендеринга, рассмотрите возможность рендеринга на стороне сервера или предварительного рендеринга. Они выполняют JavaScript на сервере для генерации исходного HTML-контента, что может повысить производительность как пользователей, так и сканеров. Эти стратегии позволяют браузеру начать рендеринг HTML по мере его поступления по сети, что ускоряет загрузку страницы. Сеанс рендеринга на I/O или запись в блоге о рендеринге в Интернете показывает, как рендеринг и гидратация на стороне сервера могут улучшить производительность и удобство использования веб-приложений, а также предоставляет дополнительные примеры кода для этих стратегий.
Если вы ищете обходной путь, который поможет сканерам, которые не выполняют JavaScript, или если вы не можете внести изменения в базу кода внешнего интерфейса, рассмотрите возможность динамического рендеринга , который вы можете опробовать в этой лаборатории кода . Однако обратите внимание, что вы не получите такого же удобства для пользователя или преимуществ в производительности, которые были бы при рендеринге на стороне сервера или предварительном рендеринге, поскольку динамический рендеринг передает сканерам только статический HTML. Это делает его временной мерой, а не долгосрочной стратегией.
Проверьте свои страницы
Хотя большинство страниц в целом нормально работают с роботом Googlebot, мы рекомендуем регулярно проверять ваши страницы, чтобы убедиться, что ваш контент доступен роботу Googlebot и нет никаких проблем. Есть несколько отличных инструментов, которые помогут вам в этом.
Самый простой способ быстрой проверки страницы — тест на мобильность . Помимо демонстрации проблем с удобством для мобильных устройств, он также предоставляет скриншот содержимого, расположенного над сгибом, и визуализированного HTML-кода в том виде, в каком его видит робот Googlebot.
Вы также можете узнать, есть ли проблемы с загрузкой ресурсов или ошибки JavaScript.
Рекомендуется подтвердить свой домен в Google Search Console , чтобы вы могли использовать инструмент проверки URL-адресов, чтобы узнать больше о состоянии сканирования и индексации URL-адреса, получать сообщения, когда Search Console обнаруживает проблемы, и узнавать более подробную информацию о том, как ваш сайт работает в Поиск Гугл.
Чтобы получить общие советы и рекомендации по SEO, вы можете использовать SEO-аудит в Lighthouse. Чтобы интегрировать SEO-аудит в свой набор тестов, используйте Lighthouse CLI или бот Lighthouse CI .
Эти инструменты помогают выявлять, отлаживать и устранять проблемы со страницами в Google Поиске и должны быть частью вашей программы разработки.
Будьте в курсе и свяжитесь с нами
Чтобы быть в курсе объявлений и изменений в Поиске Google, следите за нашим блогом для веб-мастеров , каналом Google для веб-мастеров на YouTube и нашей учетной записью в Твиттере . Также ознакомьтесь с нашим руководством для разработчиков по поиску в Google и серией видео о JavaScript SEO , чтобы узнать больше о SEO и JavaScript.