Гайд по использованию тегов Open Graph
Что такое метатеги Open Graph?
Теги Open Graph — короткие фрагменты кода, которые помогают правильно воспроизводить ссылку на ваш сайт в ведущих социальных сетях. Эта система разметки веб-страниц впервые была создана для Facebook, но затем ее взяли на вооружение Twitter и LinkedIn. Ее также поддерживают самые популярные мессенджеры Viber, WhatsApp и Telegram.
Теги социальных сетей следует искать в разделе <head> рядом с обычными метаданными для поисковых систем. Их можно узнать по идентификатору «og:» в начале. Обычно такие элементы добавляются в код автоматически, хотя вы можете прописывать их вручную.
Для чего следует использовать теги OGP?
Теги Opengraph позволяют самостоятельно выбирать ключевые элементы воспроизведения ссылки в социальных сетях. К ним относятся изображения, заголовок и краткое описание — почти то же, что мы указываем для поисковых роботов. Вы также можете указать язык, региональные особенности и тип контента, чтобы повысить эффективность рекламы. Кроме того, у вас есть возможность подключать внутренние инструменты соцсети Facebook.
Если игнорировать этот важный инструмент, большинство элементов воспроизведения будут определяться автоматически. Вполне возможно, что система сделает скриншот не самой привлекательной части страницы, например, пространства между двумя элементами. Это относится и к описанию — в него попадет короткий фрагмент текста рядом с релевантным ключевым словом.
Готовы рискнуть, доверив успех своей маркетинговой кампании случайному отбору? Если нет, сосредоточьтесь на изучении разметки Open Graph.
Различные типы тегов Opengraph
Начнем с синтаксиса. Чтобы добавить метатег OG на свой сайт, откройте раздел <head> в его коде. К нему прилагается следующая строка: <meta property=”AAA” content=”BBB” />. AAA — название тега, BBB — переменная, то есть значение, которое он передает социальной сети.
В разметке Open Graph есть четыре обязательных элемента и еще несколько дополнительных. Последние тоже очень важны, особенно если вы часто пользуетесь контекстной рекламой.
og:URL
Ссылка на каноническую версию страницы, которой вы хотите поделиться. Этот тег OG гарантирует, что пользователи социальной сети увидят именно тот контент, который вы для них подготовили. Он особенно важен, если вы создавали несколько вариантов веб-сайта в процессе разработки, тестирования и исправления ошибок. Указывая правильный URL, вы также консолидируете данные относительно лайков и других взаимодействий — это облегчает сбор статистики.
Синтаксис употребления тега:
<meta property=”og:url” content=”https://example.com/main.html”/>.
og:Title
Заголовок вашей страницы, которая будет воспроизводиться в ссылке. Создавая его, помните о правилах копирайтинга: пишите коротко, вкладывайте максимум смысла, старайтесь не повторяться и избегать откровенного кликбейта. Хотя официальных рекомендаций по длине заголовка нет, желательно соблюдать диапазон от 40 до 60 знаков с пробелами — так же, как у метаданных для поисковиков. Еще одна важная рекомендация: сосредоточьтесь на контенте и не употребляйте название бренда. Во-первых, логотип обычно выносится в изображение. Во-вторых, это сэкономит место и повысит доверие пользователей.
Синтаксис употребления тега:
<meta property=”og:title” content=”Short instruction how to use Open Graph Protocol”/>.
og:Description
Краткое описание, которое будет отображаться под заголовком. Правила написания этого тега Open Graph (open graph tag) такие же, как и в тексте для поисковых машин. Пишите коротко и по сути — дайте пользователю мотивацию кликнуть и перейти по ссылке. Используйте триггерные слова и создавайте интригу. Но забудьте о кликбейте и обмане, иначе они приведут вас к блокировке за спам.
По длине текста Facebook рекомендует ограничиваться 2–4 короткими предложениями. Но для корректного воспроизведения текста в других социальных сетях и мессенджерах стоит помнить о совете Google: оптимальный размер — до 160 символов с пробелами.
Синтаксис употребления тега:
<meta property=”og:description” content=”Легкая информация по использованию OG tags в вашей webpage properly”/>.
og:Image
Важнейший тег, на который приходится максимальный процент площади воспроизведения ссылки. Содержит ссылку на картинку, которую вы покажете пользователю. К нему добавляют изображения с соотношением сторон 1,91:1 или 2:1,05. Минимальное разрешение для корректного воспроизведения на всех девайсах независимо от характеристик экрана — 1200х630.
Чтобы эффективно вести маркетинг в социальных сетях, тег Open Graph image следует добавлять на все важные страницы — главную, блог, контакты, описание условий сотрудничества и т.д. Создавайте уникальные изображения, соответствующие контенту. Для карточек товаров и других коммерческих разделов можно выбрать стандартизированную картинку, например, логотип компании.
Синтаксис употребления тега:
<meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg”/>.
og:Type
Невидимый тег. Он влияет на эффективность поиска ссылки и результативность маркетинговых кампаний, а не на воспроизведение в социальных сетях. Для сортировки по типу контента используются следующие переменные:
- website — просто страница без мультимедийного содержимого;
- article — статья в блоге или разделе новостей;
- book — электронная книга;
- profile — профиль в социальных сетях или на других сервисах;
- music — аудиоконтент;
- video — ссылка на видеоролик.
Тег og:type можно использовать для сортировки контента на более низком уровне. Например, по имени исполнителя или режиссера фильма. Полный список переменных изложен в официальном справочнике Open Graph.
Синтаксис употребления тега:
<meta property=”og:type” content=”article”/>.
og:Locale
Язык и региональные особенности контента. Тег используется для облегчения поиска и корректного воспроизведения ссылки. Если вы целитесь на аудиторию США, можете вообще не добавлять этот тег — по умолчанию социальные сети и мессенджеры распознают его как «en_US».
Синтаксис употребления тега:
<meta property=”og:locale” content=”en_GB”/>.
FB:app_id
Специализированный метатег Open Graph для Facebook. Он позволяет привязывать некоторые сервисы социальной сети к ссылке. Если вы преследуете коммерческие цели, вам следует подключить статистику для анализа эффективности. Можно также добавить интеграцию других платформ или открыть комментарии. Идентификаторы всех сервисов указаны на панели приложений.
Синтаксис употребления тега:
<meta property=”fb:app_id” content=”1234567890″/>.
Дополнительные средства разметки для разных типов мультимедийного контента
Чтобы повысить эффективность размещения ссылки в социальных сетях, следует сделать ее яркой и привлекательной. В этом помогут средства визуализации — изображения, видеоролики, геоданные и трехмерные объекты. Разбираемся, как ссылаться на них с помощью тегов OG.
Изображения
Выше мы уже рассказывали, как загружать картинки с помощью тега og:image. Но в некоторых случаях его нужно модифицировать:
- og:image:url — полный аналог обычного тега. Им лучше пользоваться, если вы загружаете несколько изображений — они будут изменяться после обновления страницы;
- og:image:secure_url — то же самое, но с защищенной ссылкой типа «https://»;
- og:image:type — формат файла. Социальные сети распознают jpeg, gif и png;
- og:image:width — установка ширины изображения. Желательно использовать, если картинка по ссылке имеет неоптимальные размеры;
- og:image:height — то же самое, но для высоты.
Видео
Opengraph Protocol описывается тегом og:video. Чтобы ролик воспроизводился в ленте социальной сети, следует давать ссылки с защищенным префиксом «https://» и использовать один из двух форматов — MPEG-4 или Shockwave Flash. Для правильного показа контента следует помнить о таких модификациях тега:
- og:video:url — ссылка для публикации нескольких видеороликов;
- og:video:secure_url — то же самое для защищенного источника;
- og:video:type — формат ролика. Может принимать значения «application/x-shockwave-flash» или «video/mp4». Обязательно указывается для воспроизведения в ленте;
- og:video:width — ширина окна для видео. Используется для контента неоптимального размера;
- og:video:height — то же самое для высоты.
3D-объекты
Рекомендуем ознакомиться с требованиями к такому типу мультимедийного контента, прежде чем добавлять его в свою ссылку. Если коротко, вы ограничены форматами FBX 2015, gITF 2, COLLADA, OBJ и DAE. При этом доступен не весь функционал, использовавшийся в разработке.
Чтобы вставить трехмерный объект, используйте синтаксис:
<meta property=”og:type” content=”threed.asset”/>.
Ссылка указывается в теге:
<meta property=”og:asset” content=” https://example.com/assets/standard.obj”/>.
И последним штрихом будет заголовок, который прописывается в стандартном теге og:title.
Как интегрировать протокол Opengraph в веб-страницу?
Поддержка разметки для социальных сетей уже появилась у большинства CMS и плагинов к ним. Кроме того, существуют приложения для автоматизации, которые вставляют ее на все необходимые страницы в считанные секунды. Однако вы все еще можете потренироваться, прописав метаданные вручную.
WordPress
Лучшим выбором для этой CMS будет плагин Yoast:
- Установите его, откройте меню и войдите в режим редактирования страницы.
- Пролистайте этот раздел до самого низа, где расположено окно «Yoast SEO».
- Перейдите на вкладку «Social» и выберите «Facebook».
- Заполните разделы «Title» и «Description», укажите ссылку на изображение.
Одна из эффективных практик для WordPress — выбор общего шаблона воспроизведения ссылок для всего сайта. Войдите в настройку «Yoast», откройте разделы «Social» и «Facebook». Переведите переключатель под надписью «Add Open Graph meta data» в положение «Enabled». После этого ссылка по умолчанию будет использовать шаблон. Если необходимо изменить способ воспроизведения для отдельной страницы, вернитесь к приведенной выше инструкции.
Shopify
Эта система управления контентом не слишком гибкая. Она автоматически дублирует OG-теги из метаданных для поисковых систем. Единственное, что вы можете изменить, — выбрать шаблонное изображение для всех страниц сайта. Для этого открывайте разделы меню в следующей последовательности:
- Online Store.
- Themes.
- Customize.
- Theme settings.
- Customize.
- Social media.
После последнего шага вам останется только указать ссылку на подготовленную картинку. Все остальное можно редактировать только вручную в коде страницы.
Wix
Известный конструктор сайтов также автоматически подтягивает теги из метаданных поисковых роботов и даже выбирает первое по порядку изображение на странице. Однако у него есть возможность редактирования схожей информации на каждой странице. Для этого следует выбрать пункт «Social share» в режиме редактирования. Общий шаблон для всего сайта создается в аналогичном разделе главного меню. Это одна из самых простых и гибких CMS для маркетинга в социальных сетях.
Squarespace
По умолчанию копирует метаданные социальных сетей. Но изображение вставляется на каждую страницу в отдельности. Открывайте режим редактирования и ищите в нем раздел «Social Image», содержащий строку для загрузки картинки. Для использования других типов OG-тегов в меню редактирования перейдите в раздел «Advanced» и выберите инструмент «Page Header Code Injection» — окно разработчика.
Ручная интеграция
Выше мы описали все виды тегов, но стоит собрать их в одном месте, чтобы не упустить ничего важного:
- <meta property=”og:url” content=”https://example.com/main.html”/>.
- <meta property=”og:title” content=”Short instruction how to use Open Graph Protocol”/>.
- <meta property=”og:description” content=”Легкая информация о том, как использовать OG tags в вашей webpage properly”/>.
- <meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg”/>.
- <meta property=”og:video” content=”https://example.com/blog/wp-content/uploads/2022/11/video.mp4″/>.
- <meta property=”og:video:type” content=”video/mp4″/>.
- <meta property=”og:type” content=”threed.asset”/>.
- <meta property=”og:asset” content=” https://example.com/assets/standard.obj”/>.
- <meta property=”og:type” content=”article”/>.
- <meta property=”og:locale” content=”en_GB”/>.
- <meta property=”fb:app_id” content=”1234567890″/>.
Все теги вписываются в раздел <head>. На самом деле их расположение относительно друг друга и других элементов не имеет большого значения. Однако для простоты редактирования кода в будущем все метаданные следует собирать в одном месте.
Если вы предпочитаете ручное написание тегов, после их добавления следует проверить корректную работу ссылки и провести аудит. Однако мы настоятельно рекомендуем пользоваться инструментами автоматизации, например, Mega Tags или Web Code Tools. Это ускорит процесс и снизит количество синтаксических ошибок.
Как протестировать теги Open Graph?
Интересно, что этот этап обычно занимает больше времени, чем написание самих метаданных. В нем используются три инструмента:
- Facebook Sharing Debugger;
- Twitter Card Validator;
- LinkedIn Post Inspector.
Все они имеют одинаковый функционал или даже похожий интерфейс. Различие состоит только в социальной сети. После ввода ссылки в строку URL вы увидите, как она будет выглядеть в ленте. Сосредоточьтесь на графическом показе, то есть на OG image, title и description. Если у вас слишком мало времени, просто игнорируйте второстепенные теги типа type и app_id.
После внесения изменений нажмите кнопку «Scrape Again», чтобы краулер социальной сети снова индексировал страницу. Если воспроизведение остается прежним, используйте инструмент «Batch Invalidator» для очистки кэша. Повторяйте процесс в каждом из трех приложений, пока не получите идеальный результат.
Лучшие практики применения тегов Open Graph
Есть несколько секретов успеха, которые значительно ускорят интеграцию разметки социальных сетей и повысят качество результата:
- Используйте только канонические версии страниц в теге og:URL.
- Установите длину title в диапазоне 40–60 символов с пробелами, а description — от 120 до 160 символов.
- Создавайте уникальные изображения для наиболее популярных и содержательных страниц.
- Используйте шаблон разметки ссылок для остального сайта — его можно создать автоматически в большинстве CMS.
- Добавляйте изображение с разрешением от 1200х630. Это поможет ускорить загрузку и сохранить необходимый уровень качества.
И самый ценный совет: производите внешнее тестирование результатов. Покажите ссылку в социальных сетях фокус-группе из 15–20 человек и попросите оценить ее привлекательность. Когда речь идет о шаблоне, не помешает расширенное A/B-тестирование с несколькими вариантами. Выбрав лучший из них, вы повысите конверсию всего сайта.
Какие ошибки следует искать в метаданных?
Даже использование лучших инструментов автоматизации не избавляет от всех рисков. А ручное написание кода вообще увеличивает его в несколько раз. Поэтому для проверки страницы после публикации следует пользоваться специальными сервисами, например, SearchAtlas. Они способны находить следующие ошибки:
- Неправильный синтаксис. Социальные сети не способны распознавать ошибочные команды.
- Отсутствие тегов Opengraph. Выше мы уже писали о последствиях — система автоматически определит картинку и описание. При этом она не дает никаких гарантий, что это будет выглядеть привлекательно.
- Слишком много знаков в title и description. Текст не будет воспроизводиться полностью, поэтому вы не донесете свою мысль до пользователя.
- В URL указана неканоническая версия страницы. Вполне возможно, вы показываете в ленте не тот контент, который планировали.
- Изображение имеет нестандартный размер. Система покажет только его часть. Это всегда риск, ведь контекст имеет значение.
Теги Open Graph: когда и для чего их использовать?
Протокол OG — это мостик, объединяющий традиционные веб-сайты с лентами социальных сетей. Учитывая, что их аудитория исчисляется миллиардами, его использование обязательно для любых страниц независимо от типа и содержимого. Чтобы добиться успеха, соблюдайте четко определенный протокол — добавляйте все необходимые теги из списка, проводите внутреннюю диагностику и внешнюю оценку. Очень эффективным решением будет создание общего шаблона для всего сайта с последующим A/B-тестированием и выбором оптимального варианта.
Часто задаваемые вопросы
Что такое метатеги Open Graph?
Это короткие фрагменты кода, которые программируют показ ссылки на ваш сайт в социальных сетях. Они поддерживаются в Facebook, Twitter, LinkedIn, Viber, Telegram и WhatsApp.
Какие есть типы тегов Open Graph?
URL — ссылка, title — заголовок, description — короткий текст под ним, image — картинка, video — короткий ролик для воспроизведения в ленте, type — описание контента для поиска, locale — язык и региональные особенности, FB:app_id — подключение модулей Facebook.
Как интегрировать теги Opengraph в веб-страницу?
Вы можете вручную добавить соответствующий код в раздел <head> или воспользоваться инструментами автоматизации, имеющимися в большинстве популярных CMS, включая WordPress, Wix, Squarespace и Shopify.
Так же читайте
