заказать звонок
+38 057 782-28-00
заказать звонок
Starting a new project?
получить консультацию
Читайте наш Telegram 👈
303
4

SEO работает не только с поиском, а и в соцсетях. Как пример - использование протокола Open Graph. Это привычное “Поделиться постом”, т. е. кнопки соцсетей на вашем сайте.

Разметка Open Graph

Рис. 1 - Кнопки шеринга для соцсетей

Если вы хотите, чтоб анонсы постов в Фейсбук, Твиттере, Инстаграм или других сетях отображались корректно, следует внедрить ее на сайт.

Кнопки шеринга работают и повышают доверие поисковиков, т. к. репост служит естественной ссылкой.


1. Что такое и как выглядит Open Graph

Разметка или протокол Open Graph изначально был создан для Facebook, но сегодня с ним работают все социалки, и даже мессенджеры.

Микроразметка Open Graph — разметка страницы в виде HTML-кода, которая размещается в теге <head>. Основана на синтаксисе RDF.
Open Graph простыми словами — метатеги, которые передают соцсетям информацию, что вы указали, и показывают, какой именно контент использовать при репостах, и в каком виде его следует отображать.

В чем преимущества?

  • заголовок, описание, изображение, которые используются для репоста при нажатии на кнопку “Поделиться” теперь можно оптимизировать под анонс;
  • сниппет имеет вид короткого поста, т. е. репостится в соцсети без ручного добавления текста и картинки).

Микроразметка позволяет репосту быть кликабельным — он отображается верно: показывает ту информацию, которой вы желаете поделиться. В итоге ваш анонс в соцсети выглядит завершенным и удобочитаемым для пользователей.
А не тянется случайный текст и картинка, что находится на странице вместо изображения поста.

Верная микроразметка Open Graph

Рис. 2 — Пример верно внедренного Open Graph

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

Неверная разметка Open Graph

Рис. 3 — Пример неверно внедренного Open Graph

Именно микроразметка отвечает за верность отображения сниппета в соцсетях. В противном случае тянутся случайная картинка, заголовок и описание анонса.

Разметка помогает в соцсетях выглядеть привлекательнее — так в соцсетях вы видите отображение рис. 2. А также создавать блоки рекомендуемого контента в Google AdSence.


2. Основные теги разметки

Существует официальный сайт разметки на русском языке для разных типов объектов. И английская версия.

Однако, есть и отдельные рекомендации для некоторых соцсетей:

В разделе <head> размещаются теги <meta>. А внутри них — атрибуты property и content.

У property в свою очередь существуют опциональные элементы, которые нужно обозначить:

Тег Описание
og:url URL, что идентифицирует ваш объект
og:title Заголовок элемента (статья, видео и пр.) с сайта. Размещается в атрибуте content
og:description Краткое описание контента, max длина — 300 символов
og:image Ссылка на баннер, который описывает статью, видео, и т. д.
og:type Тип объекта (статья, музыка, видео, сайт, и пр.)
og:name Название сайта, его видно в анонсе поста
og:locale Если у вас несколько языковых версий сайта, используется locale

 

Как это отображается в редакторе:

url:

<meta property=«og:url» content=«https://itforce.ua/blog/kak-samostoyatelno-sozdat-logotip/» />

title:

<meta property=«og:title» content=«Как создать логотип самостоятельно и бесплатно?»» />

description:

<meta property=«og:description» content=«Зачем брендировать бизнес. Что нужно учесть при создании лого . Иконка, текст, слоган или все вместе? Рисуем логотип в 5 сервисах.» />

image:

<meta property=«og:image» content=«https://itforce.ua/wp-content/uploads/2021/03/rus-a_4993_09-03-2021_09-37.jpg» />

type:

<meta property=«og:type» content=«article» />

name:

<meta property=«og:site_name» content=«ITForce» />

locale:

<meta property=«og:locale» content=«ru_RU» />

Изображения

Для каждой соцсети предполагается свой размер изображений. Поэтому существует 2 способа решения этого вопроса:

  • прописать параметры изображений для каждой социалки отдельно.

Тогда вы будете использовать дополнительные теги (fb:image, twitter:image, vk:image) для Фейсбук, Твиттер, ВКонтакте и пр..

Минус этой реализации — картинка будет резаться сетями не всегда адекватно.

  • задать единый размер для всех соцсетей опциями width (ширина) height (высота) в пикселях, и тогда каждая сеть будет обрезать картинку под свои параметры.

