Генератор Open Graph

1200x630 пикселей (соотношение 1.91:1) — это универсальный безопасный размер для Facebook, LinkedIn, Twitter summary_large_image и большинства других платформ. Размер файла должен быть менее 8 MB (лимит Facebook), но рекомендуется до 1 MB для быстрой загрузки. Используйте PNG для графики с прозрачностью и JPEG для фотографий. Изображения размером менее 200x200 пикселей могут вообще не отображаться в Facebook. Квадратные изображения (1200x1200) также хорошо работают, если ваше изображение лучше смотрится в квадратной рамке.

og:type сообщает платформам, какой тип контента находится на вашей странице. website является стандартом и подходит для главных страниц, лендингов и большинства статических страниц. article предназначена для постов в блогах и новостей — она открывает дополнительные теги, такие как article:author, article:published_time и article:section. product используется для товаров в интернет-магазинах. Для медиаконтента существуют video.movie и music.song. Использование правильного типа может активировать более насыщенные превью на некоторых платформах.

Twitter читает OG теги как запасной вариант, поэтому ваши ссылки будут отображаться даже без явных тегов Twitter Card. Однако Twitter Card дает вам два важных преимущества: (1) тип twitter:card — summary_large_image показывает полноэкранное изображение над текстом ссылки, что гораздо заметнее, чем маленькое миниатюрное изображение в базовой карточке summary; (2) twitter:site и twitter:creator — ваш @handle появится под карточкой. Для контент-маркетинга добавление тегов Twitter Card стоит тех двух лишних строк HTML.

Facebook и LinkedIn агрессивно кешируют данные OG. После обновления URL вашего og:image используйте Facebook Sharing Debugger (developers.facebook.com/tools/debug), чтобы принудительно обновить кэш — вставьте свой URL и нажмите "Scrape Again". У LinkedIn есть Post Inspector по адресу linkedin.com/post-inspector. Twitter/X обычно обновляется автоматически в течение нескольких часов. Изменение URL изображения (например, добавление ?v=2 для сброса кеша) также заставит платформы загрузить новое изображение.

og:locale определяет язык и территорию вашего контента, например en_US, fr_FR или tr_TR. Это опционально, но полезно для многоязычных сайтов — оно помогает Facebook показывать правильную языковую версию, когда пользователь нажимает на общую ссылку. Формат — язык_ТЕРРИТОРИЯ с нижним подчеркиванием (не дефисом). og:locale:alternate может содержать список дополнительных поддерживаемых локалей. Для одноязычных сайтов можно не указывать его; Facebook по умолчанию использует en_US.

Facebook Sharing Debugger (developers.facebook.com/tools/debug) — самый полный инструмент: он показывает именно те теги, которые были извлечены, любые предупреждения и позволяет принудительно обновить кэш. LinkedIn Post Inspector (linkedin.com/post-inspector) проверяет превью в LinkedIn. Twitter Card Validator (cards-dev.twitter.com/validator) проверяет карточки Twitter. Эти инструменты показывают реально извлеченные данные, а не симуляцию, поэтому они находят такие проблемы, как заблокированные URL изображений или отсутствующие обязательные теги.

Нет. Все процессы генерации OG тегов и рендеринга социальных превью происходят в вашем браузере с помощью JavaScript. Заголовки страниц, описания, URL и ссылки на изображения никогда не покидают вашего устройства.