Chrome Dev Tools: 7 фишек для SEO анализа в инструментах разработчика Chrome > NetPeak - Независимость и осознанность
NetPeak Biz Tech    


Chrome Dev Tools: 7 фишек для SEO анализа в инструментах разработчика Chrome

Chrome Dev Tools: 7 фишек для SEO анализа в инструментах разработчика Chrome

< >

Chrome DevTools — набор инструментов для веб-разработчика, встроенный в браузер Google Chrome. Он помогает быстро редактировать страницы и диагностировать проблемы. Весьма полезен для разработчиков. Но что он дает SEO-специалисту? Об этом и поговорим.

Как открыть DevTools

Чтобы открыть DevTools, кликните правой кнопкой мыши на элемент и выберите «Просмотреть код».

Или нажмите:

  • Command+Option+C или Command+Option+I для Mac OS;
  • Ctrl+Shift+C или Ctrl+Shift+I для Windows, Linux, Chrome OS;
  • F12 также для Windows.

А теперь расскажу подробнее о том, какие возможности дает этот инструмент.

Сравнение визуализированного и исходного HTML

Вы можете сравнить исходный HTML (до выполнения JavaScript) с визуализированным (после выполнения JavaScript).

Как просмотреть исходный HTML-код:

  • Command+U (Mac OS) или Ctrl+U (Windows, Linux, Chrome OS) ;
  • щелкните правой кнопкой мыши и выберите «Просмотр кода страницы»;
  • введите view-source: https://example.com в своем браузере.

Визуализированный HTML — это в основном то, что вы видите в DOM. Получите доступ к коду, используя:

  • Command+Option+I (Mac OS) или CTRL+Shift+I (Windows) ;
  • Нажать F12 и перейти на вкладку Elements.

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

Анализ протокола безопасности

В панели Chrome DevTools есть информация о безопасности текущей страницы и данные о сертификате безопасности. Чтобы ее увидеть, перейдите на вкладку Security.

Показывает не только подключение вашего сайта, но и сторонних сервисов (блок Overview).

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

Chrome DevTools пригодится во время перехода на HTTPS.

Копирование ключевых паттернов

Вы можете скопировать элементы XРath, JSPath и CSS Selectors.

Например, вам нужно спарсить цены с сайта с помощью Netpeak Spider. Для этого надо знать ХPath элемента цены.

Что необходимо:

  1. Открыть страницу товара и выделить цену.
  2. Щелкнуть по ней правой кнопкой и нажать «Показать код элемента» (Inspect в англоязычном интерфейсе).
  3. В открывшемся окне найти элемент, отвечающий за цену (он будет подсвечен).
  4. Кликнуть по нему правой кнопкой и выбрать «Копировать» → «Копировать XPath».

Такое копирование ключевых паттернов очень важно для сканирования и сбора определенных элементов на сайте.

Просмотр внешнего вида сайта для мобильного устройства

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

В панели инструментов DevTools на сайте нажмите на кнопку с телефоном.

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

  1. Из предложенного списка можно выбрать конкретную модель смартфона.

А если нужного устройства в списке нет, нажмите Edit:

  • дальше выберите из списка;

  • или добавьте свое устройство, нажав Add custom device.

Чтобы добавить устройство, вам понадобятся его параметры.

  1. Разрешение эмулируемого экрана можно изменить, если в поле типа устройства стоит Responsive. Выбрав определенный тип, разрешение уже не изменить.

  1. При типе устройства Responsive можно выбрать его вид.

  1. Есть опция изменить масштаб отображения, чтобы результат лучше вписывался в панель эмулятора.

  1. Скорость сети. Меню регулирования режима позволяет имитировать мобильное устройство низкого или среднего уровня:
  • Mid-tier mobile имитирует быстрый 3G и снижает скорость вашего процессора в 4 раза;
  • Low-end mobile имитирует медленный 3G и замедляет процессор в 6 раз.

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

  1. Кнопка переключения книжной/альбомной ориентации.

Еще одно меню позволяет отображать или скрывать дополнительные элементы управления:

  • если выбрана определенная модель телефона или планшета, можно включить/выключить отображение рамок устройства;
  • включить/выключить панель медиа-запросов CSS;
  • включить/выключить линейки пикселей;
  • добавить соотношение пикселей устройства;
  • добавить функционал выбора девайса, чтобы увидеть отображение под разные виды устройства. Работает только для типа Responsive, а не для конкретной модели;
  • сделать снимок экрана. Если включена рамка девайса, то скрин получится вместе с ней;

  • сделать снимок экрана на всю страницу.

Также вы можете масштабировать сайт, как это делал бы пользователь:

  1. Наведите указатель на устройство, чтобы увидеть круговой «сенсорный» курсор.

  1. Удерживая нажатой клавишу Shift, щелкните и переместите мышь, чтобы имитировать масштабирование. Оно реагирует на сенсорные события JavaScript, такие как touchstart, touchmove и touchend.

Этим же функционалом можно анализировать выдачу поисковой системы на мобильных устройствах.

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

Региональная поисковая выдача

Позволяет анализировать поисковую выдачу в разных геолокациях.

Лучше всего зайти на страницу в гостевом режиме. В верхней панели Google Chrome нажмите на изображение пользователя и выберите «Гость».

  1. Заходите в дополнительные инструменты — Sensors.

  1. Внизу панели DevTools откроется вкладка Sensors.

  1. Теперь нужно выбрать локацию.

Можно это сделать с помощью предложенного списка.

Или прописать новую геолокацию:

  • нажимаете Manage;

  • выбираете Add location, внизу появится новая строка для ввода данных геоточки;

  • вводите название;
  • географическую широту Lat в формате десятичных градусов;
  • географическую долготу Long в формате десятичных градусов;
  • Timezone ID — обычно это регион и город;
  • Locale — указываете язык в формате ISO 639-1 и регион в формате ISO 3166-1 Alpha 2.

Параметры геолокации вы легко найдете в Google Maps.

Допустим, вам нужно добавить Вашингтон. Прописываете данные новой геоточки, нажимаете Add.

После чего:

  • вводите, например, запрос «cafe» в поисковой выдаче (запрос нужно вводить на языке, указанном в Locale) ;
  • открываете панель DevTools и заходите в Sensors;
  • выбираете регион Вашингтон.

Спускаетесь на странице поиска вниз и кликайте «Обновить».

Вверху в строке поиска нажимаете на знак лупы.

И вы получите выдачу по Вашингтону.

Поисковые системы уже давно регионально зависимые. Если в одном регионе запрос может быть в ТОПе, в другом — необязательно. DevTools удобен как раз для проверки позиций поисковых запросов и получения данных для анализа разницы выдачи в разных регионах.

Анализ скорости на сайте

Существует множество сторонних инструментов для быстрого аудита скорости вашего сайта, включая Google PageSpeed ​​Insights, WebPageTest, Pingdom Tools.

Lighthouse — это открытый ответ Google на инструменты аудита, встроенный в сам Chrome.

Чтобы получить к нему доступ, необходимо:

  1. Открыть Chrome DevTools.
  2. Перейти на вкладку Lighthouse и выбрать Generate report.

Вы получите отчет по скорости загрузки с оценкой от Google.

С рекомендациями и диагностикой.

Скорость сайта — один из самых важных факторов ранжирования. Lighthouse дает полный анализ и рекомендации по улучшению скоростных показателей вашего сайта.

Выявление «мертвого» кода

Иногда в ваших файлах CSS и JS будет много лишнего кода, который не используется на странице. В Chrome есть функция под названием Coverage:

  1. Необходимо перейти в панели DevTools в дополнительные инструменты и выбрать Coverage.

  1. Внизу появится панель Coverage, которую нужно обновить.

  1. Теперь вы можете узнать процент неиспользуемых CSS и JS в загруженных файлах. Щелкните по одному из них и увидите используемые и неиспользуемые строки кода красным и синим цветом соответственно.

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

