Получение максимальной отдачи от Google Chrome для технического SEO

1. 2. Сделайте полноразмерные скриншоты веб-страницы в Chrome
2. 3. Переключите ваш пользовательский агент в Chrome
3. 4. См. Мобильный и планшетный вид из Chrome
4. 6. Посмотрите на сетевой водопад в Chrome
5. 8. Украсить код для отладки в Chrome
6. 9. Быстрая проверка, если веб-сервер поддерживает HTTP / 2
7. 10. Группировка товаров в Chrome
8. 11. Облегчение чистки с помощью Chrome
9. 12. Определение мертвого кода на ваших страницах

Сайджо Джордж

Когда вы думаете об инструментах, наиболее часто используемых специалистами по SEO, что приходит на ум? Я решил спросить нескольких экспертов, и вот ответы, которые я получил:

Пол Шапиро : KNIME , общий , Кричащая лягушка

Джошуа Хардвик : Кричащая лягушка , URL Profiler , SeoTools для Excel

Джон-Генри Шерк : SiteBulb , Ahrefs , Hunter.io

Я также есть список инструментов SEO что я возвращаюсь снова и снова. Однако большинство из нас (включая меня) до сих пор забывают об одном из наиболее часто используемых инструментов SEO, о котором большинство из нас использует каждый день, не задумываясь. И угадай что? Вам даже не придется выходить из браузера, чтобы использовать его, потому что это инструменты, которые уже являются частью вашего браузера! (Мне, вероятно, не нужно было все это наращивание с этим названием 🤷)

Вот так, Гугл Хром - самый используемый в мире веб-браузер на данный момент - имеет целый набор инструментов разработчика, идеально подходящих для технического SEO-анализа и тестирования. Просто нажмите кнопку меню Chrome, и в разделе «Дополнительные инструменты» вы найдете «Инструменты разработчика» (или, для тех, кто предпочитает сочетания клавиш, нажмите Ctrl + Shift + I на ПК / Command + Option + I на Mac) , Вы также можете щелкнуть правой кнопкой мыши на странице и выбрать «Осмотреть», чтобы открыть инструменты разработчика.

Сегодня я собрал список самых полезных и часто упускаемых из виду ярлыков Chrome для технических SEO-специалистов - для просмотра этого шпаргалки может потребоваться 5-10 минут, но вы сэкономите часы времени, работая в долгосрочной перспективе.

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

а. После запуска инструментов разработчика.
б. Выберите три вертикальные точки рядом с кнопкой закрытия.
с. Ищите «Дополнительные инструменты» >> «Датчики».
д. Здесь вы найдете раскрывающееся меню рядом с настройками «Геолокация» - выберите страну, в которой вы хотите просмотреть свой сайт, и перейдите.

Вы также можете добавить Координаты широты и долготы для более точного нацеливания.

2. Сделайте полноразмерные скриншоты веб-страницы в Chrome

Знаете ли вы, что Google Chrome имеет встроенную функцию снимка экрана? Легко доступный через набор инструментов разработчика в режиме Inspect Element, это отличный способ быстро получить снимки вашего сайта, чтобы дать обзор изменений для вашей команды разработчиков. Когда вы хотите сделать полный снимок экрана сайта:

а. Откройте Инструменты разработчика с этой страницы.
б. Нажмите (Ctrl + Shift + P на ПК / Command + Option + P на Mac), чтобы загрузить меню команд DevTools.
с. Введите «Снимок экрана» и нажмите «Сделать снимок экрана в полном размере».
д. Скриншот будет добавлен в вашу папку загрузок.

3. Переключите ваш пользовательский агент в Chrome

Будучи SEO, вы можете проверить, как различные посетители или боты видят ваш сайт и взаимодействуют с ним. Хотя расширения вроде Переключатель User-Agent популярны в интернет-магазине Chrome, вы можете переключать его самостоятельно без каких-либо расширений:

а. Вывод на экран инструментов разработчика.
б. Выберите три вертикальные точки рядом с кнопкой закрытия.
с. Ищите «Дополнительные инструменты» >> «Условия сети».
д. Здесь вы найдете опцию для User Agent, снимите флажок «Выбрать автоматически».
е. Оттуда вы увидите возможность выбрать предварительно сконфигурированный пользовательский агент из выпадающего списка или ввести свою собственную пользовательскую строку UA. Вуаля! Полный контроль над настройками агента пользователя.

Интересный совет: вы заметили, как та же страница выглядит по-разному на этих двух устройствах ? На Android блок-цитаты выглядят как Android-SMS-блоки, а на iPhone они похожи на SMS-пузыри с iOS (этой статье было несколько лет, поэтому с тех пор она имитировала дизайн ОС). Вероятно, это хорошая идея для них Vary: ответ заголовка User-Agent для этой страницы с точки зрения SEO.

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

4. См. Мобильный и планшетный вид из Chrome

Наблюдение за тем, как ваш веб-сайт выглядит и загружается на разных устройствах, является фундаментальным шагом в обеспечении того, чтобы вы обеспечивали хороший, оптимизированный пользовательский интерфейс. Что ж, Developer Tools позволяют вам переключать «Режим устройства» под маленьким значком смартфона в верхнем левом углу меню DevTools. Если вы устраняете проблемы с адаптивностью и оптимизацией мобильных устройств на нескольких платформах, то буквально все ваши устройства будут открыты перед вами. Благодаря «Режиму устройства» быстрые переключения выполняются простым щелчком мыши. Вы можете просмотреть страницу на ряде предварительно определенных устройств или добавить пользовательский размер экрана. Вы также можете эмулировать удушение ЦП для мобильных устройств низкого и среднего уровня и переключаться между альбомным и портретным режимами.

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

Работая над более техническим SEO, важно быстро взглянуть на ответ заголовка сервера. Страница отправляет правильный ответ заголовка? Это перенаправление на другую страницу? Указан ли канонический в шапке? Это все, на что вы можете ответить, посмотрев на ответ заголовка - и вы не знаете, вы можете увидеть ответ заголовка в Chrome:

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

6. Посмотрите на сетевой водопад в Chrome

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

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

Почему это полезно? Что ж, Network Waterfall Modeling - это полезный способ диагностики проблем с производительностью на вашем сайте. Проблемы визуально проявляются в формате водопада, помогая идентифицировать изображения, которые загружаются слишком медленно, идентифицировать сценарии блока рендеринга или даже видеть, делают ли активы несколько запросов на подключение и т. Д.

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

Существует множество сторонних инструментов для быстрого аудита производительности вашего сайта, в том числе Google PageSpeed ​​Insights , WebPagetest , Инструменты Pingdom а также бесчисленное множество других , Маяк это открытый от Google ответ на инструменты аудита, в том числе специальные аудиты на предмет «производительности, доступности, прогрессивных веб-приложений и т. д.». Ну, угадайте, что - Google Lighthouse встроен в сам Chrome. Чтобы получить к нему доступ, начните с:

а. Вывод на экран инструментов разработчика .
б. Перейдите на вкладку «Аудит», и у вас будет возможность установить флажки для соответствия стандартам Progressive Web App, соответствует ли оно стандартам Google «Best Practices», как оно работает и доступно ли оно для пользователей Интернета с ограниченными возможностями.

8. Украсить код для отладки в Chrome

Хотя минимизированный код хорош с точки зрения производительности, при взгляде на код очень трудно попытаться выяснить, что он делает. Но не волнуйтесь - Google вас покроет. В Chrome Developer Tools есть удобная функция, которая позволяет вам минимизировать (или «украсить») код. Это означает, что код будет с отступом и разделен на четко определенные разделы, так что его будет легче понять, если потребуется внести технические изменения. Код вашего сайта легко украсить следующим образом:

а. Вывод на экран инструментов разработчика.
б. Нажмите на любой актив, который минимизирован, как CSS, JS или HTML.
с. Новая панель загружает содержимое, и вы увидите 2 фигурные скобки {} в левом нижнем углу этой панели. Нажмите на это, и Chrome украсит вам минимизированный код.

9. Быстрая проверка, если веб-сервер поддерживает HTTP / 2

Есть много доступных плагинов, которые могут сказать вам, если сервер поддерживает HTTP / 2. Привет, мы даже сделали массовую постоянную проверку соединения , Это может сказать вам, если сервер поддерживает HTTP / 2 среди других вещей. Но, по правде говоря, если вы счастливы получить представление о инструментах разработчика (что, я полагаю, так и есть, если вы сделали это так далеко в этом списке), вы можете просто использовать это. Начать с:

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

Pro Совет: просто имейте в виду, чтобы не отключите HTTP / 1, так как робот Google по-прежнему сканирует, используя HTTP / 1 ,

10. Группировка товаров в Chrome

Иногда вы хотите что-то немного проще, чем полный список всех различных ресурсов, загружаемых сайтом. Что ж, в Developer Tools есть опция представления «Группировка продуктов», которая разбивает эти ресурсы на четкие группы в зависимости от домена, типа ресурса и т. Д. Чтобы увидеть их:

а. Откройте окно «Инструменты разработчика».
б. Нажмите на вкладку «Сеть» и перезагрузите страницу.
с. У меня обычно включены столбцы «Домен» и «Тип», просто щелкните правой кнопкой мыши по одному из заголовков в разделе «Сеть» и выберите нужные.
д. Вы можете щелкнуть левой кнопкой мыши по этим заголовкам, чтобы отсортировать столбцы в порядке возрастания или убывания.

11. Облегчение чистки с помощью Chrome

Соскоб является хлебом с маслом технического SEO , но работа с xpath может быть немного утомительной. Но знаете ли вы, что Chrome может легко сгенерировать xpath для любых элементов, которые вы видите на странице, всего за пару кликов, что значительно облегчит вашу жизнь.

а. Щелкните правой кнопкой мыши элемент на странице, для которого вы хотите использовать xpath, и выберите «Инспектировать».
б. HTML-код элемента должен быть выделен на панели инструментов разработчика. Щелкните правой кнопкой мыши этот HTML-код и выберите «Копировать» >> «Копировать XPath», xpath скопируется в буфер обмена.

12. Определение мертвого кода на ваших страницах

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

а. Вывод на экран инструментов разработчика.
б. Выберите три вертикальные точки рядом с кнопкой закрытия.
с. Ищите «Дополнительные инструменты» >> «Покрытие».
д. Нажмите на значок «Перезагрузить».
е. Теперь вы можете увидеть процент неиспользованных CSS и JS в загруженных файлах, вы можете щелкнуть по одному из них, и он покажет вам используемые и неиспользованные строки кода зеленым и красным соответственно.

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

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

Похожие

Комментарии