Open Graph-теги
Технологии и инфраструктураМета-теги, управляющие отображением контента при публикации в социальных сетях вроде Facebook.
Определение
OG-теги (Open Graph теги) — это HTML-метатеги, размещаемые в секции `<head>` веб-страницы, которые контролируют, как эта страница отображается, когда её URL публикуется в социальных сетях, мессенджерах и других сервисах, генерирующих превью ссылок. Протокол был создан Facebook в 2010 году и с тех пор стал универсальным стандартом для превью ссылок во всём интернете. OG-теги определяют четыре основных свойства: `og:title` (заголовок в превью), `og:description` (текст описания), `og:image` (миниатюра превью) и `og:url` (каноническая ссылка). Дополнительные свойства, такие как `og:type`, `og:site_name` и `og:locale`, предоставляют дальнейший контекст. Без OG-тегов платформы пытаются угадать, что показать, сканируя страницу, что часто приводит к битым изображениям, обрезанному тексту или нерелевантному контенту.
Почему это важно
Каждая ссылка, опубликованная в социальных сетях, генерирует карточку превью. Эта карточка — первое и часто единственное, что люди видят перед тем, как решить, нажимать ли. Правильно настроенное OG-изображение, чёткий заголовок и убедительное описание могут многократно увеличить кликабельность по сравнению с генерическим или отсутствующим превью. Для издателей, распространяющих [флипбуки](/glossary/flipbook) через социальные каналы, карточка превью выступает как миниатюрная реклама контента. OG-теги также влияют на то, как ссылки отображаются в мессенджерах — WhatsApp, Slack и iMessage, что означает, что они влияют на поведение кликов далеко за пределами лент социальных сетей.
Как это работает в FlipLink
Функция [SEO и социальные превью](/features/seo-and-social-previews) FlipLink позволяет настраивать OG-теги для каждой публикации. Вы задаёте пользовательский заголовок, описание и изображение превью через настройки публикации, а FlipLink автоматически генерирует корректные метатеги `og:title`, `og:description`, `og:image`, `og:url` и `og:type`. Это означает, что каждая поделённая ссылка на флипбук отображает отполированную, брендированную карточку превью без необходимости редактирования HTML. OG-изображением может быть обложка флипбука или пользовательская графика, созданная для публикации в социальных сетях.
Контрольный список настройки
Следуйте этим шагам для правильной настройки OG-тегов и максимального эффекта от публикации в социальных сетях:
1. **Задайте og:title** — не более 60 символов. Используйте описательный заголовок, включающий тему контента, а не только название бренда. Пример: «Каталог весенней коллекции | ВашБренд» вместо просто «ВашБренд».
2. **Напишите og:description** — целевой диапазон 120-155 символов. Включите ценностное предложение или призыв к действию. Опишите, что читатель найдёт во флипбуке.
3. **Выберите og:image** — используйте изображение не менее 1200x630 пикселей. Обложка флипбука подходит, но пользовательская графика для социальных сетей с наложенным текстом может работать лучше. Избегайте изображений с большим количеством мелкого текста, так как они отображаются в виде миниатюр.
4. **Проверьте og:url** — это должен быть [канонический URL](/glossary/canonical-url) публикации. Если флипбук доступен по нескольким URL, og:url должен указывать на основной.
5. **Задайте og:type** — используйте «website» для лендингов и «article» для отдельных публикаций или записей блога.
6. **Протестируйте перед публикацией** — используйте Sharing Debugger Facebook, Card Validator Twitter или Post Inspector LinkedIn, чтобы увидеть, как ваша ссылка будет выглядеть, прежде чем делиться ею публично.
Часто задаваемые вопросы
**Что произойдёт, если не задать OG-теги?**
Социальная платформа попытается проанализировать вашу страницу и угадать заголовок, описание и изображение. Результаты непредсказуемы: вы можете получить случайное изображение со страницы, обрезанный HTML-заголовок или полное отсутствие превью. Явная установка OG-тегов полностью устраняет эту неопределённость.
**Влияют ли OG-теги на SEO-рейтинг?**
OG-теги не влияют напрямую на позиции в поисковых системах. Однако они значительно влияют на кликабельность опубликованных ссылок, что генерирует трафик. Больше трафика и вовлечённости могут косвенно улучшить вашу поисковую видимость со временем.
**OG-теги — это то же самое, что Twitter Cards?**
Twitter имеет собственные метатеги (`twitter:card`, `twitter:title`, `twitter:image`), но использует OG-теги как запасной вариант, когда специфичные для Twitter теги отсутствуют. Большинство платформ, включая LinkedIn, WhatsApp, Slack и iMessage, используют OG-теги как основной источник для превью ссылок.
Технические детали
OG-теги следуют простой HTML-структуре внутри элемента `<head>`:
- `og:title` — заголовок, отображаемый в превью. Должен отличаться от тега `<title>` страницы, если заголовок страницы включает навигационные хлебные крошки или суффиксы, не имеющие смысла в социальном контексте.
- `og:description` — краткое описание. В отличие от мета-описания для поисковых систем, описание OG должно быть оптимизировано для социального контекста: короче, прямолинейнее и ориентировано на действие.
- `og:image` — абсолютный URL файла изображения. Facebook рекомендует 1200x630 пикселей. Изображения меньше 200x200 пикселей могут не отображаться на некоторых платформах.
- `og:type` — категоризирует контент. Распространённые значения: «website», «article», «product» и «video.other».
- `og:url` — канонический URL. Предотвращает дублирование карточек превью, когда один и тот же контент доступен по нескольким URL.
- `og:locale` — указывает язык контента (например, «en_US», «ru_RU»). Полезно для многоязычных публикаций.
Когда URL публикуется, краулер платформы загружает страницу, считывает OG-теги из HTML и кэширует результат. Именно поэтому изменения в OG-тегах не вступают в силу сразу на платформах, которые уже закэшировали старое превью. Используйте инструмент отладки каждой платформы для принудительного повторного сканирования после обновления тегов.
Связанные термины
Платёжный шлюз
Сервис обработки онлайн-платежей, например Stripe, для продажи документов через FlipLink.
PDF.js
Открытая JavaScript-библиотека от Mozilla для отображения PDF-файлов непосредственно в браузере.
Progressive Web App (PWA)
Веб-приложение, работающее офлайн и устанавливаемое на устройство как нативное приложение.
Адаптивный дизайн
Автоматическая адаптация макета и контента для корректного отображения на экранах любых размеров.
Адаптивное встраивание
Код встраивания, автоматически подстраивающий размер флипбука под контейнер или ширину экрана.
Связанные функции
Доступно на других языках
Готовы изменить
свои PDF?
Присоединяйтесь к тысячам компаний, использующих FlipLink для создания интерактивного контента из PDF. Начните бесплатно — кредитная карта не нужна.