Для чего на сайте нужны мета-теги OpenGraph?

Продвигая сайт, важно не только создавать интересный контент, но и активно делиться этой информацией в соцсетях. Специальный протокол OpenGraph будет полезен для привлечения большого количества трафика из соцсетей, а также для корректного отображения страниц сайта в поисковой выдаче. Прямого влияния на поисковую оптимизацию протокол не оказывает, но даёт качественные ссылки.

OpenGraph — это словарь микроданных, состоящий из мета-тегов. Его разработали специалисты Facebook, чтобы ссылки хорошо и качественно отображались в ленте соцсети. С помощью этих мета-тегов можно поставить нужные заголовки и изображения в сниппет публикации в соцсетях. Изначально разметку OpenGraph разрабатывал Facebook на себя, но её используют также и другие соцсети: ВКонтакте, Одноклассники, Twitter. Поэтому разметка OpenGraph на сайте поможет в работе с любыми соцсетями. Facebook и Twitter обладают собственной аналитикой, которая скорректирует ссылку и подскажет необходимые мета-теги. Например, в Twitter есть уникальный мета-тег, позволяющий указать описание картинки для людей со слабым зрением. Сейчас протокол OpenGraph поддерживается и регулируется Open Web Foundation.

Протокол OpenGraph позволяет управлять и контролировать данные, формирующиеся в превью (структурирует информацию о странице) в посте, когда пользователь делится ссылкой в соцсетях. Протокол состоит из нескольких строчек мета-тегов, которые нужно внедрить в код сайта. Эти мета-теги помогают сформировать желаемый вид поста в соцсетях. Пост выглядит красиво, ссылка на источник активна.

Исходный код протокола размещается в html-коде страницы, часто после основных мета-тегов. Мета-теги OpenGraph можно перечислить списком:

"og:locale" — локализация (язык) сайта. По умолчанию можно использовать значение "ru_RU";

"og:type" — тип страницы сайта (новость, статья, фото, видео и др.). по умолчанию можно использовать значение "article";

"og:title" — название статьи;

"og:description" — краткое описание, которое отображается на превью;

"og:url" — ссылка на страницу сайта;

"og:image" — ссылка на картинку, которая будет отображаться в посте;

"og:site_name" — название сайта.

В самом начале работы нужно добавить к тегу html такой код: «http://ogp.me/ns#». Затем мета-теги с содержимым вставляются в код страницы. Среди этих мета-тегов есть 4–5 обязательных, без которых разметка OpenGraph не будет работать, — это og:title, og:type, og:description, og:image и og:url. Чем больше на вашем сайте контента, чем он разнообразнее, тем больше мета-тегов вам придётся добавить. Мета-теги добавляются в общий тег < head>. Код будет выглядеть примерно так:

< head>

< meta property="og:title" content=" — название.

< meta property="og:description" content=" — описание материала (до 295 знаков).

< meta property="og:image" content=" — картинка.

< meta property="og:type" content="article"/> — тип материала. В данном случае, статья, но здесь специальным образом могут указываться новость, видео, каталог товаров и др.

< meta property="og:url" content= "ссылка на веб-страницу, которая будет добавляться в соцсеть" />.

< /head>

Не беда, если вы добавите лишние мета-теги. Но не забывайте, что из-за этого увеличится вес HTML-документа. Оптимальный размер картинок — 1200×630 пикселей. Соотношение их сторон должно быть примерно 1,91:1.

Когда человек нажимает на кнопочку «Поделиться», программа переносит в соцсеть тег title и первую картинку. На многих сайтах тег title либо нечитабелен, либо вообще отсутствует. Этот тег необходим, поэтому его обязательно нужно включить в разметку OpenGraph. Тег image также обязателен, иначе в соцсети будет загружаться картинка, не соответствующая теме статьи. Иногда картинка не загружается вовсе.

Кроме введения протокола OpenGraph полезно будет добавить на сайт кнопки «Поделиться» в разных соцсетях. Это упростит работу, как обычному посетителю вашего сайта, так и SEO-оптимизатору. Для наиболее распространённых CMS-систем, таких, как WordPress, Opencart и Joomla, уже разработаны готовые плагины, помогающие внедрить разметку OpenGraph. На сайт будет привлечено большое, неограниченное количество трафика. Пост будет оформлен красиво и читаемо. Помогает оформить анонс и превью.

У протокола Open Graph есть аналоги. Среди них можно назвать такие словари микроразметки, как Microformats.org, Schema.org, Dublin Core. Microformats.org сложно внедряется. Словарь Schema.org активно поддерживают поисковые системы. Он очень объёмный, включает в себя более миллиона различных свойств и характеристик, которые можно включить в код микроразметки. Dublin Core разработан для баз данных, библиотек и музеев, поэтому применяется узко. В отличие от своих аналогов, словарь Open Graph прост и удобен во внедрении и универсален в использовании.