Закладки для проверки технической SEO оптимизации сайта

Это то, чем я сам регулярно пользуюсь при аудите технички, скорости и семантической вёрстки.
Здесь вы можете:

Список букмарклетов

Многие создал сам, какие-то взял у других и доработал.

По сути, это просто закладки, которые позволяют быстро проверить параметры домена или текущей страницы, которая открыта в браузере на момент клика по закладке. Без лишних переходов, копирований и вставок URL адреса. Экономит массу времени, если часто приходится это делать.

Если вам нужно разово проверить какой-то сайт или страницу, то букмарклеты не нужны. Замените здесь ссылку на ту, которую хотите проверить и кликайте по кнопкам «Протестировать» 👇

  • SSL (проверить)

    Протестировать 
    Код

    Сразу откроется страница с данными проверки сертификата. Есть ли он, правильно ли установлен. Кстати, если срок окончания горит красным (что скоро закончится), то скорей всего просто автопродление стоит и нет повода для паники.

    Правильно ли установлен SSL Посмотреть скриншот Свернуть скриншот

  • TLS (проверить версию)

    Здесь не получается открыть сразу результаты, но домен уже будет автоматически скопирован в буфер обмена — вам останется только вставить его в поле и запустить проверку.

    Протестировать 
    Код

    Проверяется только при наличии SSL сертификата. Убедитесь, что сервер поддерживает версию TLS 1.3

    Последняя ли версия TLS Посмотреть скриншот Свернуть скриншот

  • HSTS (проверить)

    Протестировать 
    Код

    При наличии SSL сертификата и последней версии TLS, надо ещё настроить правильный HSTS заголовок и добавить сайт в список предварительной загрузки. Это сокращает время загрузки страницы, устраняя перенаправления сервера с HTTP на HTTPS.

    Проверка HSTS Посмотреть скриншот Свернуть скриншот

  • 304 Not Modified (картинки)

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

    Протестировать (копирует адрес картинки только там, где запускается)

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

    Код

    У меня есть подробное, но не длинное видео про Last-Modified и Not-Modified, с описанием ошибки и инструкциями по исправлению.

    Проверить код 304 Not Modified Посмотреть скриншот Свернуть скриншот

  • Mobile-Friendly (Google Tools)

    Протестировать 
    Код

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

    Букмарклет проверки адаптивной вёрстки Посмотреть скриншот Свернуть скриншот

  • Код ответа сервера (bertal.ru)

    Протестировать 
    Код

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

    Закладка для проверки кода ответа сервера Посмотреть скриншот Свернуть скриншот

  • 301 редирект на основное зеркало (проверка в Я.Вм)

    Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.

    Протестировать 
    Код

    Происходит проверка страницы, но с подменой протокола и поддомена. В результате проверки обязательно должен быть 301 код статуса HTTP, а в поле «Location» должен быть основной адрес с правильным протоколом и с обратной подменой www префикса.

    Иными словами, если кликнуть по ссылке в пункте «Location», то произойдёт ещё одна проверка, которая должна показать код 200, а не снова 301.

    Location переадресации Посмотреть скриншот Свернуть скриншот

  • Редиректы (проверка всей цепочки)

    Работает как предыдущий букмарклет, но показывает сразу всю цепочку перенаправлений.

    Протестировать 
    Код

    В цепочке должен быть только один 301 код, а потом сразу 200.

    Иногда встречаются сайты с двойным и даже с тройным перенаправлением — сперва только на https, потом перенаправляется по префиксу www, но почему-то на http протокол, а потом снова на https (так не должно быть).

    Лишние переадресации Посмотреть скриншот Свернуть скриншот

  • robots.txt (посмотреть)

    Протестировать 
    Код

    Часто бывает нужным просто визуально посмотреть на файл robots.txt и мне этот букмарклет экономит время.

    Просмотр файла robots.txt Посмотреть скриншот Свернуть скриншот

  • robots.txt (проверить в Я.Вм)

    Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.

    Протестировать 
    Код

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

    Проверка robots.txt Посмотреть скриншот Свернуть скриншот

  • sitemap.xml (посмотреть)

    Протестировать 
    Код

    Для быстрого перехода в XML карту сайта по стандартному адресу. Если не удалось открыть, это ещё не значит, что её нет — иногда Sitemap находится по другой ссылке. В файле robots.txt можно посмотреть правильную ссылку.

    Просмотр сайтмапа Посмотреть скриншот Свернуть скриншот

  • sitemap.xml (проверить в Я.Вм)

    Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.

    Протестировать 
    Код

    Ну и тут проверяется стандартный URL карты. Если он другой, то придётся перебить вручную.

    Проверка карты сайта в вебмастере Посмотреть скриншот Свернуть скриншот

  • 404 (посмотреть)

    Протестировать 
    Код

    Страница не должна создавать впечатления, будто не работает вообще весь сайт — лёгкое оформление под дизайн сайта.

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

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

    Плохой пример 404 страницы Посмотреть скриншот Свернуть скриншот

  • 404 (проверить код в Я.Вм)

    Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.

    Протестировать 
    Код

    Тут основная задача убедиться, что код статуса HTTP = 404 Not Found

    404 код ответа сервера Посмотреть скриншот Свернуть скриншот

  • HTML валидатор (проверить ошибки)

    Протестировать 
    Код

    Серьёзные ошибки, это не закрытые кавычки и тэги. Есть ещё «Fatal Error» после которой валидатор даже не может понять весь оставшийся код (поэтому «Fatal Error» ищите в самом конце списка).

    На скриншоте два супер лёгких предупреждения, что роль для шапки и подвала необязательно указывать — я с этим не согласен.

    Чистый код без ошибок Посмотреть скриншот Свернуть скриншот

  • CSS валидатор (проверить ошибки)

    Протестировать 
    Код

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

    Кстати, у меня на YouTube есть ролик по этому поводу... и по многим другим пунктам этого списка.

    Файлы стилей без ошибок Посмотреть скриншот Свернуть скриншот

  • Schema.org валидатор (проверить разметку)

    Протестировать 
    Код

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

    Список разметок Schema.org и наличие в них ошибок Посмотреть скриншот Свернуть скриншот

  • Schema.org (сниппеты)

    Протестировать 
    Код

    Проверка разметки элементов, которые могут показываться в виде расширенных результатов поиска.

    Ресурс отображает ещё и ошибки, если они есть. Посмотреть скриншот Свернуть скриншот

  • Open Graph (проверить)

    Иногда тест глючит и нужно обновить страницу.

    Протестировать 
    Код

    Есть много других ресурсов, а в этом что-то в последнее время и тест не сразу проходит и дизайн скачет при больших картинках в разметке Open Graph. Тем не менее это мой самый любимый ресурс, так как показывает не только данные, но и ошибки. А ещё там можно сделать понятный скриншот для клиента и для портфолио ДО/ПОСЛЕ.

    P.S.: Разметка используется не только для соцсетей, но и в мессенджерах, форумах и в других местах, где вы делитесь ссылками на свой сайт.

    Ресурс показывает процент оптимизации разметки. Посмотреть скриншот Свернуть скриншот

  • Favicon (проверить)

    Протестировать 
    Код

    Букмарклет переводит на ресурс с понятной проверкой всех вариантов Favicon. Не проверяет только наличие SVG варианта иконки.

    Удобный скриншот по проблемам с Favicon для портфолио ДО и ПОСЛЕ исправления Посмотреть скриншот Свернуть скриншот

  • Вирусы (проверка Google)

    Протестировать 
    Код

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

    Успешная проверка сайта на вирусы Посмотреть скриншот Свернуть скриншот

  • Вирусы (проверка Dr.WEB)

    Здесь не получается открыть сразу результаты, но ссылка уже будет автоматически скопирован в буфер обмена — вам останется только вставить её и запустить проверку.

    Протестировать 
    Код

    Доверяю этому антивирусу, так как пользуюсь им 15 лет. Проблем за это время не было — это очень надёжный показатель.

    Успешная проверка в антивирусе Посмотреть скриншот Свернуть скриншот

  • Вирусы (проверить комплексно)

    Протестировать 
    Код

    Не так давно нашёл этот ресурс. Теперь пользуюсь регулярно. Пока ещё не встречал сайтов с проблемами, поэтому не знаю весь функционал и достоверность информации. Именно поэтому, всё ещё использую два предыдущих букмарклета с проверкой в Google и Dr.WEB

    Проверка примерно по 100 базам данных Посмотреть скриншот Свернуть скриншот

  • PageSpeed Insights (проверить скорость)

    Протестировать 
    Код

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

    Скриншот верхнего экрана ресурса PageSpeed Insights Посмотреть скриншот Свернуть скриншот

  • WebPageTest (проверить скорость)

    После перехода на ресурс, нужный URL адрес уже будет указан в поле. Надо будет только нажать кнопку «Start Test»

    Протестировать 
    Код

    Если разобраться и привыкнуть, то этот ресурс на много круче, чем PageSpeed Insights.

    Ресурс с огромным набором параметров для оптимизации скорости сайта Посмотреть скриншот Свернуть скриншот

  • PING сайта (проверить скорость ответа сервера)

    URL как обычно автоматически копируется в буфер, а на сайте надо будет его вставить, выбрать нужный город (или несколько) и запустить проверку.

    Протестировать 
    Код

    Удобный инструмент от крутого специалиста Антона Белогородцева.

    Можно проверять сразу несколько сайтов с нескольких городов. Для получения нормального результата нужно подождать. Пусть сайт поработает в фоновом режиме пару минут.

    Удобное визуальное отображение проблем с ответом сервера Посмотреть скриншот Свернуть скриншот

  • HTTP/2 протокол (проверить)

    Ссылка на проверяемую страницу уже будет скопирована. Останется только вставить и запустить проверку.

    Протестировать 
    Код

    Уже давно существует протокол соединения с сервером HTTP/3, но некоторые всё ещё используют HTTP/1.1, а должен быть минимум HTTP/2.

    Тест на наличие протокола HTTP/2 прошёл удачно Посмотреть скриншот Свернуть скриншот

  • HTTP/3 протокол (проверить)

    Нужная ссылка уже будет скопирована. Вставьте и запустите тест.

    Протестировать 
    Код

    Скоро все на нём будем, но пока он ещё не имеет особых преимуществ перед HTTP/2

    Провальный тест на протокол HTTP/3 Посмотреть скриншот Свернуть скриншот

  • Gzip/Brotli сжатие (проверить)

    После перехода, вставьте ссылку и нажмите «Test URL».

    Протестировать 
    Код

    Brotli лучше, но всё зависит от вашего хостинга и сисадмина. Главное, чтобы был хотя бы Gzip.

    Gzip Is Enabled Посмотреть скриншот Свернуть скриншот

  • CSS оптимизация (проверить)

    Ссылка копируется автоматически. После перехода просто вставьте её и жмите «Test Page».

    Протестировать 
    Код

    Не совсем понятно про какие именно куски кода и стили говорится в отчётности после теста, но зато это самый подробный чекер CSS из тех, которые мне попадались.

    Букмарклет даёт полный результат по CSS на странице Посмотреть скриншот Свернуть скриншот

  • h1-h6, strong, b, em, i (подсветить)

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

    Протестировать (подсвечивает элементы только там, где запускается)

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

    Код

    <‍strong><‍/strong> — используется только для выделения целой фразы в абзаце. Не используется для выделения одного слова или какого-то не законченного смыслового выражения. Используется <‍strong>только для выделения основной мысли<‍/strong> из общего массива. Минимум для двух слов. Такими выделениями можно построить структуру основных фраз для продвижения в ТОП. Можно заполучить ручные санкции, если бездумно спамить этим тегом на странице.

    <‍b><‍/b> — используется для выделения <‍b>ключевых<‍/b> слов. Максимум для двух. Выделяем то, что является значимым ключом для страницы или для сайта в целом. По всем правилам <‍b>семантической вёрстки<‍/b>, тег b не используется для фраз.

    <‍em><‍/em> — служит для ударения и выделения акцента на каком-либо слове или фразе. Например:
    — Кто это сказал?
    — <‍em>Я<‍/em> так сказал.
    — Ты же по другому говорил.
    — Я <‍em>так<‍/em> сказал.

    <‍i><‍/i> — НЕ используется для добавления иконок типа <‍i class="fa fa-check"><‍/i>, это семантический тег для технических терминов, иностранных и прочих слов, которые выбиваются из обычного текста. Используйте его правильно, и будет <‍i>всё пучком<‍/i>.

    Все эти и подобные теги не предназначены для форматирования текста!
    НЕ для дизайна!
    Они не для создания наклонного шрифта или жирного текста. Они несут в себе определённый семантический смысл, а то что от них меняется начертание текста - это пережиток прошлого для поддержки старых технологий. Нужно сделать жирным или курсивом — делайте стилями и обрамляйте тегом span.

    Букмарклет выделения тегов в действии Посмотреть скриншот Свернуть скриншот

  • Структура h1-h6, IMG alt/title и пр. (coolBm v2.0)

    Списки можно смотреть при клике по пунктам (смотрите скриншот).

    Протестировать (считывает данные только там, где запускается)

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

    Код

    Букмарклет от Александра Арсёнкина имеет много полезной информации, но мне он нравится тем, что можно быстро посмотреть иерархию заголовков с указанием ошибок, а ещё можно быстро глянуть как прописаны атрибуты alt у картинок. Не хватает вывода ошибок, когда alt отсутствует.

    Отображение списка заголовков внутри букмарклета Посмотреть скриншот Свернуть скриншот

  • Alt вместо изображений

    Повторный клик убирает подсветку ALT текстов и возвращает картинки.

    Протестировать (выводит ALT только там, где запускается)

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

    Код

    Очень удобно смотреть на сколько органично alt вписывается в окружающий текст. Букмарклет взял на курсах у М.Шакина, но доработал подсветку и пояснение, чтобы было наглядно видно картинки у которых нет атрибута alt или он пуст (см. скриншот).

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

    P.S.: Если после клика по букмарклету вы всё ещё видите картинки, значит они вставлены в сайт стилями как фоновые изображения и НЕ индексируются.

    Понятная подсветка картинок Посмотреть скриншот Свернуть скриншот

