Обзор наиболее полезных опций инструментов разработчика Chrome для SEO

  1. Как получить доступ к инструментам разработчика:
  2. Мобильный или рабочий стол
  3. Редактирование DOM
  4. Как SEO могут использовать эту функцию?
  5. Скриншоты
  6. Мобильная версия
  7. Настольная версия
  8. Заголовки HTTP
  9. Код состояния и отслеживание перенаправлений
  10. Отключение JavaScript
  11. Спектакль
  12. 1. Использование JavaScript и CSS
  13. 2. Охват ресурсов
  14. Дополнительная функция
  15. 3. Визуализация блокирующих ресурсов
  16. Оптимизация изображения
  17. Подтверждение AMP
  18. Как справиться с печеньем?
  19. Маяк потрясающий
  20. Резюме

Мы все окружены мощными инструментами, которые обрабатывают огромные объемы данных. Я думаю, что многие из нас не могли бы представить нашу повседневную деятельность без сканеров, скребков и т. Д. Однако, это заставило нас забыть о супер-полезном инструменте, который был бесплатным и готов к работе сразу после запуска браузера Chrome. Я говорю о Chrome Developer Tools. Я знаю, это не заменит сканеры и другие мощные инструменты. Но он предоставляет так много интересных данных, что я бы порекомендовал использовать их во время технического аудита SEO.
Если вы хотите увидеть и протестировать новейшие функции в Chrome Developer Tools, вам следует загрузить экспериментальную версию браузера: Google Chrome Canary ,

Эта статья является своего рода обзором наиболее интересных функций для профессионалов SEO. Некоторые из них действительно базовые, другие функции охватывают более сложные концепции. Итак, давайте рассмотрим самые интересные варианты с моей точки зрения.

Инструменты разработчика Chrome это набор инструментов, предназначенных для отладки веб-сайта - подавляющее большинство опций будет использоваться только веб-разработчиками и программистами. Тем не менее, оптимизаторы также заинтересованы в качестве и поведении сайта. Инструменты разработчика Chrome предоставляют эту информацию немедленно.

Как получить доступ к инструментам разработчика:

Откройте браузер и перейдите на страницу, которую вы хотите проанализировать. Есть три способа доступа к инструментам:

  • Меню Chrome: Дополнительные инструменты → Инструменты разработчика
  • Ярлыки: Windows (CTRL + Shift + I или F12) или Mac (Command + Option + I)
  • Осмотреть: вы можете осмотреть все элементы на сайте (Правой кнопкой мыши → Осмотреть)

Основной вид:

Основной вид:

Мобильный или рабочий стол

Вид веб-сайта по умолчанию в Chrome Developer Tools - режим рабочего стола. Тем не менее, в мобильном мире, где впервые появилась мобильная индексация, очень важно знать, хорошо ли работает мобильная версия вашего сайта.

Как?

Перейдите в Инструменты разработчика Chrome. Нажмите на значок устройства в верхнем левом углу консоли.

Нажмите на значок устройства в верхнем левом углу консоли

В результате вид по умолчанию будет преобразован в мобильный.

В результате вид по умолчанию будет преобразован в мобильный

Это представление дает вам возможность проверить, как ведет себя ваш мобильный веб-сайт, как работает навигация и как отображается контент. Пожалуйста, имейте в виду, что просмотр веб-сайта очень полезен, но он не заменяет Fetch and Render на пользовательский агент для смартфона в GSC.

Редактирование DOM

Инструменты разработчика Chrome дают вам возможность изменять элементы на сайтах, чтобы вы могли видеть изменения в режиме реального времени. Помимо CSS-стилей - что для нас менее важно - мы можем изменить контент на сайте. Важный! Все изменения, сделанные с помощью инструментов разработчика, являются временными и не изменяют HTML-файл. Это всего лишь предварительный просмотр того, как тот или иной элемент будет выглядеть на странице.

Как SEO могут использовать эту функцию?

  1. Оптимизация информационной архитектуры

Метки, используемые во внутренних ссылках, действительно имеют значение. Это важно как для пользователей, так и для сканеров. Давайте предположим, что вы провели детальное исследование ключевых слов и выбрали наиболее ценные ключевые слова, которые следует использовать в навигации. Теперь пришло время для примерки.

Как это сделать?

Перейдите на страницу, которую вы хотите оптимизировать. Нажмите и осмотрите элемент, который вы хотите изменить. В этом случае я хочу изменить метки в этой навигации:

В этом случае я хочу изменить метки в этой навигации:

Теперь дважды щелкните текст привязки и вставьте новую метку - изменения на сайте видны сразу.

Теперь дважды щелкните текст привязки и вставьте новую метку - изменения на сайте видны сразу

Я изменил лейбл так, как мне нравится, но он выглядит не очень хорошо, несмотря на то, что это правда 🙂

Таким образом, вы даже можете проверить заголовки и описание в SERPS.

Скриншоты

Инструменты разработчика Chrome позволяют делать полные скриншоты страницы. Это очень полезно, если мы хотим указать элемент на сайте в полном контексте. Например, реклама и контент на странице - лучше увидеть страницу на расстоянии и оценить это соотношение.

