Google поделился своим опытом работы с сообществами SEO и цифровым маркетингом, опубликовав серии видеороликов Lightning Talks на YouTube. Мартин Сплитт рассказывает о нескольких простых способах использования Chrome DevTools, которые помогают устранить распространенные проблемы с SEO на промежуточном сайте до его запуска.
&nbsp;
Использование Mobile-Friendly Test для мобильных устройств
&nbsp;
Использование Mobile-Friendly Test в Google Search Console &ndash; это отличное начало. Когда вы тестируете URL-адрес промежуточной среды, он показывает вам, есть ли какие-либо отсутствующие элементы в отображаемом HTML. Вы можете внимательно посмотреть, что происходит с этими элементами, открыв веб-сайт в своем браузере и используя Google Chrome DevTools.
&nbsp;
Использование вкладки "Элементы" в DevTools
&nbsp;
Вкладка "Элементы" в DevTools даст вам HTML-представление объектной модели документа (DOM) страницы. Это ценный инструмент для поиска контента на странице и определения того, присутствует ли он в DOM. Если содержимое отсутствует в отображаемом HTML, оно также будет отсутствовать и в DOM.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/964bc219-f28a-49da-83b6-2dbcf0cf8e96.png" alt="" width="300" height="522" />
Использование вкладки "Сеть"
&nbsp;
Вкладка "Сеть" в DevTools позволяет увидеть, что происходит между сервером и вашим браузером. При перезагрузке страницы вы сможете увидеть каждый запрос и ответ от сервера. Диаграмма покажет, сколько времени занимают все текущие процессы. Вы также можете проверить все запросы и заголовки серверных ответов, которые могут помочь вам найти конкретные заголовки, например, X-Robots. Это поможет определить, попало ли недостающее содержимое с сервера в браузер.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/02e9cbdf-f29a-40b0-a530-2eec7b485fe9.png" alt="" width="300" height="522" />
&nbsp;
Настройка сетевых условий
&nbsp;
Вкладка "Сеть" в DevTools имеет и другие функции, такие как отключение кэша, настройка скорости передачи сети и изменение пользовательского агента. Однако важно отметить, что установка пользовательского агента в Googlebot может не дать ожидаемых результатов. Googlebot также определяет файл robots.txt, который ваш браузер игнорирует, и некоторые сайты могут выполнять IP-поиск, чтобы узнать, поступает ли запрос из центра обработки данных Google. Вы можете быстро диагностировать и решать различные проблемы SEO, объединив их с инструментами тестирования в Google Search Console.
&nbsp;
<img style="display: block; margin-left: auto; margin-right: auto;" src="https://rocket-cpa-prod.b-cdn.net/article-images/f468d00a-d6d9-4cda-968f-1f559d886fd5.png" alt="" width="300" height="522" />
&nbsp;
В заключение можно сказать, что инструменты разработчика браузера предлагают мощный набор инструментов отладки для устранения неполадок SEO. Вы можете использовать вкладку "Элементы" для проверки DOM, вкладку "Сеть" для проверки сетевых запросов, ответов и установки сетевых условий, таких как кэширование и пользовательский агент.