Разберите вёрстку по косточкам: дерево тегов, порядок заголовков, разметка Open Graph. Здесь же собирается фавикон.
Найдено инструментов: 4Вставьте код, адрес страницы или файл — проверим HTML на ошибки: валидность по W3C, линтинг разметки, семантику, доступность и порядок заголовков. Плюс дерево документа и отчёт в PDF.
Отформатируйте HTML или XML: читаемый вид с отступами (beautify) или минификация в одну строку. Результат появляется сразу, невалидная разметка подсвечивает ошибку. Всё в браузере.
Загрузите картинку — получите favicon.ico и PNG всех размеров одним архивом, плюс готовый код для вставки в <head>.
Проверьте, как ссылка выглядит при репосте: превью для Telegram, Facebook, Twitter и WhatsApp, разбор тегов Open Graph и og:image, генерация недостающих тегов.
Инструменты добавляются постоянно. Расскажите, чего вам не хватает, — это лучший способ повлиять на то, что появится следующим.
HTML легко написать и трудно проверить: браузер прощает почти любые ошибки — молча достраивает пропущенные теги, закрывает забытые, переставляет то, что лежит не там. Разметка «работает», пока в один прекрасный день не перестаёт.
Инструменты этого раздела показывают структуру наглядно: как вложены теги, не сломан ли порядок заголовков, что видно поисковику и соцсетям. Здесь же собирается фавикон — со всеми размерами и готовым кодом для вставки в head.
HTML-дерево — это то, что написано в файле. DOM-дерево строит браузер, разобрав файл, и оно может отличаться: браузер достроит html, head и body, закроет забытые теги, вынесет блочный элемент из абзаца. Из-за этого расхождения, например, молча не работает селектор table > tr — браузер сам вставляет tbody, которого в вашей разметке не было.
Заголовки задают оглавление документа. Прыжок с h1 сразу на h3 это оглавление ломает: скринридер зачитает уровни вперемешку, а поисковик хуже поймёт, что на странице главное.
Она решает, как ссылка на страницу выглядит в мессенджере и соцсети: заголовок, описание, картинка. Без неё превью соберётся как попало — часто из случайного куска текста и первой попавшейся картинки.