Заказывайте SEO-продвижение у лидеров рынка

Фишки на «закуску»

В конце хочется рассказать еще о парочке опций от DevTools. Их редко используют именно SEO-специалисты, но они могут оказаться полезны.

Структурирование кода

Хотя минифицированный код (без «мертвых» элементов) хорош для производительности, очень сложно, глядя на такой сплошной код, понять, что он делает.

В инструментах разработчика Chrome есть удобная функция для отмены минимизации. То есть код будет с отступом и разделен на четко определенные разделы. Его будет легче понять при необходимости технических изменений.

  1. Перейдите в панель DevTools.
  2. На вкладке Elements кликните любой ресурс, который минимизирован, например CSS, JS или HTML.

  1. Новая панель загрузит содержимое, вы увидите фигурные скобки { }.

  1. Нажмите на них, и Chrome структурирует ваш код.

Снимок экрана веб-страницы в Chrome

Знали ли вы, что в Google Chrome есть встроенная функция создания снимков экрана?

Если хотите сделать скриншот всего сайта:

  1. Откройте DevTools на нужной странице.
  2. Нажмите Ctrl+Shift+P на Windows, Linux, Chrome OS или Command+Option+P на Mac OS, чтобы загрузить комaндное меню DevTools.
  3. Введите в рабочую строку Screenshot и выберите нужный вариант.

  1. Снимок экрана будет добавлен в вашу папку загрузок.

Запомнить:

  1. Набор инструментов DevTools от Chrome предоставляет уйму возможностей для оптимизации сайта.
  2. Среди них анализ разницы между исходным и визуализированным HTML-кодом, анализ безопасности веб-страницы, возможность скопировать ключевые элементы XPath, JSPath и CSS Selectors.
  3. Есть много инструментов для изучения мобильной версии сайта. Можно посмотреть, как выглядит ваша страничка на экране конкретного гаджета, какая у нее скорость загрузки или как происходит масштабирование.
  4. Сравнение поисковой выдачи вашего сайта в разных геолокациях, анализ скорости и выявление «мертвого кода».
  5. И наконец возможность структурировать код или сделать снимок экрана страницы в Chrome.

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

Артем Бородатюк о бизнесе и том, как он меняет мир Андрей Чумаченко о маркетинге, управлении собой и агентством Читать Читать

Подписывайтесь на Telegram-каналы основателей Netpeak



Комментарии:

Google My Business: как локальному бизнесу получать 1000+ бесплатных запросов

Google My Business: как локальному бизнесу получать 1000+ бесплатных запросов 7 советов для оптимизации вашего профиля в Google Мой Бизнес....

20 06 2025 8:14:56

Как создать графическое объявление в Google Рекламе

Как создать графическое объявление в Google Рекламе Многие не догадываются о том, что в КМС Google можно разместить и редактировать графические объявления онлайн...

19 06 2025 0:36:56

Как настроить Facebook Business Manager для удобной работы

Facebook + Instagram, Business Manager + основная бизнес-страница на Facebook, BM + рекламный аккаунт и так далее....

18 06 2025 16:43:36

Как настроить максимально объективную веб-аналитику и отладить работу отдела контекстной рекламы? Мануал не для чайников

Как настроить максимально объективную веб-аналитику и отладить работу отдела контекстной рекламы? Мануал не для чайников Почему бизнесу нужно настраивать мультикaнaльную модель атрибуции на основе воронки продаж и как это сделать....

17 06 2025 14:31:38

Рамиль Мухоряпов: «Мы стали драйвером развития электронной коммерции в Казахстане»

Рамиль Мухоряпов: «Мы стали драйвером развития электронной коммерции в Казахстане» История создания и развития холдинга «Choco Family» помогает понять масштабы онлайн-рынка Казахстана, найти точки роста для собственного бизнеса в Казнете. Каково быть пионером ecommerce в стране? Чем казахстанский рынок e­commerce отличается от Рунета и Уанета? Читать!...