Как добавить себе любой букмарклет.

Объясняю на примере браузера Google Chrome. Если у вас другой браузер, то вы легко найдёте инструкцию в Интернете.
  1. Копируем код нужного букмарклета.
  2. Жмём три точки в самом верхнем правом углу Закладки Диспетчер закладок.
  3. Потом снова жмём такие же три точки, но чуть ниже и выбираем «Новая закладка».
  4. Пишем название Вставляем код в поле «URL» Сохраняем
  5. Мышкой перетаскиваем туда, где вам будет удобно его находить при необходимости.

Если вам нужен не один, а несколько, то легче импортировать весь набор, а потом удалить ненужное.

Видео-инструкция на SEO-букмарклеты

Наглядную инструкцию и понятный обзор, смотрите на видео

Как импортировать сразу всё в Google Chrome

Всё просто. Смотрите видео выше ☝, или читайте инструкцию ниже 👇.
При импорте будут добавлены:
  • Несколько моих самых полезных закладок (мой сайт, ресурс по оптимизации картинок и ресурс транслитерации для составления правильных URL адресов);
  • Отдельная папка «wSEO check js» со всеми букмарклетами (именно из этого списка, которые относятся к технической SEO оптимизации, скорости и семантической вёрстке);
  • Отдельная папка «other SEO js» с кучей других букмарклетов (я ими тоже пользуюсь, но реже так как они больше относятся к другим направлениям SEO продвижения сайта).
