Product SEO

Пускай первый пост в этом канале будет техническим.

Полезные функции Chrome Dev Tools для SEO`шников. Часть 1.

Про ⌘ + ⌥ + I я писать не буду 🙂 Но пойдем по нарастающей.

Изменить User-Agent
Settings (три точки) -> More Tools -> Network Conditions
Убираем галочку с Select automatically и выбираем нужный User Agent. В списке даже сразу есть GoogleBot`ы.

Иногда при аудите нужно проверить как сайт ведет себя с разными агентами + бывают заблокированные ресурсы только для Google Bot на которые хотелось бы взглянуть. Если они проверяют только по UA без проверки Reverse DNS, то этот метод нам подходит.
Есть аналогичные плагины, но а) не все удобные; б) зачем держать лишний плагин, если уже есть функционал?

Изменяем локацию
Settings -> More Tools -> Sensors
Выбираем в выпадающем меню Location.

Я частенько изучаю международные проекты и мне важно знать как сайты реагируют на смену локации и делают ли редиректы и т.д.

Отключить JavaScript

Вариант 1
Command ⌘ + Shift ⇧ + P для MacOS или Control+Shift+P для WIN

В поле вводим Disable и видим в рекомендациях Disable JavaScript -> Кликаем.
Далее перезагружаем страницу через Command ⌘ + R (Control + R)
После того как проанализировали страницу, то включаем обратно командой Enable JavaScript и перезагрузкой страницы.

Сейчас очень важно! Да, поисковые системы следят за трендами SPA, PWA сайтов и модных React, но все же, например, алгоритм определения того, что рендерить, а что нет (Google же не нужно тратить ресурсы на выполнение кода аналитики. Хотя бывает и такое) - не идеален и лучше пока делать максимум SSR, а потому проверять весь ли важный контент есть сразу в коде без JS.

Вариант 2
Как можно отключить не только JS, а какой-то определенный паттерн.
Settings (три точки) -> More Tools -> Network request blocking
Выбираем Add Pattern и вписываем, например, .js

Кстати, это можно было сделать и немного быстрее.
Command ⌘ + Shift ⇧ + P для MacOS или Control+Shift+P для WIN -> Show Network request blocking.
Поиграйтесь с полнотекстовым поиском и, возможно, найдете что-то интересное. Делитесь кейсами 🙂

Данный “Вариант 2” крут тем, что вы можете поиграть со скоростью загрузки убирая определенные элементы. Например, отключить с сайта какую-то рекламную сеть и проверить насколько она влияла на скорость загрузки (показатели Lighthouse).

Проверка неиспользуемых ресурсов на странице
Settings (три точки) -> More Tools -> Coverage
В столбце Usage Visualisation вам будет видно, что не использовалось. А дальше дело за тем, чтобы разобраться за что отвечают данные ресурсы и почему они не использовались. Возможно, что они нужны, а может это просто Legacy код, который забыли удалить.

Больше функций будет завтра 🙂 Если нужно видео о том, как все это делать на практике и кейсы использования, то пишите в комментарии (пока на FB).

by @productseo