Обычно с помощью оформления мета-тегов добиваются любви со стороны поисковиков, но во многих случаях переходы с соцсетей могут составить не последнюю долю трафика. Люди любят делиться друг с другом интересными находками, и возможно ваш контент многие сочтут интересным и поделятся им в соцсетях (поэтому важно иметь на своем сайте кнопки шаринга). Важно, чтобы расшаренная ссылка выглядела привлекательно и, главное, информативно.
Иногда, вставив ссылку, например, на фейсбук, можно получить превью вот такого вида:
Т.е. тупо заголовок и адрес, и если повезет — описание из 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, который генерирует вот такого вида разметку:
