15 Google Chrome DevTools для SEO

1. 1. Анализ производительности сети
2. 2. Проверьте мобильную веб-оптимизацию
3. 3. Определите ресурсы, блокирующие рендеринг.
4. 4. Проверьте основные элементы контента своей страницы
5. 5. Проверьте изображения ALT описание
6. 6. Исправить проблемы с памятью
7. 7. Найдите скрытый контент CSS
8. 8. Поймите вопросы безопасности
9. 9. Подтвердите реализацию ускоренных мобильных страниц (AMP)
10. 10. Анализ производительности во время выполнения
11. 11. Ищите статус HTTP
12. 12. Проверять и удалять куки
13. 13. Очистить хранилище
14. 14. Проверьте анимацию
15. 15. эмулировать датчики

Один из самых полезных инструментов SEO - это тот, за который нам даже не нужно платить. Этот инструмент от Google Chrome DevTools , Этот инструмент встроен в Google Chrome и позволяет исправить многие функции SEO на веб-странице.

Чтобы получить доступ к DevTools, просто нажмите на три вертикальные точки в правом углу браузера Google Chrome. Затем выберите Дополнительные инструменты> Инструменты разработчика. В противном случае, ярлык для открытия этого меню - Ctrl + Shift + I.

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

Так как DevTools может помочь SEO? Вот 20 хаков, которые каждый, кто работает в SEO, должен знать и использовать:

1. Анализ производительности сети

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

После того как вы завершили это и выбрали желаемые настройки, перезагрузите страницу и перейдите на сетевую панель, чтобы увидеть время загрузки страницы и разметку того, где страница была проанализирована. Чтобы устранить проблемы со скоростью, перейдите на панель аудита и нажмите кнопку « Выполнить ». Там у вас будет доступ к списку ресурсов, вызывающих проблему.

2. Проверьте мобильную веб-оптимизацию

Источник: Разработчики Google

Каждый SEO-специалист захочет протестировать мобильную оптимизацию. Это также позволяет вам проверить производительность сети для мобильных телефонов. Для этого просто установите флажок « отключить кеш ». В меню « без регулирования » выберите «Regular 2G». Это позволит имитировать мобильную производительность на вашем ноутбуке или компьютере.

3. Определите ресурсы, блокирующие рендеринг.

Сценарии блокировки рендеринга и большие запросы часто приводят к медленной загрузке вашего сайта. Вы можете определить эти ресурсы в разделе « Сеть» . Это покажет вам, какие ресурсы JS и CSS загружаются до DOM, расположенного внизу панели «Сеть».

4. Проверьте основные элементы контента своей страницы

Любой бизнес с веб-сайтом захочет проверить основные элементы контента своего веб-сайта, включая элементы, отображаемые с помощью JavaScript. В то время как У Google есть инструменты, которые сканируют и индексируют этот контент не всегда идеален. В результате важно знать, как это проверить самостоятельно.

Чтобы увидеть DOM в DevTools, перейдите на страницу Элементы . Это может быть использовано для просмотра элементов страницы, включая заголовок, мета-описание или содержимое страницы. После этого вы сможете проверить, доступен ли ваш контент для Google.

5. Проверьте изображения ALT описание

Источник: Земля Поисковой машины

Вкладка Элементы также позволяет вам проверить описание ALT ваших изображений. Просто щелкните правой кнопкой мыши на любом изображении и выберите «осмотреть». Отобразится кодирование, показывающее описание ALT.

6. Исправить проблемы с памятью

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

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

Чтобы контролировать использование памяти, перейдите к « Дополнительные инструменты», а затем « Диспетчер задач» или нажмите Shift + Esc. Затем щелкните правой кнопкой мыши заголовок таблицы диспетчера задач и включите память JavaScript.

Источник: Разработчики Google

Здесь будет две колонки. Столбец памяти представляет собственную память, где хранятся узлы DOM. Значение будет увеличиваться, когда создаются узлы DOM. Другой столбец для памяти JavaScript. Вас заинтересует живой номер, который отображает, сколько объектов, доступных в вашей памяти, используется на вашей веб-странице. Увеличение числа означает, что объекты создаются или уже существующие объекты растут.

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

7. Найдите скрытый контент CSS

Обычный способ скрыть текст - использовать CSS со свойствами «display: none» или «visibility: hidden». Важно проверить эти сайты на наличие важной информации, которая может быть скрыта.

Чтобы проверить это, просто перейдите в панель поиска , в которую можно попасть, нажав Ctrl + Shift + F после открытия DevTool. Это откроет панель поиска, которая позволит вам искать «скрытые» или «отображать: нет» свойства в коде страницы. Просмотрите код, чтобы увидеть, что скрывается, и при необходимости выполните соответствующие действия.

8. Поймите вопросы безопасности

Источник: Разработчики Google

Безопасность веб-сайта является одной из самых важных вещей при ведении бизнеса в Интернете. Вы можете проверьте, безопасна ли ваша страница или небезопасные, перейдя на панель безопасности .

Обзор безопасности говорит вам, является ли ваша страница безопасной, и имеет ли она безопасное соединение и ресурсы. Нажав на кнопку « Просмотр сертификата », вы можете просмотреть сертификат сервера для основного источника. Незащищенная страница будет читать сообщение «эта страница не является безопасной». Вы также можете использовать левую панель для проверки отдельных безопасных или незащищенных источников. Щелкнув по любой незащищенной ссылке, вы получите подробную информацию о том, какой запрос от этого источника был обработан по HTTP.

9. Подтвердите реализацию ускоренных мобильных страниц (AMP)

Для любого, кто внедряет AMP, это важный, но простой шаг. Вы можете проверить, есть ли какие-либо проблемы с вашей страницей, добавив «# development = 1» к вашему AMP URL. Далее проверьте панель консоли . После этого вы сможете увидеть, есть ли какие-либо проблемы, предупреждения или ошибки. Он сообщит вам, в какой строке произошла ошибка, чтобы вы могли предпринять необходимые действия для ее устранения.

10. Анализ производительности во время выполнения

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

к проанализировать это , сделайте запись Временной шкалы. Вам нужно будет искать длинные события сценария Evaluate. Если таковые имеются, вы можете включить JS Profiler и повторно выполнить запись, чтобы получить более подробную информацию о том, какие функции JS были вызваны, а также о том, сколько времени они потребовали для загрузки.

11. Ищите статус HTTP

Когда вы находитесь на панели « Сеть», чтобы проверить настройки заголовков, вы также можете проверить наличие перенаправлений, проверив их статус HTTP. Это позволяет вам видеть не только перенаправления, но и типы перенаправлений и состояния ошибок.

12. Проверять и удалять куки

Панель « Приложения» позволяет просматривать подробную информацию о файлах cookie, а также удалять файлы cookie.

Как только вы откроете панель Cookies на левой панели, вы сможете просмотреть и удалить куки , а также изменить значения файлов cookie. Файлы cookie будут перечислены по доменам.

Источник: Разработчики Google

Есть несколько способов удалить куки, в том числе:

• Выберите файл cookie и нажмите кнопку удаления, чтобы удалить один конкретный файл cookie.
• Нажмите кнопку очистки, чтобы удалить все файлы cookie из группы.
• Щелкните правой кнопкой мыши значение cookie в домене, затем выберите «очистить все от» и удалите файлы cookie из выбранного домена.

13. Очистить хранилище

Иногда лучший выбор - просто стереть все данные. Для этого перейдите на панель « Очистить хранилище» на панели « Приложение» . Это позволяет отменить регистрацию сервисных работников, хранилищ и кешей. Если вы хотите очистить данные, установите флажки рядом с категорией, которую хотите очистить, и нажмите кнопку « очистить данные сайта. »

14. Проверьте анимацию

Источник: Разработчики Google

Вы можете использовать Chrome DevTools Animator Inspector для проверять и изменять анимацию на сайте. Чтобы получить к нему доступ, перейдите на панель « Стили» на панели « Элементы» и нажмите кнопку « Анимации» . Затем откроется вкладка рядом с Console Drawer, и ее можно будет использовать с любой панели DevTools.

Затем вы должны захватить анимацию, запустив анимацию, когда страница инспектора открыта. После захвата вы можете воспроизвести его, наведя курсор на миниатюру на панели « Обзор» , или щелкните и перетащите красную вертикальную полосу, чтобы очистить анимацию области просмотра.

Находясь на панели обзора, нажмите на группу анимации. Панель сведений предоставит каждой анимации свой собственный ряд. Чтобы выделить его в точке обзора, просто наведите курсор мыши на анимацию. Нажмите на анимацию, чтобы выбрать ее на панели « Элементы» .

Более темный левый раздел представляет определение анимации, в то время как блеклый правый раздел представляет итерации.

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

15. эмулировать датчики

Вы можете использовать DevTools для эмулировать датчики геолокации и акселерометра , Чтобы получить доступ к элементам управления датчиком, перейдите к «Дополнительные инструменты», а затем « Датчики».

Вы можете включить геолокацию, установив флажок « Эмулировать координаты геолокации» . Это переопределит значения положения для «navigator.geolocation». Он также будет имитировать случаи, когда данные геолокации недоступны.

Если вам нужно проверить данные, поступающие из API ориентации, установите флажок « Акселерометр» на панели «Датчики». Это позволит вам включить эмулятор акселерометра. Вы можете управлять тремя параметрами ориентации - вращением вокруг оси z, наклоном слева направо и наклоном вперед-назад.

Эти Chrome DevTools помогут вашему следующему SEO-аудиту работать более гладко!

Похожие

Комментарии