16 06 2025 14:48:22

Дамир Халилов о медиа маркетинге в социальных сетях

Дамир Халилов о медиа маркетинге в социальных сетях Книга про пять полезных фишек + стратегия продвижения интернет-магазина...

15 06 2025 9:34:56

KPI в социальных медиа

KPI в социальных медиа Все про kpi охват в социальных медиа или как оценивать эффективность работы SMM-специалиста?...

14 06 2025 9:25:49

Как удалить себя из социальных сетей

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

13 06 2025 6:11:36

Макс Бурцев (Arriba): «Некреативных людей придумало общество»

Макс Бурцев (Arriba): «Некреативных людей придумало общество» О работе, креативности, мотивации и многом другом....

12 06 2025 7:15:10

Какому бизнесу нужно отслеживать позиции в выдаче?

Какому бизнесу нужно отслеживать позиции в выдаче? Клиентам не нужно ориентироваться на попадание к поисковым топам выдачи...

11 06 2025 2:46:29

A/B тестирование в email-маркетинге: что это, типы, и топ идеи для сплит тестирования

Как понять, что именно нравится подписчикам в вашей рассылке...

10 06 2025 8:19:14

Как динамическая подмена заголовка влияет на конверсии

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

09 06 2025 0:49:50

Core Web Vitals: что это такое и как работает

Core Web Vitals: что это такое и как работает В мае прошлого года Google анонсировал выход нового Core Web Vitals. Что это и как будет работать рассмотрим в статье...

08 06 2025 16:31:11

Алгоритм EAT — за квалифицированный контент. Что это значит для SEO

Алгоритм E-A-T теперь следит за экспертностью, авторитетностью и достоверностью контента. Что это значит?...

07 06 2025 8:37:21

Топ расширений Google Chrome для ASO-специалиста

Топ расширений Google Chrome для ASO-специалиста Chrome Extensions экономят время тех, кто продвигает мобильные приложения...

06 06 2025 10:55:52

SEO-анализ конкурентов: подробное руководство

SEO-анализ конкурентов: подробное руководство Как узнать особенности бизнеса в нише и что позаимствовать у конкурентов для SEO...

05 06 2025 9:14:18

Как поисковые системы индексируют сайт

Как поисковые системы индексируют сайт Система индексирования страниц — как поисковик и его роботы разбирают перечень контента по полочкам...

04 06 2025 9:33:38

17 неочевидных и пpaктически применимых фишек SaaS Nation 2018

17 неочевидных и пpaктически применимых фишек SaaS Nation 2018 Лучшие маркетинговые и бизнес-фишки от Давида Брауна (Weblium), Владислава Флакса (OWOX), Александра Галкина (Competera), Люси Литерадо (Reply.io), Вадима Нехая (Depositphotos), Валерия Грабко (PromoRepublic), Игоря Дебатура (Uploadcare), Руслана Савчишин...

03 06 2025 5:47:53

Частые ошибки в email-маркетинге: исправляем ошибки в email рассылках и письмах

Частые ошибки в email-маркетинге: исправляем ошибки в email рассылках и письмах К чему стоит относиться с особенным вниманием при отправке рассылок. Грамматические ошибки, тема, прехедер и другие стратегически важные составляющие письма. Узнать больше!...

02 06 2025 15:58:39

Эффективная рекламная кампания — обзор автостратегий в Яндекс.Директ

Эффективная рекламная кампания — обзор автостратегий в Яндекс.Директ Как использовать автостратегии для экономии рекламного бюджета...

01 06 2025 21:21:40

Бесплатный SEO-аудит на примере AIN.ua

Обойдемся без теории, зато покажем пример SEO-аудита...

31 05 2025 13:45:17

Как завоевать доверие подписчиков email-рассылки в США. Опыт eSputnik