Любые ненужные закладки можно легко удалить после импорта.
  1. Для начала нужно скачать себе html файл с букмарклетами.
    Запомните куда сохранили, чтобы потом долго не вспоминать.
  2. Открываем диспетчер закладок.
    Или одновременным нажатием Ctrl+Shift+O
    Или вставкой ссылки chrome://bookmarks/ в поле для URL.
    Или через меню: Три точки в самом верхнем правом углу Закладки Диспетчер закладок.
  3. Жмём на вертикальное троеточие меню управления закладками Выбираем пункт «Импортировать закладки».
    Такие же три точки как в прошлом пункте, но чуть ниже. В правом верхнем углу самого окна с закладками.
  4. Выбираем и импортируем файл.
    Тот самый, который скачивали на первом шаге.
  5. Перетаскиваем новые закладки туда, где вам будет удобно.
    Все букмарклеты и закладки импортируются в папку «Выполнен импорт», внутри которой будет папка «Панель закладок», а уже там сами закладки и папки с букмарклетами.
  6. Удаляем то что не нужно.
    Я приложил максимально подробный файл импорта, так как удалить ненужную часть на много легче, чем импортировать нужное по отдельности. Удалять можно сразу несколько выбранных закладок и даже папки.
    Даже если всё нужно и вы всё переместите в свою панель закладок, то в конце останется ненужная папка «Выполнен импорт», которую точно нужно удалить.

Комментарии


Как обычно, мы открыты для общения и вы можете смело писать свои комментарии, задавать вопросы и просто делиться мнением. Ваши отзывы очень важны для нас!