Генератор мета-тегов с превью

Разметку кладут в <script type="application/ld+json"> — тег со скриптом уже подставлен в HTML-выгрузке выше, отдельным файлом отдаётся чистый объект.

Как пользоваться

1. Вставьте адрес готовой страницы и нажмите «Загрузить теги». Поля заполнятся тем, что стоит на странице сейчас, — title, description, robots, canonical, og:*, twitter:*, article:*, product:*, theme-color и языковые версии, — дальше вы правите живое, а не набираете заново.

2. Выберите тип страницы. От него зависит og:type, набор дополнительных тегов и тип разметки JSON-LD: у статьи это Article с датами и автором, у товара — Product с ценой.

3. Переключайте площадки справа. Google режет заголовок по ширине строки, X в большой карточке не показывает описание вовсе, LinkedIn не показывает его никогда — увидеть это до публикации дешевле, чем после.

4. Нажмите «Проверить» у картинки. Сервер скажет код ответа, схему, версию протокола, тип и вес, браузер замерит ширину и высоту — и станет видно, соберётся карточка с картинкой или без неё.

5. Загляните в «Иконки и протокол». Объявленный список приходит вместе с тегами; кнопка «Проверить иконки» обходит каждый адрес и корневой /favicon.ico и говорит, лежит ли там файл.

6. Заберите результат вкладкой, которая вам нужна: HTML для head, объект metadata для Next.js, useHead для Nuxt или разметку react-helmet. Кнопка «Ссылка на набор» кладёт всю конфигурацию в адрес — её можно отправить.

7. Много страниц — вниз, в пакетную проверку. Пятьдесят адресов за раз, таблица с длинами в знаках и пикселях, выгрузка CSV.

Разбор примера: страница про выбор велосипеда

Исходные данные — те же, что стоят в полях по умолчанию: их можно пересчитать в уме и убедиться, что инструмент не врёт.

• Заголовок «Как выбрать велосипед: рама, колёса и тормоза» — 45 знаков
• Описание на 140 знаков
• Ориентир заголовка 60 знаков, ориентир описания 160
• Тип страницы «статья», адрес https://example.com/bike-guide/
• Картинка https://example.com/og/bike.png

1. Запас по знакам: 60 − 45 = 15 у заголовка и 160 − 140 = 20 у описания. Оба положительные.

2. Запас по пикселям считается отдельно: заголовок рисуется Arial 20 px, строка Google на компьютере — около 600 px. Одно и то же число знаков даёт разную ширину, поэтому счётчик показывает обе меры.

3. Тип «статья» ставит og:type=article, открывает поля дат и автора и переводит JSON-LD на Article.

4. В HTML-блоке собираются пятнадцать тегов: charset, viewport, title, description, robots, canonical, восемь тегов Open Graph (вместе с og:image:alt) и twitter:card, а следом — разметка JSON-LD. Число тегов написано в подписи над листингом и меняется вместе с полями.

5. Кнопка «Проверить» у картинки добавляет к тегам og:image:width и og:image:height, когда размеры замерены: Facebook по ним рисует карточку, не дожидаясь загрузки файла.

Замечаний нет: обе строки укладываются и в знаки, и в ширину, адреса полные и с https. Поставьте ориентир заголовка 40 — и появится замечание вместе с многоточием в карточке Google. Нажмите «Проверить» у картинки — и станет видно, что по этому адресу файла нет: example.com отвечает на такой запрос ошибкой.

Частые вопросы

• Что уходит на сервер, а что считается у меня?

  На сервер уходит только адрес: когда вы нажимаете «Загрузить теги», «Проверить» у картинки, «Проверить иконки» или запускаете пакетную проверку. Сервер открывает страницу, отдаёт её разбор и ничего не сохраняет. Всё остальное — счётчики, превью, разбор чужой разметки, сборка тегов, JSON-LD, выгрузки — считается в браузере, без единого запроса.

• Почему длина показана и в знаках, и в пикселях?

  Предела в знаках не существует: строку обрезают по ширине. Строка из «ш» и «щ» шире строки из «i» и «l» при равном числе знаков, поэтому «уложился в 60» ничего не гарантирует. Пиксели меряются тем же шрифтом и кеглем, каким рисует Google, — Arial 20 px для заголовка и 14 px для описания. Знаки оставлены рядом, потому что к ним привыкли.

• Почему в карточке X нет описания, а в LinkedIn — тем более?

  Так эти площадки её и рисуют. X в большой карточке показывает картинку, заголовок и домен; LinkedIn в ленте — картинку, заголовок и домен. Тег og:description при этом обязан быть: его читают Telegram, Slack, Facebook, ВКонтакте и поисковики. Превью показывает не то, что вы написали, а то, что дойдёт до человека.

• Какой должна быть картинка og:image?

  Ходовой размер — 1200×630, это соотношение 1,91:1: под него режут Facebook, LinkedIn и X. Сторона меньше 200 px превращает большую карточку в маленькую, файл тяжелее 5 МБ часть площадок просто не берёт, адрес по http вместо https не подхватывается почти нигде. Проверка у поля говорит про конкретный файл: код ответа, протокол, тип, вес, ширину, высоту и соотношение.

• Зачем нужен canonical, если страница одна?

  Он страхует от случайных дублей: один и тот же материал открывается с utm-метками, со слэшем на конце и без него. Canonical говорит, какой адрес считать основным.

• Что именно попадает в ссылку на набор?

  Все заполненные поля — они складываются в хэш адреса, ту часть после решётки, которую браузер не отправляет на сервер. Ссылку можно переслать: у получателя откроется тот же заполненный набор. Список для пакетной проверки в ссылку не кладётся: он бывает на сотню строк и в адрес не помещается.

• Почему при загрузке подтянулись не все теги?

  Раскладываются все семейства: title, description, robots, canonical, og:*, twitter:*, article:*, product:*, theme-color и языковые версии. Страница при этом читается дважды: готовый разбор сервер отдаёт сам, а её тело приезжает отдельно — ради тех семейств, которых в разборе нет, они разбираются уже в браузере. Пустое поле после загрузки — это ответ, а не сбой: такого тега на странице нет. Не подхватится только то, что страница дописывает скриптом уже в браузере: сервер видит разметку такой, какой её отдали, — ровно так же её сначала видит и поисковый робот.

• Что показывает секция «Иконки и протокол»?

  Иконка объявляется в разметке одной строкой, а лежит ли по этому адресу файл — из разметки не видно: картинку потеряли при переезде, вкладка стала пустой, а тег остался на месте. Кнопка обходит каждый объявленный адрес и говорит код ответа и вес, отдельно проверяет корневой /favicon.ico — его браузер просит сам, даже когда не объявлено ничего, — и показывает, есть ли apple-touch-icon для ярлыка на iPhone, манифест и theme-color. Рядом стоит версия протокола, которой отдали страницу: по HTTP/1.1 мелкие файлы грузятся очередью, по HTTP/2 и HTTP/3 — одним соединением.