Как сделать полные скриншоты?

Мобильная версия

Переключитесь на мобильный вид в Инструментах разработчика. Нажмите на три вертикальные точки в углу:

Нажмите на три вертикальные точки в углу:

В меню вы найдете две опции: «Сделать снимок экрана» и «Сделать снимок экрана целиком».

Настольная версия

Откройте командное меню (CTRL + Shift + P ИЛИ Cmd + Shift + P) и введите скриншот в появившемся окне.

Откройте командное меню (CTRL + Shift + P ИЛИ Cmd + Shift + P) и введите скриншот в появившемся окне

Есть несколько вариантов на выбор. Мой фаворит - «Сделать снимок экрана в натуральную величину».

Мой фаворит - «Сделать снимок экрана в натуральную величину»

Интересной особенностью является захват узлов на сайте. Осмотрите элемент - убедитесь, что все

выбран.

Используйте меню команд и выберите «Снимок экрана узла захвата».

Заголовки HTTP

Заголовки HTTP - это дополнительные фрагменты информации, которыми обмениваются сервер и браузер. Он может содержать много важной информации с точки зрения SEO:

  • код состояния
  • заголовки кеша
  • компрессия
  • правила роботов (noindex), канонические
  • Тип содержимого

Вы можете проверить заголовки HTTP каждого ресурса, доступного на сайте.

Как это сделать?

Перейдите на вкладку «Сеть» и перезагрузите страницу.

Перейдите на вкладку «Сеть» и перезагрузите страницу

В панели есть несколько вариантов фильтрации ресурсов по типу. Теперь вы можете выбрать файл, который хотите проверить, и на вкладке «Заголовки» вы найдете все заголовки HTTP.

Подсказка! Несоответствующие канонические

Канонические теги - это подсказки для робота Google, которые указывают на каноническую версию URL. Таким образом, вы должны убедиться, что вы показываете четкие сигналы для Googlebot. Может случиться, что в исходном коде есть заданный тег rel = ”canonical”, а в заголовках HTTP вы показываете что-то другое. У робота Google могут возникнуть проблемы с пониманием канонического правила.

Код состояния и отслеживание перенаправлений

Инструменты разработчика Chrome дают вам мгновенное представление о кодах состояния всех ресурсов. Это полезно, если вы хотите проверить, есть ли какие-либо 404 или если кэширование работает на вашем сайте. Как это сделать?

Перейдите на вкладку «Сеть» и перезагрузите страницу.

Как видите, у каждого файла есть код состояния, поэтому вы можете видеть, в порядке ли он (200), сломан (4xx или 5xx) или перенаправлен (30x). Если ваш метод кэширования основан на etag или Last-Modified, вы можете увидеть здесь, правильно ли отвечает ваш сервер. Все, что вам нужно сделать, это убедиться, что Disable Cache не отмечен, и перезагрузить страницу дважды. Если кеш работает нормально, кеш в браузере должен содержать информацию о уже загруженных ресурсах, и они должны ответить кодом состояния 304 (не изменено).

Отключение JavaScript

Все больше и больше сайтов используют JavaScript для загрузки контента. Несмотря на то, что Google сказал, что они готовы сканировать и индексировать контент, загруженный с помощью JavaScript, у нас есть много сомнений по этому поводу. Здесь вы можете прочитать о Эксперимент Бартоша Горалевича по этому вопросу.

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

Откройте Chrome Developer Tools и перейдите в «Настройки». (нажмите F1 или в меню выберите «Меню и настройки» → «Настройки»). Там вы найдете вариант: отключить JavaScript. Отметьте его и перезагрузите страницу.

До:

После

После

Как видите, есть «небольшая» разница до и после.

Спектакль

Есть много инструментов, предназначенных для анализа производительности сайта. Тем не менее, Chrome Developer Tools - один из инструментов, который предоставляет наиболее точные данные.

1. Использование JavaScript и CSS

Поскольку производительность стала фактором ранжирования, использование .js и .css стало настоящей болью. Инструменты разработчика Chrome - это источник информации, который может быть полезен для оптимизации производительности.

2. Охват ресурсов

Это стандартная ситуация, когда файлы JavaScript или CSS больше, чем необходимо. Тяжелые файлы действительно замедляют работу сайта. Дело в том, что часто эти ресурсы содержат слишком много строк кода, чем необходимо для отображения страницы.

Инструменты разработчика Chrome могут помочь вам обнаружить код, от которого вы можете избавиться.

Как это сделать?

Перейдите на вкладку «Сеть» и перезагрузите страницу. Нажмите на 3 вертикальные точки в верхнем правом углу и выберите «Другие инструменты» → «Покрытие».

Новая коробка должна появиться и начать захват покрытия. Вот результат:

Вот результат:

Выше вы можете увидеть список файлов .js и .css. Каждая строка показывает общее количество байтов и информацию о том, какая часть кода не использовалась при рендеринге. Конечно, это не значит, что вы можете удалить 90% скриптов! Но это должно быть предупреждением, что вам нужно пройти этот список более тщательно.

