Об этом инструменте
Инструмент предпросмотра meta-тегов разбирает <head> страницы и воссоздаёт то, как поисковые системы и социальные платформы её отобразят. Он считывает заголовок, meta-описание, канонический адрес, favicon, viewport, а также теги Open Graph (og:) и Twitter (twitter:), затем применяет те же цепочки запасных значений, что и реальные платформы — Open Graph откатывается к базовому заголовку и описанию, а Twitter откатывается к Open Graph — так что предпросмотр отражает то, что пользователи действительно видят, а не только то, что вы ввели.
Используйте его, чтобы выявить мелкие ошибки, незаметно ломающие публикацию ссылок: заголовок, который обрезается после примерно 60 символов в Google, отсутствующий og:image, оставляющий пустую карточку Facebook, относительный путь og:image, который не срабатывает, когда его запрашивает скрапер, или отсутствующий twitter:card, по умолчанию выбирающий неправильную раскладку. Вставьте разметку вашего head, сравните карточки Google, Facebook/LinkedIn и X бок о бок и пройдитесь по контрольному списку аудита перед публикацией или отправкой URL.
Всё разбирается в вашем браузере с помощью встроенного DOMParser — никакая разметка или URL не отправляются, а удалённые изображения загружаются прямо из источника для точного предпросмотра.
Часто задаваемые вопросы
Какова идеальная длина заголовка и meta-описания?
Стремитесь к заголовку в 50–60 символов и meta-описанию в 140–160 символов. За этими пределами Google обрезает текст многоточием в результатах поиска, поэтому конец вашего сообщения может оказаться отсечён.
Почему мой og:image не отображается, когда я делюсь ссылкой?
Самая частая причина — относительный путь вроде /og.png. Facebook, LinkedIn и X запрашивают изображение извне вашего сайта, поэтому og:image должен быть абсолютным URL с https://. Инструмент помечает относительные или отсутствующие значения og:image в своём аудите.
В чём разница между twitter:card summary и summary_large_image?
summary отображает небольшую квадратную миниатюру слева от текста, тогда как summary_large_image отображает большое изображение поверх карточки. Если twitter:card отсутствует или не распознан, X откатывается к меньшей раскладке summary.