Социальные мета-теги

Данной статьей мы открываем новый раздел нашего блога под названием “оптимизация”. Наверняка вы видели, что на многих страницах сейчас стоят кнопки, которые позволяют пользователям делиться ссылкой на тот или иной материал на сайте. В большинстве случаев, по нажатию на эту кнопку социальная сеть сама решает какое изображение и текст вставить на страницу. С помощью материала, изложенного в данной статье, вы сможете сами управлять этими публикациями: выбирать изображение и текст, которые будут сопровождать ссылку на ваш ресурс в путешествии по социальным медиа.

Сейчас мы с вами разберем, что же нужно сделать, чтобы повлиять на публикацию, на примере трех популярных социальных сетей: “Вконтакте”, “Twitter” и “Facebook”. Управление публикациями во всех социальных медиа происходит посредством размещения соответствующих meta-тегов в заголовке HTML-документа, если точнее, то между тегами <head></head>.

Социальные мета-теги для Facebook и Вконтакте

Вконтакте, как и Facebook используют для публикаций протокол OpenGraph, что позволяет прописать одни и те же теги для обоих социальных сетей. Кроме того, данный протокол используют и другие социальные медиа. Начнем с примера:


<meta property="og:url" content="http://dart.agency/" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Разработка сайтов" />
<meta property="og:description"  content="Разработка продающих сайтов" />
<meta property="og:image"  content="http://dart.agency/assets/images/logo.png" />

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

Основные параметры OpenGraph

В таблице ниже перечислены основные мета-теги, которые должна содержать страница.

og:url

Это абсолютный канонический адрес страницы, которой будут делиться люди. Данный URL должен быть без дополнительных параметров. Например, если человек делится страницей с мобильной версии сайта, то ссылка должна вести на канонический URL, на версию сайта для ПК.

og:title

Заголовок статьи или страницы. Желательно, чтобы он был достаточно информативен и не содержал в себе упоминаний о бренде.

og:description

Краткое описание материала (обычно 2-4 предложения). Будет отображаться под заголовком в социальных медиа.

og:image

Абсолютный URL-адрес изображения, которое будет сопровождать запись. Facebook советует использовать размер не менее 600x315 и размером не более 8 МБ. Идеально использовать изображение размером 1200x630

og:type

Тип публикации, к которому относится контент на странице. Каждый URL-адрес должен представлять собой отдельный объект, так что указанные множественные типы будут вызывать ошибку. Основные типы можно посмотреть здесь

Тестирование разметки

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

Социальные мета-теги для Twitter

Twitter в отличии от предыдущих социальных медиа использует свой стандарт для указания параметров веб-страницы. Так же мы начнём с примера:


<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@mot9_i" />
<meta name="twitter:title" content="Разработка сайтов " />
<meta name="twitter:description" content="Разработка продающих сайтов." />
<meta name="twitter:image" content=" http://dart.agency/assets/images/logo.png" />

Параметры карточек Twitter

В таблице ниже перечислены основные параметры карточек Twitter. Очень важно, чтобы весь текст не превышал длину в 140 символов.

twitter:card

Тип карточки Twitter. Типов карточек несколько, в данной статье мы упоминаем только “summary”

twitter:site

Аккаунт в Twitter. Необязательный параметр, если вы не хотите просматривать статистику по share-постам

twitter:title

Заголовок документа.

twitter:description

Описание документа. ВАЖНО! Описание не отображается на мобильных устройствах

twitter:image

Абсолютный путь до изображения. Минимальный размер 120x120px и объем не должен превышать 1 МБ

twitter:image:alt

Описание для изображения – аналог атрибута alt

Тестирование карточки Twitter

У Twitter также есть валидатор, который покажет, как социальная сеть воспринимает ваши мета-теги.

Вот, собственно, и все. Надеемся материал был вам полезен. Если у вас возникли вопросы по применению социальных мета-тегов, задавайте их в комментариях к данной статье.

Оцените статью:

Проголосовало: 48

Комментарии (0)