Дополнительная функция

Если вы нажмете на файл, вы можете просмотреть, какие строки были использованы при рендеринге. Это выглядит так:

Это выглядит так:

Когда вы начинаете прокрутку или запускаете какое-либо событие на веб-сайте, вы можете увидеть, как использование .js или .css изменяется в режиме реального времени.

Опять же, это еще не значит, что вы можете просто удалить красную часть кода - это подсказка!

3. Визуализация блокирующих ресурсов

Проблема блокировки рендеринга - одна из самых популярных проблем, которые необходимо решить при оптимизации производительности. Блокирующие файлы рендеринга должны быть загружены браузером, прежде чем будут загружены любые ресурсы, необходимые для рендеринга, что может стать серьезной проблемой для оптимизации производительности.

Инструменты разработчика Chrome помогают определить, какие файлы вызывают проблему. Если вы их знаете, вы можете ускорить свой сайт с помощью одного из методов, используемых для оптимизации производительности.

Как это проверить?

Перейдите на вкладку «Сеть» и перезагрузите страницу. Самым важным разделом является диаграмма Водопад справа.

Синяя линия показывает, когда был загружен DOMContent. Вы можете фильтровать файлы по типу: js., .Css и диагностировать, какой из них блокирует рендеринг. Все на левой стороне синей линии может быть причиной проблем. Теперь, имея список всех этих ресурсов, вам нужно решить, что с ними делать: асинхронная загрузка? в соответствии? двигать их вниз?

Оптимизация изображения

Изображения могут быть действительно проблемными с точки зрения производительности. Я не знаю почему, но часто создатели контента пропускают оптимизацию изображений. Оптимизируя скорость вашего веб-сайта, уменьшение изображений может сделать его значительно легче.

Одной из проблем с изображениями является загрузка изображения большего размера, чем необходимо. С помощью Chrome Developer Tools вы можете проверить размер загружаемого изображения и то, что отображается. Как это сделать?

Перейдите на вкладку «Элементы» и используйте опцию поиска и найдите все Перейдите на вкладку «Элементы» и используйте опцию поиска и найдите все

Перейдите на вкладку «Элементы» и используйте опцию поиска и найдите все

Важно: я не думаю, что это хорошая идея, чтобы просмотреть все изображения на сайте таким образом. Вы можете просмотреть некоторые из них, чтобы увидеть, есть ли проблема. Если это так, то следует провести проверку в большем масштабе.

Подтверждение AMP

Да, вы также можете проверить, если вы реализовали AMP (Ускоренные мобильные страницы) правильно с помощью Chrome Developer Tools. Если есть какие-либо ошибки, это предотвратит отображение этих страниц в мобильном поиске. Как это сделать?

Откройте страницу, которая должна быть AMPed, и добавьте в URL что-то вроде этого: # development = 1. Теперь откройте консоль в Chrome Developer Tools и обновите страницу. Если обнаружатся какие-либо проблемы, вы увидите, что пошло не так.

Это не всегда выглядит так позитивно:

Это не всегда выглядит так позитивно:

Здесь вы можете найти подробную информацию об ошибках, которые могут появиться.

Как справиться с печеньем?

Cookies обслуживаются всеми сайтами. Тем не менее, они могут быть действительно тревожными при проверке сайта. Например, иногда веб-сайт навязывает пользователю определенную языковую или мобильную версию. Да, вы можете удалить все куки из браузера, но вы также можете удалить определенные куки в Инструментах разработчика Chrome.

Как это сделать?

Перейдите на вкладку «Приложение» в Chrome Developer Tools и выберите Cookies на боковой панели. Нажмите на доменное имя, и справа вы увидите полный список файлов cookie:

Нажмите на доменное имя, и справа вы увидите полный список файлов cookie:

Маяк потрясающий

В Chrome Developer Tools есть специальный раздел для аудита сайта. Он доступен на вкладке «Аудит» и имеет 4 модуля:

  • Прогрессивное веб-приложение
  • Спектакль
  • доступность
  • Лучшие практики

Он имеет общий обзор многих элементов, описанных в этой статье. Кроме того, каждая проблема имеет краткое описание и ссылку.

Он постоянно развивается, и вы можете проверить новейшие функции в Канарские. Некоторые недавно обнаруженные хорошие функции включают в себя:

  • используя изображения в правильном масштабе - где? Best Practices → не использует [sic] изображения с соответствующим соотношением сторон.

Это означает, что вы загрузили изображение большего размера, чем необходимо:

Это означает, что вы загрузили изображение большего размера, чем необходимо:

  • TTFB анализ - где? Производительность → Поддерживать низкое время отклика сервера (TTFB)

Резюме

Я попытался просмотреть функции, которые, на мой взгляд, могут быть полезны в повседневной работе SEO. Это не полный список всех опций, которые вы можете использовать. Если вы хотите получить более глубокие знания об инструментах разработчика Chrome, вы всегда можете принять участие в курс.