Обычно с помощью оформления мета-тегов добиваются любви со стороны поисковиков, но во многих случаях переходы с соцсетей могут составить не последнюю долю трафика. Люди любят делиться друг с другом интересными находками, и возможно ваш контент многие сочтут интересным и поделятся им в соцсетях (поэтому важно иметь на своем сайте кнопки шаринга). Важно, чтобы расшаренная ссылка выглядела привлекательно и, главное, информативно.

Иногда, вставив ссылку, например, на фейсбук, можно получить превью вот такого вида:

Скриншот того, как выглядит ссылка без опенграфа

Т.е. тупо заголовок и адрес, и если повезет — описание из description. Такие ссылки иногда даже выглядят как спам.

Правильно оформленная страница будет выглядеть примерно так:

Скриншот того, как выглядит ссылка с опенграфом
Тут даже есть переключалка для выбора картинки.

Такая превьюха создается с помощью разметки Open Graph, или OG. На самом деле этих OG-тегов огромная куча, с их помощью можно гибко управлять превьюшкой, но самые основные, которые являются мастхэвом для многих сайтов, это:

  • og:title — Заголовок
  • og:image — Картинка
  • og:type — Типа контента (статья, видео, музыка, плейлист и т.д.)
  • og:description — Описание (не более 300 знаков)

Как использовать

OG-теги, как и другие мета-теги, вставляются в <head> и имеют вот такой синтаксис:

Пример страницы, размеченной опенграфом

Для og:image можно также задавать размеры (og:width и og:height) и alt-текст.

Пример оформления тегов для картинки

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

У фейсбука есть специальный инструмент, через который можно тестировать свои превью — Facebook Crawler.

Инструмент для отладки опенграфа

Для сайтов на WordPress OG-теги могут генерироваться SEO-плагинами. На этом сайте стоит плагин Yoast, который генерирует вот такого вида разметку:

Пример с моего сайта

Полезные ссылки: