Для чего использовать разметку Open Graph?

SEO работает не только с поиском, а и в соцсетях. Как пример - использование протокола Open Graph. Это привычное “Поделиться постом”, т. е. кнопки соцсетей на вашем сайте.

Разметка Open Graph

Рис. 1 - Кнопки шеринга для соцсетей

Если вы хотите, чтоб анонсы постов в Фейсбук, Твиттере, Инстаграм или других сетях отображались корректно, следует внедрить ее на сайт.

Кнопки шеринга работают и повышают доверие поисковиков, т. к. репост служит естественной ссылкой.

1. Что такое и как выглядит Open Graph

Разметка или протокол Open Graph изначально был создан для Facebook, но сегодня с ним работают все социалки, и даже мессенджеры.

Микроразметка Open Graph — разметка страницы в виде HTML-кода, которая размещается в теге <head>. Основана на синтаксисе RDF.
Open Graph простыми словами — метатеги, которые передают соцсетям информацию, что вы указали, и показывают, какой именно контент использовать при репостах, и в каком виде его следует отображать.

В чем преимущества?

заголовок, описание, изображение, которые используются для репоста при нажатии на кнопку “Поделиться” теперь можно оптимизировать под анонс;
сниппет имеет вид короткого поста, т. е. репостится в соцсети без ручного добавления текста и картинки).

Микроразметка позволяет репосту быть кликабельным — он отображается верно: показывает ту информацию, которой вы желаете поделиться. В итоге ваш анонс в соцсети выглядит завершенным и удобочитаемым для пользователей.
А не тянется случайный текст и картинка, что находится на странице вместо изображения поста.

Верная микроразметка Open Graph

Рис. 2 — Пример верно внедренного Open Graph

Когда вы желаете репостнуть статью в соцсети и кликаете на иконку нужной сети, включается работа микроразметки.

Неверная разметка Open Graph

Рис. 3 — Пример неверно внедренного Open Graph

Именно микроразметка отвечает за верность отображения сниппета в соцсетях. В противном случае тянутся случайная картинка, заголовок и описание анонса.

Разметка помогает в соцсетях выглядеть привлекательнее — так в соцсетях вы видите отображение рис. 2. А также создавать блоки рекомендуемого контента в Google AdSence.

2. Основные теги разметки

Существует официальный сайт разметки на русском языке для разных типов объектов. И английская версия.

Однако, есть и отдельные рекомендации для некоторых соцсетей:

В разделе <head> размещаются теги <meta>. А внутри них — атрибуты property и content.

У property в свою очередь существуют опциональные элементы, которые нужно обозначить:

Тег	Описание
og:url	URL, что идентифицирует ваш объект
og:title	Заголовок элемента (статья, видео и пр.) с сайта. Размещается в атрибуте content
og:description	Краткое описание контента, max длина — 300 символов
og:image	Ссылка на баннер, который описывает статью, видео, и т. д.
og:type	Тип объекта (статья, музыка, видео, сайт, и пр.)
og:name	Название сайта, его видно в анонсе поста
og:locale	Если у вас несколько языковых версий сайта, используется locale

Как это отображается в редакторе:

url:

<meta property=«og:url» content=«https://itforce.ua/blog/kak-samostoyatelno-sozdat-logotip/» />

title:

<meta property=«og:title» content=«Как создать логотип самостоятельно и бесплатно?»» />

description:

image:

<meta property=«og:image» content=«https://itforce.ua/wp-content/uploads/2021/03/rus-a_4993_09-03-2021_09-37.jpg» />

type:

<meta property=«og:type» content=«article» />

name:

<meta property=«og:site_name» content=«ITForce» />

locale:

<meta property=«og:locale» content=«ru_RU» />

Изображения

Для каждой соцсети предполагается свой размер изображений. Поэтому существует 2 способа решения этого вопроса:

прописать параметры изображений для каждой социалки отдельно.

Тогда вы будете использовать дополнительные теги (fb:image, twitter:image, vk:image) для Фейсбук, Твиттер, ВКонтакте и пр..

Минус этой реализации — картинка будет резаться сетями не всегда адекватно.

задать единый размер для всех соцсетей опциями width (ширина) height (высота) в пикселях, и тогда каждая сеть будет обрезать картинку под свои параметры.

Как это отображается в коде:

Микроразметка OpenGraph

Рис. 4 — Заполненные поля в property и content

Итого, для нашего сайта мы прописывали:

locale — у нас 2 версии сайта: русская и украинская;
type — поделиться можно статьей или кейсом, а это article;
title — заголовок публикации;
description — краткое описание материала;
url — адрес страницы;
site_name ITForce — имя нашего сайта и компании;
image — баннер поста тянется из медиафайлов на сервере, это внутреннее изображение страницы, не превью;
image_width и image_height — ширина и высота исходного изображения для сниппета.

Параметры картинки сделали единые для всех сетей — каждая из них для превью поста будет обрезать изображение под свои актуальные требования.

3. Как внедрить Open Graph на сайт?

Реализовать микроразметку Open Graph на сайте можно 2 способами:

1. Вручную (составить программисту ТЗ для внедрения, он пропишет разметку в коде сайта).

Например, ТЗ для блога:

Перед тегом <head> на всех страницах сайта добавить код:

<html prefix=«og: http://ogp.me/ns#»>

Между тегами <head></head> на всех страницах сайта внести метаописание:

Где:

[locale] – язык и страна;
[title] – title данной страницы;
[description] – description данной страницы;
[url] – URL страницы;
[img_url] – основное изображение страницы.

Например, для страницы [страница] метаописание будет виглядеть так:

2. С помощью плагинов для CMS.

WordPress или Yoast SEO;
Joomla;
Битрикс;
Opencart;
Drupal;
Magento;
сайты на Tilda.

После внедрения разметки на сайт нужно проверить верность отображения данных при репосте.

4. Где проверить корректность отображения разметки

Верность показа проверяется 2 способами:

1. Попробуйте самостоятельно репостнуть статью или кейс с вашего сайта в любую из соцсетей.

2. Автоматически:

Инструмент от Фейсбук.

Open Graph отладчик Facebook

Рис. 5 — Отладчик разметки в Фейсбук

Также проверить структурированные данные можно в сервисе от Google.

Вот как выглядит результат проверки:

OpenGraph отладчик Google

Рис. 6 — Отладчик Google

Валидатор от Яндекс.

Для работы надо ввести URL страницы, которой хотите поделиться, или фрагмент кода.

Отладчик Google

Рис. 7 — Валидатор от Яндекс

Для Twitter есть отдельный проверщик.

Отладчик Twitter

Рис. 8 — Проверка в Твиттер

Как будет выглядеть правильное отображение репоста:

Корректность репоста в Фейсбук

Рис. 9 — Корректный репост

В поле “Расскажите об этом” настоятельно рекомендую придумать какую-то завлекуху — коротко написать, почему ваша ссылка заслуживает внимания, подготовить “лид” и “прогреть” пользователей. Так они сразу поймут, что за инфа по ссылке.
Чем когда вы просто кинете линк на какой-то пост без объяснения, зачем вообще на него обращать внимание людям.

Кстати, статистика просмотров, открытий, лайков, комментов и репостов у постов с “историей” выше, чем у одинокой голой ссылки.
А это помогает улучшению поведенческих факторов, что отражается на все тех же лайках, комментариях и репостах. В конечном итоге на переходах на сайт и росте трафика.

В соцсетях “любят глазами” — вероятность репоста анонса с верным отображением выше, чем у такого же анонса, но со случайно подобранным контентом (изображение, текст).