Предпросмотр и генерация мета-тегов Open Graph для карточек обмена в социальных сетях
Возможности
- Предпросмотр в реальном времени: Мгновенный предпросмотр отображения страницы в соцсетях
- Полные теги OG: Генерация всех необходимых мета-тегов Open Graph
- Несколько платформ: Одновременный предпросмотр для Facebook, Twitter, LinkedIn
- Копировать теги: Копирование сгенерированных мета-тегов одним кликом
Руководство по использованию
- Ввод Метаданных: Заполнить заголовок, описание, URL изображения и URL страницы для вашего контента
- Настройка Параметров: Установить тип Open Graph, имя сайта, тип карточки Twitter и аккаунты социальных сетей
- Предпросмотр Внешнего Вида: Просмотреть отображение контента на разных платформах социальных сетей
- Генерация и Копирование Тегов: Сгенерировать код мета-тегов и скопировать в секцию <head> вашего сайта
Технические детали
Протокол Open Graph
Open Graph использует мета-теги с префиксом og: в HTML <head> для определения метаданных страницы. Основные свойства включают og:title (заголовок страницы), og:type (тип контента, такой как article, website, video), og:image (URL изображения предпросмотра), og:url (канонический URL) и og:description (резюме контента). Дополнительные свойства включают og:site_name, og:locale, article:published_time и video:duration. Эти теги анализируются платформами социальных сетей при обмене URL для создания богатых карточек предпросмотра.
Twitter Cards
Twitter Cards расширяют Open Graph тегами с префиксом twitter: для функций, специфичных для Twitter. Доступны четыре типа карточек: summary (по умолчанию с квадратным изображением), summary_large_image (большое прямоугольное изображение), app (продвижение мобильного приложения) и player (видео/аудио плеер). twitter:card указывает тип, а twitter:site и twitter:creator ссылаются на аккаунты @ Twitter. Twitter возвращается к тегам Open Graph, если теги, специфичные для Twitter, отсутствуют.
Требования к Изображениям
Разные платформы имеют специфические требования к изображениям: Facebook рекомендует 1200x630px (соотношение 1.91:1), минимум 200x200px, максимум 8MB; Twitter summary_large_image требует соотношения 2:1 (предпочтительно 1200x600px), карточка summary соотношение 1:1 (минимум 144x144px); LinkedIn поддерживает 1200x627px (1.91:1); WeChat требует от 300x300px до 1068x455px. Изображения должны быть в формате JPG, PNG или WEBP. Использование нескольких тегов og:image обеспечивает резервные варианты.
Часто задаваемые вопросы
- Что такое теги Open Graph?
- Теги Open Graph - это мета-теги, которые контролируют, как URL отображаются при публикации на платформах социальных сетей. Они определяют заголовок, описание, изображение и другие свойства для предпросмотра ссылок.
- Какие платформы используют Open Graph?
- Facebook, LinkedIn, Pinterest и многие другие платформы используют Open Graph. Twitter использует похожие теги Twitter Card. Оба могут сосуществовать на одной странице.
- Каков рекомендуемый размер изображения?
- Рекомендуется: 1200x630px для Facebook/LinkedIn. Минимум: 600x315px. Используйте формат PNG или JPG. Размер файла менее 8MB.
- Как отладить теги Open Graph?
- Используйте Facebook Sharing Debugger, Twitter Card Validator или LinkedIn Post Inspector. Эти инструменты показывают, как будут отображаться ваши теги и выявляют ошибки.
- Нужны ли разные теги для каждой платформы?
- Теги Open Graph работают для большинства платформ. Добавьте теги Twitter Card (twitter:*) для специфических функций Twitter. Используйте теги og:* как запасной вариант для всех платформ.
Связанная документация
- Протокол Open Graph - Официальная документация протокола Open Graph
- Теги Twitter Card - Руководство по мета-тегам Twitter Card
- Публикация в Facebook - Лучшие практики публикации в Facebook
- LinkedIn Post Inspector - Инструмент предпросмотра и отладки постов LinkedIn
- Руководство по SEO мета-тегам - Полное руководство по SEO и социальным мета-тегам