Как пользоваться
- Введите title и description — счётчики покажут длину в символах и примерную ширину в пикселях; при переборе значение станет янтарным.
- Заполните canonical, robots, язык и блок Open Graph: тип, картинку 1200×630, site_name, locale. og:title по умолчанию повторяет title, og:description — description.
- Для Twitter выберите тип карточки и аккаунты; для статей переключите og:type на
article— появятся дата публикации, автор и раздел. - Смотрите превью ниже: сниппет Google (десктоп/мобайл), карточка Facebook/VK, Twitter и сообщение Telegram. Картинка подгружается по вашему URL.
- Нажмите Копировать теги и вставьте код в
<head>. Чтобы поправить существующую страницу, откройте Импорт из HTML и вставьте её исходник — поля заполнятся сами.
Зачем нужны мета-теги и почему считаем в пикселях
Title и description — это текст сниппета в выдаче, а Open Graph и Twitter Card — карточка ссылки в соцсетях и мессенджерах. От них зависит CTR: одна и та же позиция даёт в полтора-два раза больше кликов, если заголовок не обрезан, а карточка в Telegram показывает картинку, а не голую ссылку. Для арбитражника это ещё и модерация: Facebook и VK берут заголовок и картинку поста именно из OG-тегов лендинга.
Google обрезает title не по числу символов, а по ширине: около 580 px на десктопе (шрифт 20 px), description — около 920 px (14 px, две строки). Латинское «illicit» и кириллическое «Шшшшшш» при одинаковой длине занимают разное место, поэтому счётчик оценивает ширину по таблице средних ширин символов Arial. Это оценка, а не измерение — Google рендерит своим шрифтом и может переписать сниппет, — но она надёжнее, чем «до 60 символов».
Что попадает в код
| Тег | Кто читает | Нюанс |
|---|---|---|
<title>, meta description | все поисковики | уникальные на каждой странице; description до ~160 символов, иначе Google подставит свой |
link rel=canonical | Google, Яндекс, Bing | абсолютный URL; на самой странице указывает на себя |
meta robots | все поисковики | index, follow — умолчание, писать не нужно; max-image-preview:large нужен для Discover |
og:* | Facebook, VK, Telegram, LinkedIn, WhatsApp, Slack | og:image — абсолютный URL, 1200×630, до 8 МБ; og:url = canonical |
twitter:card, twitter:site | X (Twitter) | title, description и image X берёт из OG, дублировать не обязательно |
article:published_time, article:author | Facebook, агрегаторы | только при og:type=article; дата в ISO 8601 |
Как читают превью мессенджеры
Telegram берёт og:site_name, og:title, og:description и og:image, кэширует их и обновляет только по запросу через @WebpageBot. Facebook и VK кэшируют тоже: после смены тегов дёрните отладчик Facebook Sharing Debugger или очистку кэша VK. Пустой og:image — самая частая причина «ссылки без картинки»; вторая — относительный путь вместо абсолютного URL. Превью в инструменте показывают картинку прямо по введённому адресу: если она не открылась здесь, скорее всего, не откроется и у краулера соцсети.
Частые вопросы
Какой длины должен быть title и description?
Ориентир для Google — до ~580 px у title (примерно 55–65 символов) и до ~920 px у description (примерно 150–160 символов). Инструмент показывает и символы, и оценку ширины; при переборе счётчик подсвечивается янтарным.
Что такое Open Graph и нужен ли он, если есть title и description?
Open Graph — теги og:*, по которым Facebook, VK, Telegram, LinkedIn и WhatsApp строят карточку ссылки. Без них мессенджер возьмёт первый попавшийся заголовок и картинку или покажет голую ссылку. Для рекламных лендингов OG обязателен.
Какого размера делать og:image?
1200×630 px (соотношение 1,91:1), JPG или PNG до 8 МБ, абсолютный URL по https. Такой размер корректно показывают Facebook, VK, Telegram, X и LinkedIn; для twitter:card summary дополнительно подойдёт квадрат от 144×144.
Почему Telegram или Facebook показывают старое превью?
Они кэшируют OG-теги. В Telegram отправьте ссылку боту @WebpageBot и нажмите «Update preview»; в Facebook — прогоните URL через Sharing Debugger; у VK есть очистка кэша в инструментах разработчика.
Отправляются ли данные куда-то?
Нет. Все поля обрабатываются JavaScript-кодом в браузере, теги и превью собираются локально. Единственный внешний запрос — загрузка картинки и favicon по URL, который вы ввели сами, чтобы показать их в превью.
Можно ли разобрать мета-теги готовой страницы?
Да: откройте «Импорт из HTML», вставьте исходный код страницы (или только head) — DOMParser браузера вытащит title, description, canonical, robots, lang, favicon, все og:* и twitter:* теги и заполнит форму.
