Мета-теги Open Graph: грамотно распространяем контент

Даже самый крутой контент бесполезен, если его никто не видит. Важно не только создавать материалы, но и делиться ими всеми доступными способами. Большой охват можно получить через социальные сети, но как оптимизировать содержимое для VK, Facebook, Twitter? Мы расскажем.

Что такое Open Graph?

На официальном сайте говорится, что протокол Open Graph обогащает возможности страницы в социальных медиа. Другими словами, это группа мета-тегов, рассказывающая социальным сетям о содержимом страниц, которыми вы делитесь. Благодаря этому ссылки из набора символов превращаются в понятные заголовки с картинками и пояснениями. Протокол Open Graph был создан Facebook’ом и сейчас регулируется Open Web Foundation.

Пример отображения ссылки на страницу с Open Graph

Почему Open Graph важен

Социальные сети – один из крупнейших источников трафика. Чтобы не терять посетителей и потенциальных клиентов, нужно использовать Open Graph. Прямого влияния на поисковую оптимизацию страницы протокол не оказывает, но делает ссылки в социальных сетях проще для восприятия. Ниже мы приводим список тегов и их назначение.

Мета-теги Open Graph

  • og:title – заголовок страницы. Для него есть ограничение в 65 символов. Напишите что-то длиннее – текст будет обрезан.
  • og:type описывает тип объекта на странице (веб-сайт, блог, книга, фильм и т.д.).
  • og:image — URL изображения, характеризующего страницу.
  • og:url – адрес сайта.
  • og:description – краткое описание страницы длиной не более 300 символов.
  • og:video – если на странице есть видео, здесь прописывается URL.
  • og:locale – язык страницы (ru_RU, en_GB, de_DE, etc.).
  • og:site_name – название сайта.

Использование тегов Open Graph

Чтобы добавить протокол Open Graph, нужно выполнить следующие шаги:

  • Добавить «http://ogp.me/ns#» к тегу html.
  • Вставить мета-теги с их содержимым и атрибутами между тегами head.
  • Использовать min 4 мета-тега Open Graph, которые являются обязательными: og:title, og:type, og:image и og:url.
  • Расширить разметку, если на вашей странице много разнообразного контента.

Вот как будет выглядеть HTML-код:

<html prefix="og: http://ogp.me/ns#">
<head>
<title>The Title of Your Article</title>
<meta property="og:title" content="Article on Anything by You" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.websiteaddress.com/article/" />
<meta property="og:image" content="http://www.websiteaddress.com/images/article_pic.jpg" />
...
</head>
...
</html>

Мета-теги Google+

Оптимизировать ссылки для Google+ можно 2 способами. В отличие от других социальных сетей, Google+, в первую очередь, ищет разметку Schema. Только потом, если ее не удалось найти, Google+ обращается к тегам Open Graph. Поэтому можно не заморачиваться и использовать Open Graph или добавить Schema. Алгоритм у разметки аналогичный, только теги немного отличаются. Вот основные:

  • name: соответствует og:title
  • description: соответствует og:description
  • image: соответствует og:image
  • author: URL профиля Google+
  • publisher: URL страницы Google+
<meta itemprop="name" content="The name of your website" />
<meta itemprop="description" content="The description of your website" />
<meta itemprop="image" content="https://websiteaddress.com/yourimage.png" />

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