Мета-теги Open Graph, meta property

Автор Макс Пуля

Мета-теги Open Graph, meta property Мета-теги Open Graph, meta property

Наверное, каждый веб-мастер новичок сталкивался с проблемой "шаринга" статьи в социальные сети. То картинка не отображается (или не та картинка), то текст куда-то пропал.

И вот, на помощь пришел протокол Open Graph! Использование этого протокола в корне меняет дело. При шаринге, статья отображается как надо и проблем больше нет. Применение протокола Open Graph никак не влияет на SEO оптимизацию сайта, он нужен только для социальных сетей.

Мета-теги Open Graph выглядят следующим образом:

<meta property="og:url" content="https://epicblog.net/147/optimizatsiya-sajta-dlya-poiskovykh-sistem-google-yandeks-i-drugikh.html" />
<meta property="og:title" content="Оптимизация сайта для поисковых систем Google, Яндекс и других - Epic Blog - эпик блог для всех" />
<meta property="og:description" content="Поисковая оптимизация сайта. SEO оптимизация веб-сайта для поисковых систем Яндекс и Google." />
<meta property="og:type" content="article" />
<meta property="og:image" content="https://epicblog.net/media/k2/items/cache/f7abac252ae5ed68121b92ba7a669d87_M.jpg" />

Они сообщают социальной сети какое отобразить название, откуда взять изображение и т.д.

Хочу сразу отметить, что прописывать этот код для каждой страницы сайта - это мрак и нудная работа. Если у Вас сайт на обычном HTML, то деваться некуда - придется прописывать вручную. А если Вы используете популярную CMS, то можете поискать дополнительные расширения, которые будут вставлять мета-теги Open Graph в код страницы автоматически. Для Joomla есть такие плагины - они сильно облегчают жизнь веб-мастеру.

Однако, если сайт на обычном HTML, то нужно знать, за что отвечает каждая строчка протокола Open Graph. Всё предельно просто:

og:url - это ссылка, с помощью которой пользователи перейдут на материал или статью;
og:title - это название статьи или материала;
og:description - это краткое описание статьи или материала;
og:type - это тип материала (статья это или видео, например);
og:image - изображение, которое будет отображено в социальной сети при шаринге.

В случае, если Вы будете использовать расширение для CMS - плагин будет подтягивать данные в протокол Open Graph из известных тегов: title и description, так что не забывайте заполнять эти теги при написании материалов.

Всем удачи и добра!

Макс Пуля

Макс Пуля

Приветствую! Присоединяйтесь к сообществу Epic Blog и выражайте свои мысли.