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

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

#DevTools #Accessibility #HTTP @productseo

Эмуляция особенностей зрения

1. Предположим, что у людей с возрастом начинают появляться проблемы со зрением. Посмотрим статистику опубликованную 3 ноября 2020 года: “Distribution of internet users worldwide as of 2019, by age group” (ссылка). Видим, что аж 17% пользователей >55 лет. По доступной мне статистике для Украины - около 20%.

2. Посмотрим конкретно на статистику по проблемам со зрением в USA (надеюсь, что в среднем коррелирует со всем миром) и видим 10% (ссылка).

3. Смотрим статистику по color blindness (дальтонизм и прочее: ссылка) и видим “1 из 12 мужчин”.

Это огромная часть аудитории, а потому делаю всегда 2 теста.

1. Setting -> More Tools -> Rendering -> Emulate vision deficiencies - проверка сайта “глазами дальтоника”

2. В Lighthouse проверка на ошибки Contrast ratio. Сейчас популярно сделать серенький текст, но на многих старых девайсах его просто не видно. (P.S. Мы в Flatfy уже работаем над новыми релизами, которые будут более user friendly.) И к тому же, есть вероятность попасть случайно под фильтр клоакинга (от англ. cloak — мантия, маска, прикрытие. Прием «чёрной» поисковой оптимизации, заключающийся в том, что информация, выдаваемая пользователю и поисковым роботам на одной и той же странице, различается.)

Просмотр HTTP-header

Заметил тенденцию, что за рубежом многие наши конкуренты перестают использовать HTML теги, например, meta robots и переходят на x-robots-tag (ссылка). P.S. В своих проектах я пока дублирую.

Из-за этого при анализе конкурентов или же сайтов с бэклинками на вас нужно смотреть еще и HTTP заголовки (ссылка).

Зачастую я использую 2 способа:

1. Открываем страницу -> DevTools -> Network -> Reload страницы -> Выбираем HTTP запрос и изучаем заголовки.

2. Если вы используете Terminal, то я люблю убивать сразу двух зайцев и смотреть через curl -I -L https://domain.com/url (еще и редиректы могу отловить, а если они есть, то увижу их цепочку). Еще цепочки можно смотреть через Network и галочку Preserve Log, но (ИМХО) не так удобно как в сurl.

Просмотр cookies, редактирование и удаление

Это прямо таки любимая тема в продуктах. Мы постоянно проводим различные AB тесты и часто они влияют на контент, который в свою очередь может влиять на ранжирование. И как мы все с вами знаем - GoogleBot всегда заходит как новый пользователь без cookie & cache. А это значит, что он будет постоянно получать случайные версии AB.

Потому всегда нужно следить за тестами и релизами продуктовой команды проверяя все ветки. В своей практике уже не раз встречал ситуации, когда позиции падают, а SEO не знают в чем дело. Идем смотреть cache Google и видим разные “интересности”, которые взялись из AB теста.

Заходим в DevTools -> Application -> Cookies и смотрим на список, изменяем данные в таблицах. Если данных нет, то перезагрузите страницу или сами cookie через кнопку reload.

Могу еще посоветовать плагин EditThisCookie для Google Chrome, если трудно менять через консоль. (ссылка)

Скриншот всей страницы (Full screen\size)

В продукте Flatfy я еще и отвечаю за локализацию (переводы) и иногда за адаптацию (учет особенностей определенных регионов) продукта (это уже больше общая работа всей команды). Так вот тут не обойтись без скриншотов. Как минимум для указания элементов сайта переводчикам (да, у нас есть автоматизация процесса, но бывают моменты…).

Открываем DevTools -> Cmd + Option + P или Ctrl + Shift + P -> вводим Capture full-size screenshot.

Скриншот будет добавлен в Downloads.

Проверка HTTP/2

Google перешел на сканирование через HTTP/2 (ссылка), а значит, что стоит проверить 🙂

DevTools -> Network -> Правой кнопкой на строку с колоссами и найти Protocol -> добавить колонку -> перезагрузить страницу.

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

Источник новости https://t.me/productseo/8...