Как завоевать доверие подписчиков email-рассылки в США. Опыт eSputnik Система почтового маркетинга. Как удержать доверия подписчиков одним приветственным письмом...

30 05 2025 22:26:17

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017

Сколько стоил клик в Google Ads и Facebook в Украине в третьем квартале 2017 Данные по более 26 млн кликов в 23 тематиках и 402 городах Украины...

29 05 2025 22:25:18

Как проходила первая интернатура в Serpstat: опыт отдела Quality Assurance

Как проходила первая интернатура в Serpstat: опыт отдела Quality Assurance HR-советы компаниям, которым нужно найти больше трех джунов в проект...

28 05 2025 8:37:38

Трендовые инструменты в диджитал-маркетинге и рекламе — новое исследование Gartner

Трендовые инструменты в диджитал-маркетинге и рекламе — новое исследование Gartner В 2019 году в цикл зрелости вошли 28 технологий и инструментов...

27 05 2025 9:15:21

Где лучше догонять пользователей: в Facebook или Google Рекламе — кейс интернет-магазина

Где лучше догонять пользователей: в Facebook или Google Рекламе — кейс интернет-магазина При использовании похожих инструментов важно не переборщить с количеством рекламы...

26 05 2025 8:12:50

Как настроить рекламу в Facebook Messenger, Instagram Direct и даже WhatsApp

Как настроить рекламу в Facebook Messenger, Instagram Direct и даже WhatsApp Что нужно знать перед запуском рекламы в мессенджерах....

25 05 2025 7:47:30

Внутренняя кухня SEO: считаем рентабельность блога и возвращаем трафик на сайт UniSender

Внутренняя кухня SEO: считаем рентабельность блога и возвращаем трафик на сайт UniSender Очередной красивый пост о продвижении платформы email и sms-рассылок — UniSender...

24 05 2025 1:52:58

Правила преобразования фидов в Google Merchant Center

Правила преобразования фидов в Google Merchant Center Правила преобразования фидов в Google Merchant Center помогут сегментировать товары и сделать вашу рекламу более эффективной...

23 05 2025 22:50:56

Семантическое ядро: сервисы для автоматического сбора запросов

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

22 05 2025 0:59:10

Выгорание на работе: как сохранить интерес и продуктивность. Личный опыт директора по маркетингу

1 — меняй работу внутри работы, 2 — выбери то, что нравится больше всего и старайся делать это чаще, 3 — придумай себе развлечения. Подробности — в посте. Читать дальше....

21 05 2025 18:52:53

Как устроен маркетинг в OLX.ua — рассказывает Marketing Director Алексей Ломоносов

Не стучитесь к Алексею на ФБ с предложением что-то придумать для бренда. У Ломоносова целый тред таких непрочитанных сообщений. Узнать больше....

20 05 2025 22:24:33

Падение Facebook: о чем задуматься пользователям «больших сайтов»

Падение Facebook: о чем задуматься пользователям «больших сайтов» О чем стоит задуматься владельцам бизнеса и пользователям больших сайтов и почему Марку Цукербергу надо брать пример с телефонных сетей...

19 05 2025 22:28:13

Что такое XML-feed: как его создать и отредактировать

Что такое XML-feed: как его создать и отредактировать XML-фид представляет собой файл с кодом на языке XML, ссылку на который используют в различных сервисах...

18 05 2025 23:52:23

Алгоритм LSA для поиска похожих документов

Алгоритм LSA для поиска похожих документов Наши сотрудники смогли составить разбор непростых вещей, дать им определение и рассказать о них простым языком....

17 05 2025 14:59:26

Дэн Ариэли про пятничную усталость от правильных решений

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

16 05 2025 21:35:49

Apple тайно рекламирует приложения в гугле? Что это значит.

Apple тайно рекламирует приложения в гугле? Что это значит. Давайте разбираться, в чем именно обвиняют техногиганта разработчики и действительно ли такую рекламу считают циничной....

