Генератор метатегов Open Graph

Теги, из которых строится превью ссылки

Когда кто-то вставляет вашу ссылку в публикацию или сообщение, приложение отправляет краулер на страницу и читает несколько тегов <meta> в <head>. Эти теги взяты из протокола Open Graph, который перечисляет четыре обязательных:

• og:title: заголовок в том виде, в каком он должен появиться в превью.
• og:type: что представляет собой страница. website подходит для большинства страниц, а article: для записи в блоге. Протокол также определяет такие типы, как profile, book, video.movie и music.song.
• og:image: URL изображения, представляющего страницу.
• og:url: канонический URL, который протокол называет постоянным идентификатором объекта.

Протокол также определяет необязательные теги, и генератор прописывает полезные из них: og:description, og:site_name, а также данные об изображении og:image:width, og:image:height и og:image:alt. По поводу альтернативного текста протокол прямолинеен: если страница задаёт og:image, она должна задавать и og:image:alt, и этот текст описывает то, что на изображении, а не является подписью.

Что добавляет X: twitter:card

X тоже читает Open Graph. Его справочник по разметке карточек (документация для разработчиков X, приведённая здесь через Internet Archive, потому что исходная страница теперь перенаправляет) перечисляет запасной вариант для каждого тега: twitter:title откатывается к og:title, twitter:description к og:description, twitter:image к og:image и twitter:image:alt к og:image:alt. Поэтому единственный тег, который стоит добавить,: это twitter:card, задающий макет. Если его не указать, согласно тому же справочнику, X может откатиться к маленькой сводной карточке, даже если вы хотели большую:

• summary_large_image: изображение на всю ширину над заголовком. Страница X о карточке с большим изображением указывает, что изображения для неё поддерживают соотношение сторон 2:1, с минимальными размерами 300 × 157 и максимальными 4096 × 4096 пикселей, до 5 МБ, в форматах JPG, PNG, WEBP или GIF. SVG не поддерживается.
• summary: меньшая карточка с квадратным изображением. Страница X о сводной карточке указывает, что изображение поддерживает соотношение 1:1, от 144 × 144 до 4096 × 4096 пикселей, и обрезается до квадрата на всех платформах.

Тот же справочник перечисляет карточки app и player, которым нужны дополнительные поля для App Store или видеоплеера, поэтому здесь они не рассматриваются. Там же указаны лимиты, которые используют проверки выше: 70 символов для заголовка, 200 для описания и 420 для alt-текста.

Размеры изображений, указанные платформами

• LinkedIn: его руководство по подготовке сайта к публикации требует og:title, og:image, og:description и og:url, а также указывает максимальный размер файла 5 МБ, минимум 1200 × 627 пикселей и рекомендуемое соотношение 1.91:1.
• Meta: её рекомендации по публикации советуют использовать изображения шириной не менее 1080 пикселей для экранов высокого разрешения и не менее 600 пикселей для показа рекламы со ссылкой на изображение. На той же странице рекомендуется указывать og:image:width и og:image:height, чтобы краулер мог сразу отобразить изображение без предварительной загрузки и обработки.

Изображение 1200 × 630 удовлетворяет всем требованиям: не меньше 1200 × 627 для LinkedIn, шире 1080 для Meta и 1.905:1, что в пределах 5% от соотношения 2:1 у X.

Проверьте это и обновите старые предпросмотры

Приложения кэшируют то, что они собрали, поэтому исправление тегов не исправит уже сохранённый предпросмотр. Обе крупные сети дают для этого инструмент:

• Sharing Debugger от Meta показывает теги, которые собирает краулер, со всеми ошибками и предупреждениями, и запускает новый сбор данных. Руководство для вебмастеров от Meta описывает его, а страница с рекомендациями отмечает, что иначе собранное содержимое обновляется в стандартный период 24 часа.
• Post Inspector от LinkedIn обновляет кэшированный URL. Страница справки LinkedIn отмечает, что обновление затрагивает только новые публикации: публикации, которые уже содержат этот URL, сохраняют старый предпросмотр.

Чего этот инструмент не делает

Он не загружает вашу страницу или изображение, поэтому не видит, что находится в реальности, и предпросмотр выше это текстовый набросок, а не рендер. Он пишет теги; ваш сайт всё равно должен отдавать их в <head> страницы, в том HTML, который получает краулер. Теги, добавленные позже через JavaScript, могут остаться незамеченными. И он не пишет карточки app или player, а также дополнительные свойства, которые определяют типы вроде book или video.movie.

Если вы предпочитаете не писать это вручную

Hermoso: это маркетинг на автопилоте: он изучает рекламу, уже работающую на вашем рынке, создаёт фирменные рекламные изображения и видео, планирует публикации и ведёт платные кампании в ваших собственных рекламных аккаунтах. Он работает в веб-приложении, а также внутри Claude, ChatGPT и Cursor через свой сервер MCP.

Бесплатные инструменты: Конструктор UTM-ссылок · Генератор QR-кодов · Справочник по размерам для соцсетей

Часто задаваемые вопросы

Какие теги Open Graph обязательны?

Протокол Open Graph перечисляет четыре обязательных свойства: og:title, og:type, og:image и og:url. Теги og:description, og:site_name, а также ширина, высота и alt для og:image необязательны, но их стоит добавить.

Нужны ли мне twitter:title и twitter:image, если есть теги og:?

Нет. В справочнике по разметке карточек X сказано, что twitter:title, twitter:description, twitter:image и twitter:image:alt берутся из их аналогов og:. Стоит добавить тег twitter:card, который задаёт макет карточки.

Какого размера должно быть изображение Open Graph?

LinkedIn требует не менее 1200 × 627 пикселей в соотношении 1.91:1 и менее 5 MB. Meta рекомендует ширину не менее 1080 пикселей. Карточка с большим изображением в X поддерживает соотношение 2:1 от 300 × 157 до 4096 × 4096. Изображение 1200 × 630 подходит для всех трёх.

Почему ссылка по-прежнему показывает старое изображение после смены тегов?

Приложение закэшировало старый скрейпинг. Прогоните URL через Sharing Debugger от Meta или Post Inspector от LinkedIn, чтобы получить его заново. LinkedIn отмечает, что у постов, которыми уже поделились по этому URL, предпросмотр остаётся прежним.

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

Они экранированы в HTML, чтобы тег оставался корректным. Заголовок вроде Tom & Jerry's "Sale" внутри атрибута content превращается в Tom & Jerry's "Sale", а браузеры и краулеры читают его обратно как исходный текст.

Загружает ли инструмент моё изображение?

Нет. Ничего из введённого никуда не отправляется, а URL изображения никогда не запрашивается, поэтому в предпросмотре вместо картинки показан заполнитель.