Микроразметка ​Open Graph: что это и как настроить

Благодаря микроразметке можно пометить содержимое страницы таким образом, чтобы поисковикам было легче определить, что за информация присутствует и улучшить сниппеты. Также она поможет добавить для ссылок на сайты в социальных сетях логотипы, заголовки и описания.

Протокол Open Graph

Open Graph задаёт текстово-графический анонс, отображаемый, когда добавляется ссылка на сайт в социальную сеть. Он поможет настроить изображение в превью, заголовок, описание, ссылку. Сегодня этот стандарт успешно функционирует в большом количестве социальных сетей и мессенджеров: Одноклассниках, ВКонтакте, Twitter, Telegram, Viber и т.д.

Зачем вообще Open Graph?

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

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

На что ещё влияет микроразметка

• в текст или в посте будут релевантные содержанию заголовок и картинка, а не случайный набор кода;
• заголовок будет виден полностью и не будет обрезанным, а размер картинки будет правильным, как и сама картинка;
• сниппет будет самостоятельным постом, а не ссылкой, для которой нужны будут также описание и картинка;
• хорошее превье повысит поведенческие факторы и принесет больше трафика.

В микроразметке для соцсетей стоит добавить социальные кнопки «Поделиться», «Like» и прочие. Благодаря этому нет нужны копировать и вставлять ссылку, а также увеличивается скорость распространения контента.

Ключевые теги Open Graph

Протокол Open Graph включает в себя несколько тегов, которые вставляются в head страницы. К таким тегам относятся:

• og:title — название статьи;
• og:description — описание статьи (необязательно);
• og:image — ссылка на картинку;
• og:type — тип добавляемого материала: article (статья), movie (кино) и т.д.;
• og:url — ссылка на саму страницу сайта, которая будет добавлена в социальную сеть.

Open Graph в Twitter

В Twitter присутствует свой набор мета-тегов - Twitter Cards. В разметке они начинаются с twitter:, а не с og:.

Микроразметка schema.org

Она появилась в 2011 году при участии Google, Microsoft, Yahoo. Со временем её стал поддерживать и российский Яндекс.

Schema.org появилась, чтобы улучшить качество поисковой выдачи. Задаётся она тегами с дополнительными атрибутами, благодаря чему поисковые системы понимают, что находится на конкретной странице.

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

Атрибуты schema.org

• itemscope - область действия словаря микроданных и область данных. Благодаря itemscope поисковик определяет, что имеется описание какого-то объекта. Этот атрибут всегда применяется вместе с атрибутом itemtype;
• itemtype - адрес словаря, использованного для создания разметки;
• itemprop - добавление свойств к элементу (имя-значение).

Типы данных schema.org

Обычно используются такие типы данных:

• статьи (article);
• хлебные крошки (breadcrumblist);
• товары (product);
• отзывы (review);
• faq (faqpage);
• организации (organization)