15 05 2025 22:50:32

Как мы подняли МRR с нуля до 24 тысяч долларов без бюджета, комaнды и маркетинговой стратегии

Как мы подняли МRR с нуля до 24 тысяч долларов без бюджета, комaнды и маркетинговой стратегии Опыт стартапа Paperform для стартаперов, которые боятся начать из-за ограниченного бюджета и/или отсутствия знаний в маркетинге. Надеемся, эта история вдохновит предпринимателей и поможет меньше сомневаться на счет запуска без бюджета....

14 05 2025 19:25:14

Кликбейт-заголовки — всё: почему лента Facebook станет лучше

Кликбейт-заголовки — всё: почему лента Facebook станет лучше Кликбейтинг в опасности. Если хочешь узнать методы работы антикликбейт-комaнды Facebook, просто нажми на этот заголовок...

13 05 2025 20:36:38

Как достичь роста дохода на 172% за 10 месяцев, когда среди конкурентов — аптеки. SEO для Amrita

Как достичь роста дохода на 172% за 10 месяцев, когда среди конкурентов — аптеки. SEO для Amrita Продвижение монобренда: особенности, трудности, подводные камни. Ниша здоровья и красоты....

12 05 2025 8:19:36

Инсталлы по цене пирожка — кейс Apple Search Ads для приложения OLX Украина

Инсталлы по цене пирожка — кейс Apple Search Ads для приложения OLX Украина Как с помощью рекламы в Apple Search Ads получить дешевые установки и привлечь релевантных пользователей среди владельцев айфонов...

11 05 2025 1:26:30

Топ 5 лучших вебинаров для онлайн-предпринимателей

Топ 5 лучших вебинаров для онлайн-предпринимателей Бесплатный образовательный проект для предпринимателей Netpeak Cluster предлагает пять своих лучших вебинаров о нюансах онлайн-продвижения...

10 05 2025 13:35:34

Как и зачем переводить рекламные кампании на украинский — эксперимент и полезные формулы

Как и зачем переводить рекламные кампании на украинский — эксперимент и полезные формулы При создании рекламы на украинском мы завоевываем большую долю рынка без повышения цены за клик....

09 05 2025 18:48:24

Как разработать эффективное поисковое объявление по новым правилам Google — адаптивное поисковое объявление

Как разработать эффективное поисковое объявление по новым правилам Google — адаптивное поисковое объявление Происходит все большая автоматизация рекламы от Google. И это хорошо....

08 05 2025 16:39:42

Как создать рассылку push-уведомлений. Чек-лист эффективной рассылки от Notix

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

07 05 2025 22:59:27

Девять фишек для онлайн-бизнеса: итоги круглого стола Netpeak Friends Day в Казахстане

Девять фишек для онлайн-бизнеса: итоги круглого стола Netpeak Friends Day в Казахстане Девять свежих советов для продвижения интернет-магазинов...

06 05 2025 12:37:41

Какие списки ремаркетинга выбрать — исследование

Какие списки ремаркетинга выбрать — исследование Что мы узнали после 19 миллионов показов рекламных объявлений по разным спискам ремаркетинга....

05 05 2025 9:42:34

Что такое вес страниц и на что он влияет

Что такое вес страниц и на что он влияет Вес страниц — один из факторов ранжирования в поисковых системах Google и Яндекс....

03 05 2025 21:35:32

Сайт на Ajax: как отдельным страницам попасть в выдачу

Как вывести в индекс страницы сайта на Ajax: от необходимости их создания, роли SEO, ускорении индексации и реальные рекомендации всего в трех пунктах, чтобы основное преимущество таких сайтов работало безотказно...

02 05 2025 22:20:16

Еще:
понять и запомнить -1 :: понять и запомнить -2 :: понять и запомнить -3 :: понять и запомнить -4 :: понять и запомнить -5 :: понять и запомнить -6 :: понять и запомнить -7 ::