Букмарклеты для SEO «Проверятель v2.0»

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

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

  Код

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

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

• Mobile-Friendly (Google Tools)

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

  Код

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

  Код

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

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

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

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

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

  Код

  Не совсем понятно про какие именно куски кода и стили говорится в отчётности после теста, но зато это самый подробный чекер 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.: Если после клика по букмарклету вы всё ещё видите картинки, значит они вставлены в сайт стилями как фоновые изображения и НЕ индексируются.

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