<meta property=«og:image:width» content=«950» />
<meta property=«og:image:height» content=«350» />

Как это отображается в коде:

Микроразметка OpenGraph

Рис. 4 — Заполненные поля в property и content

Итого, для нашего сайта мы прописывали:

  • locale — у нас 2 версии сайта: русская и украинская;
  • type — поделиться можно статьей или кейсом, а это article;
  • title — заголовок публикации;
  • description — краткое описание материала;
  • url — адрес страницы;
  • site_name ITForce — имя нашего сайта и компании;
  • image — баннер поста тянется из медиафайлов на сервере, это внутреннее изображение страницы, не превью;
  • image_width и image_height — ширина и высота исходного изображения для сниппета.

Параметры картинки сделали единые для всех сетей — каждая из них для превью поста будет обрезать изображение под свои актуальные требования.


3. Как внедрить Open Graph на сайт?

Реализовать микроразметку Open Graph на сайте можно 2 способами:

1. Вручную (составить программисту ТЗ для внедрения, он пропишет разметку в коде сайта).

Например, ТЗ для блога:

  • Перед тегом <head> на всех страницах сайта добавить код:

<html prefix=«og: http://ogp.me/ns#»>

  • Между тегами <head></head> на всех страницах сайта внести метаописание:

<meta property=«og:locale» content=«[locale]» />
<meta property=«og:title» content=«[title]» />
<meta property=«og:description» content=«[description]» />
<meta property=«og:url» content=«[url]» />
<meta property=«og:image» content=«[img_url]» />

Где:

  • [locale] – язык и страна;
  • [title] – title данной страницы;
  • [description] – description данной страницы;
  • [url] – URL страницы;
  • [img_url] – основное изображение страницы.

Например, для страницы [страница] метаописание будет виглядеть так:

<meta property=»og:locale» content=»ru_UA» />
<meta property=»og:title» content=»Заголовок» />
<meta property=»og:description» content=»Опис» />
<meta property=»og:url» content=»http://site.com» />
<meta property=»og:image» content=»http://site.com/1.jpg» />

2. С помощью плагинов для CMS.

После внедрения разметки на сайт нужно проверить верность отображения данных при репосте.


4. Где проверить корректность отображения разметки

Верность показа проверяется 2 способами:

1. Попробуйте самостоятельно репостнуть статью или кейс с вашего сайта в любую из соцсетей.

2. Автоматически:

Open Graph отладчик Facebook

Рис. 5 — Отладчик разметки в Фейсбук

Также проверить структурированные данные можно в сервисе от Google.

Вот как выглядит результат проверки:

OpenGraph отладчик Google

Рис. 6 — Отладчик Google

Для работы надо ввести URL страницы, которой хотите поделиться, или фрагмент кода.

Отладчик Google

Рис. 7 — Валидатор от Яндекс

Для Twitter есть отдельный проверщик.

Отладчик Twitter

Рис. 8 — Проверка в Твиттер

Как будет выглядеть правильное отображение репоста:

Корректность репоста в Фейсбук

Рис. 9 — Корректный репост

В поле “Расскажите об этом” настоятельно рекомендую придумать какую-то завлекуху — коротко написать, почему ваша ссылка заслуживает внимания, подготовить “лид” и “прогреть” пользователей. Так они сразу поймут, что за инфа по ссылке.
Чем когда вы просто кинете линк на какой-то пост без объяснения, зачем вообще на него обращать внимание людям.

Кстати, статистика просмотров, открытий, лайков, комментов и репостов у постов с “историей” выше, чем у одинокой голой ссылки.
А это помогает улучшению поведенческих факторов, что отражается на все тех же лайках, комментариях и репостах. В конечном итоге на переходах на сайт и росте трафика.

В соцсетях “любят глазами” — вероятность репоста анонса с верным отображением выше, чем у такого же анонса, но со случайно подобранным контентом (изображение, текст).


Как SEO-специалисту создать идеальное резюме и сопроводительное письмо?

Каннибализация ключевых запросов

Как стать сеошником?

Подпишитесь на наши обновления
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Вы уже подписаны на нашу рассылку!

Подтвердите свой Email для завершения подписки.

Заказать
продвижение
Больше полезных статей и мануалов еще впереди. Будьте в курсе!

Спасибо! Скоро с Вами свяжется наш менеджер.