По сути, это просто закладки, которые позволяют быстро проверить параметры домена или текущей страницы, которая открыта в браузере на момент клика по закладке. Без лишних переходов, копирований и вставок URL адреса. Экономит массу времени, если часто приходится это делать.
Если вам нужно разово проверить какой-то сайт или страницу, то букмарклеты не нужны. Замените здесь ссылку на ту, которую хотите проверить и кликайте по кнопкам «Протестировать» 👇
Код
Сразу откроется страница с данными проверки сертификата. Есть ли он, правильно ли установлен. Кстати, если срок окончания горит красным (что скоро закончится), то скорей всего просто автопродление стоит и нет повода для паники.
Здесь не получается открыть сразу результаты, но домен уже будет автоматически скопирован в буфер обмена — вам останется только вставить его в поле и запустить проверку.
ПротестироватьКод
Проверяется только при наличии SSL сертификата. Убедитесь, что сервер поддерживает версию TLS 1.3
Код
При наличии SSL сертификата и последней версии TLS, надо ещё настроить правильный HSTS заголовок и добавить сайт в список предварительной загрузки. Это сокращает время загрузки страницы, устраняя перенаправления сервера с HTTP на HTTPS.
Тут надо проверить не саму страницу, а любой статический файл (картинка, скрипт, стиль). Ссылка на картинку уже будет скопирована в буфер обмена — остаётся только вставить и запустить проверку.
Протестировать (копирует адрес картинки только там, где запускается)Работает как букмарклет, но если вы указали вверху ссылку для разовой проверки другого сайта, то произойдёт переход на сайт проверки, но для теста придётся самостоятельно искать ссылку на статический файл того сайта.
Код
У меня есть подробное, но не длинное видео про Last-Modified и Not-Modified, с описанием ошибки и инструкциями по исправлению.
Код
Проверка оптимизации страницы для мобильных устройств.
Код
Полный список кодов ответа сервера. В основном использую инструмент, чтобы убедиться, что нужная страница выдаёт 200, а несуществующая страница отдаёт 404.
Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.
ПротестироватьКод
Происходит проверка страницы, но с подменой протокола и поддомена. В результате проверки обязательно должен быть 301 код статуса HTTP, а в поле «Location» должен быть основной адрес с правильным протоколом и с обратной подменой www префикса.
Иными словами, если кликнуть по ссылке в пункте «Location», то произойдёт ещё одна проверка, которая должна показать код 200, а не снова 301.
Работает как предыдущий букмарклет, но показывает сразу всю цепочку перенаправлений.
ПротестироватьКод
В цепочке должен быть только один 301 код, а потом сразу 200.
Иногда встречаются сайты с двойным и даже с тройным перенаправлением — сперва только на https, потом перенаправляется по префиксу www, но почему-то на http протокол, а потом снова на https (так не должно быть).
Код
Часто бывает нужным просто визуально посмотреть на файл robots.txt и мне этот букмарклет экономит время.
Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.
ПротестироватьКод
После перехода все поля будут заполнены, но нужно вручную запустить сперва проверку файла, а потом проверку URL страницы на блокировку в файле robots.txt
Код
Для быстрого перехода в XML карту сайта по стандартному адресу. Если не удалось открыть, это ещё не значит, что её нет — иногда Sitemap находится по другой ссылке. В файле robots.txt можно посмотреть правильную ссылку.
Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.
ПротестироватьКод
Ну и тут проверяется стандартный URL карты. Если он другой, то придётся перебить вручную.
Код
Страница не должна создавать впечатления, будто не работает вообще весь сайт — лёгкое оформление под дизайн сайта.
Страница не должна быть пугающей — нужна тематическая картинка и поясняющий текст.
Должна быть возможность вернуться к просмотру сайта — на главную или сразу в нужный раздел каталога.
Для проверки нужно быть зарегистрированным в Яндекс Вебмастере.
ПротестироватьКод
Тут основная задача убедиться, что код статуса HTTP = 404 Not Found
Код
Серьёзные ошибки, это не закрытые кавычки и тэги. Есть ещё «Fatal Error» после которой валидатор даже не может понять весь оставшийся код (поэтому «Fatal Error» ищите в самом конце списка).
На скриншоте два супер лёгких предупреждения, что роль для шапки и подвала необязательно указывать — я с этим не согласен.
Код
Бывают ошибки разбора, которые могут негативно влиять на продвижение. Да и в целом я за чистый код без ошибок.
Кстати, у меня на YouTube есть ролик по этому поводу... и по многим другим пунктам этого списка.
Код
Помимо проверки ошибок в разметке, убедитесь что размечено всё, что только можно разметить. Не забудьте, что в валидаторе можно кликать по пунктам разметки и смотреть подробности. Внутри одной разметки, могут быть вложены и другие.
Код
Проверка разметки элементов, которые могут показываться в виде расширенных результатов поиска.
Иногда тест глючит и нужно обновить страницу.
ПротестироватьКод
Есть много других ресурсов, а в этом что-то в последнее время и тест не сразу проходит и дизайн скачет при больших картинках в разметке Open Graph. Тем не менее это мой самый любимый ресурс, так как показывает не только данные, но и ошибки. А ещё там можно сделать понятный скриншот для клиента и для портфолио ДО/ПОСЛЕ.
P.S.: Разметка используется не только для соцсетей, но и в мессенджерах, форумах и в других местах, где вы делитесь ссылками на свой сайт.
Код
Букмарклет переводит на ресурс с понятной проверкой всех вариантов Favicon. Не проверяет только наличие SVG варианта иконки.
Код
Сайт может заразиться вирусами в результате взлома ненадёжных паролей, с компьютера ненадёжного программиста и прочее. Я за безопасный Интернет и не начинаю оптимизацию сайта, пока на нём есть вирусы.
Здесь не получается открыть сразу результаты, но ссылка уже будет автоматически скопирован в буфер обмена — вам останется только вставить её и запустить проверку.
ПротестироватьКод
Доверяю этому антивирусу, так как пользуюсь им 15 лет. Проблем за это время не было — это очень надёжный показатель.
Код
Не так давно нашёл этот ресурс. Теперь пользуюсь регулярно. Пока ещё не встречал сайтов с проблемами, поэтому не знаю весь функционал и достоверность информации. Именно поэтому, всё ещё использую два предыдущих букмарклета с проверкой в Google и Dr.WEB
Код
Думаю, этот ресурс знают все. Но я всё же поясню. Вся его ценность не в той красивой информации, которая на скриншоте, а в пунктах из разделов «Оптимизация» и «Диагностика», которые находятся ниже. По пунктам можно кликать и раскрывать подробную информацию.
После перехода на ресурс, нужный URL адрес уже будет указан в поле. Надо будет только нажать кнопку «Start Test»
ПротестироватьКод
Если разобраться и привыкнуть, то этот ресурс на много круче, чем PageSpeed Insights.
URL как обычно автоматически копируется в буфер, а на сайте надо будет его вставить, выбрать нужный город (или несколько) и запустить проверку.
ПротестироватьКод
Удобный инструмент от крутого специалиста Антона Белогородцева.
Можно проверять сразу несколько сайтов с нескольких городов. Для получения нормального результата нужно подождать. Пусть сайт поработает в фоновом режиме пару минут.
Ссылка на проверяемую страницу уже будет скопирована. Останется только вставить и запустить проверку.
ПротестироватьКод
Уже давно существует протокол соединения с сервером HTTP/3, но некоторые всё ещё используют HTTP/1.1, а должен быть минимум HTTP/2.
Нужная ссылка уже будет скопирована. Вставьте и запустите тест.
ПротестироватьКод
Скоро все на нём будем, но пока он ещё не имеет особых преимуществ перед HTTP/2
После перехода, вставьте ссылку и нажмите «Test URL».
ПротестироватьКод
Brotli лучше, но всё зависит от вашего хостинга и сисадмина. Главное, чтобы был хотя бы Gzip.
Ссылка копируется автоматически. После перехода просто вставьте её и жмите «Test Page».
ПротестироватьКод
Не совсем понятно про какие именно куски кода и стили говорится в отчётности после теста, но зато это самый подробный чекер CSS из тех, которые мне попадались.
Повторный клик убирает подсветку элементов
Протестировать (подсвечивает элементы только там, где запускается)Работает как букмарклет, но если вы указали вверху ссылку, чтобы проверить другой сайт, то тут не сработает.
Код
<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.
Списки можно смотреть при клике по пунктам (смотрите скриншот).
Протестировать (считывает данные только там, где запускается)Работает как букмарклет, но если вы указали сверху ссылку, чтобы проверить другой сайт, то тут не сработает.
Код
Букмарклет от Александра Арсёнкина имеет много полезной информации, но мне он нравится тем, что можно быстро посмотреть иерархию заголовков с указанием ошибок, а ещё можно быстро глянуть как прописаны атрибуты alt у картинок. Не хватает вывода ошибок, когда alt отсутствует.
Повторный клик убирает подсветку ALT текстов и возвращает картинки.
Протестировать (выводит ALT только там, где запускается)Работает как букмарклет, но если вы указали сверху ссылку, чтобы проверить другой сайт, то тут не сработает.
Код
Очень удобно смотреть на сколько органично alt вписывается в окружающий текст. Букмарклет взял на курсах у М.Шакина, но доработал подсветку и пояснение, чтобы было наглядно видно картинки у которых нет атрибута alt и у которых он пуст (см. скриншот).
Как писать атрибут alt к картинкам и когда можно оставлять пустым, это вообще отдельная большая история. Вот хорошая и понятная документация (при стандартном переводе в браузере можно легко разобраться).
P.S.: Если после клика по букмарклету вы всё ещё видите картинки, значит они вставлены в сайт стилями как фоновые изображения и НЕ индексируются.
Если вам нужен не один, а несколько, то легче импортировать весь набор, а потом удалить ненужное.
chrome://bookmarks/
в поле для URL.Как обычно, мы открыты для общения и вы можете смело писать свои комментарии, задавать вопросы и просто делиться мнением. Ваши отзывы очень важны для нас!