инструменты / панель для браузера
SEO-панель для браузера
Открывает поверх любой страницы окно с её разбором: заголовки, мета-теги, ссылки, картинки без alt, микроразметку, объём текста и исходный код. Читает страницу, уже загруженную у вас в браузере; ради вкладки «Исходный код» панель при каждом открытии ещё раз запрашивает у сайта ту же страницу.
Что она показывает
- Обзор — Title, Description, canonical, meta robots, язык, счёт заголовков по уровням. Сразу видно, чего нет.
- Заголовки — все H1–H6 подряд, с отдельной колонкой «Ошибка»: второй H1, пропущенный уровень, пустой заголовок.
- Ссылки — внутренние и внешние по отдельности, с анкором и атрибутом rel.
- Картинки — тремя группами: без alt, с пустым alt, с alt. Пустой alt и отсутствующий — разные вещи, поэтому и группы разные.
- Мета и микроразметка — Open Graph, Twitter-карточка и все узлы JSON-LD с проверкой на разбор.
- Текст — объём видимого текста, скрытые блоки отдельно.
- Исходный код — HTML, каким его отдал сервер, а не каким его собрал браузер. Разница видна сразу.
- Скорость — в расширении настоящий замер через API Google PageSpeed Insights. В закладке — ссылка на нашу проверку скорости: ключ Google в открытый скрипт класть нельзя.
Кнопка-закладка
Перетащите эту кнопку на панель закладок браузера — и она будет открывать панель на любой странице, где вы её нажмёте. Ставить ничего не нужно.
Панель закладок не видно? В Chrome, Яндекс Браузере и Edge она включается сочетанием Ctrl+Shift+B.
Нажатие второй раз панель закрывает.
Где закладка не сработает
Часть сайтов запрещает сторонние скрипты своей политикой безопасности — это их право и правильная настройка, а не поломка. Молчать в таком случае закладка не должна, и сделана она так, чтобы показать окошко с объяснением и тремя выходами: поставить расширение (на него запрет не действует), открыть анализ сайта и проверить по адресу, либо посмотреть код через Ctrl+U.
Бывает и случай потоньше. Политика сайта иногда строга не к скриптам, а к стилям: скрипт она пропускает, а оформление панели срезает. Тогда панель откроется, но нарисуется голой — без рамок, цветов и колонок. Разбор в ней тот же самый и прочитать его можно, просто выглядит это плохо. Расширения ни один из двух запретов не касается.
Сколько это в жизни. Перед выкладкой мы нажали закладку на восьми чужих и своих сайтах разных движков. На пяти — Битрикс, Мегагрупп, WordPress, Angular и наша витрина — панель открылась целиком: и оформление, и разбор, и «Исходный код». На трёх — GitHub, npm и справочник MDN — сайт запретил сторонний скрипт, и вместо панели вышло то самое окошко с объяснением. Заметьте, кто эти трое: сайты для разработчиков, где строгая политика безопасности в порядке вещей. Обычные сайты компаний её почти не ставят. Случай со срезанным оформлением на живых сайтах не попался ни разу — мы воспроизвели его на своём стенде, и панель там действительно открывается голой, но разбор в ней целый.
Как она выглядит
Расширение для Chrome
Расширение делает то же самое, но работает там, где закладка не работает, и умеет мерить скорость через API Google. Запускается кликом по значку в панели браузера.
- Распакуйте архив в постоянную папку — Chrome грузит расширение по пути, и удалённая папка отключит его.
- Откройте
chrome://extensions. - Включите «Режим разработчика» — переключатель справа сверху.
- Нажмите «Загрузить распакованное» и выберите распакованную папку.
- Закрепите значок панели, чтобы он был виден всегда.
Это обычный способ поставить расширение не из магазина. Внутри архива — четыре файла обычным текстом, их можно открыть и прочитать.
Сделаем за вас
Панель показывает, что на странице не так. Если чинить некому или некогда — напишите, посмотрим сайт и скажем, что там на самом деле.
Заявка принята, ответим на указанный контакт.
Вопросы
Данные страницы куда-то уходят
Содержимое страницы — нет. Панель читает то, что уже загружено у вас в браузере, и рисует разбор там же. На наш сервер уходит один запрос, за самим файлом panel.js, и содержимого страницы в нём нет. Но как при любой картинке или шрифте со стороннего адреса, браузер сообщает нашему серверу домен страницы, с которой файл загружен, — в логах arivex.ru видно, что закладку нажали на таком-то сайте. Обычно это именно домен, без пути и без того, что после вопросительного знака: так браузеры настроены по умолчанию, и мы это замерили. Решает, однако, сам сайт: если он ослабил у себя правило Referrer-Policy, к нам приедет полный адрес страницы. У расширения и этого запроса нет, скрипт лежит у вас на диске. Отдельно стоит вкладка «Исходный код», она запрашивает страницу заново у самого сайта, чтобы показать HTML таким, каким его отдал сервер, — этот запрос идёт к сайту, а не к нам, и уходит при каждом открытии панели.
Чем закладка отличается от расширения
Разбор одинаковый, отличий два. Закладку запрещают сайты со строгой политикой безопасности, а расширению такой запрет не помеха. И вкладка «Скорость» настоящий замер делает только в расширении: запрос к API Google требует ключа, а ключ в открытом скрипте это ключ, отданный всем.
Почему расширения нет в магазине Chrome
Мы писали его для себя и выкладываем как есть. В магазине оно потребовало бы отдельной поддержки и проверок при каждой правке, а пользы это не добавит: файлов четыре, они открыты и читаются.
В Яндекс Браузере и Edge работает
Расширение сделано по manifest v3 — формату, который понимают браузеры на движке Chromium, а это и Chrome, и Яндекс Браузер, и Edge, и Opera. Ставится оно в них одинаково, отличается только адрес страницы расширений. Это вывод из формата: по отдельности в каждом браузере мы расширение не запускали. Закладка — обычный JavaScript, ничего браузероспецифичного в ней нет, и снимки выше сняты как раз в Edge. Firefox расширения принимает в своём формате, наш архив ему не подойдёт; закладке в нём помешать нечему, но отдельно её там мы не смотрели.
Панель ломает вёрстку страницы
Нет. Она рисуется в отдельном теневом дереве, поэтому её стили не смешиваются со стилями сайта, а стили сайта не попадают в неё. Закрывается крестиком или повторным нажатием.