Starting a new project?
получить консультацию
Оставьте свои контактные данные, наш менеджер перезвонит вам.
Спасибо! Скоро с Вами свяжется наш менеджер.
Спасибо! Скоро с Вами свяжется наш менеджер.
SEO работает не только с поиском, а и в соцсетях. Как пример - использование протокола Open Graph. Это привычное “Поделиться постом”, т. е. кнопки соцсетей на вашем сайте.
Рис. 1 - Кнопки шеринга для соцсетей
Если вы хотите, чтоб анонсы постов в Фейсбук, Твиттере, Инстаграм или других сетях отображались корректно, следует внедрить ее на сайт.
Кнопки шеринга работают и повышают доверие поисковиков, т. к. репост служит естественной ссылкой.
Разметка или протокол Open Graph изначально был создан для Facebook, но сегодня с ним работают все социалки, и даже мессенджеры.
Микроразметка Open Graph — разметка страницы в виде HTML-кода, которая размещается в теге <head>. Основана на синтаксисе RDF.
Open Graph простыми словами — метатеги, которые передают соцсетям информацию, что вы указали, и показывают, какой именно контент использовать при репостах, и в каком виде его следует отображать.
В чем преимущества?
Микроразметка позволяет репосту быть кликабельным — он отображается верно: показывает ту информацию, которой вы желаете поделиться. В итоге ваш анонс в соцсети выглядит завершенным и удобочитаемым для пользователей.
А не тянется случайный текст и картинка, что находится на странице вместо изображения поста.
Рис. 2 — Пример верно внедренного Open Graph
Когда вы желаете репостнуть статью в соцсети и кликаете на иконку нужной сети, включается работа микроразметки.
Рис. 3 — Пример неверно внедренного Open Graph
Именно микроразметка отвечает за верность отображения сниппета в соцсетях. В противном случае тянутся случайная картинка, заголовок и описание анонса.
Разметка помогает в соцсетях выглядеть привлекательнее — так в соцсетях вы видите отображение рис. 2. А также создавать блоки рекомендуемого контента в Google AdSence.
Существует официальный сайт разметки на русском языке для разных типов объектов. И английская версия.
Однако, есть и отдельные рекомендации для некоторых соцсетей:
В разделе <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) для Фейсбук, Твиттер, ВКонтакте и пр..
Минус этой реализации — картинка будет резаться сетями не всегда адекватно.
<meta property=«og:image:width» content=«950» />
<meta property=«og:image:height» content=«350» />
Как это отображается в коде:
Рис. 4 — Заполненные поля в property и content
Итого, для нашего сайта мы прописывали:
Параметры картинки сделали единые для всех сетей — каждая из них для превью поста будет обрезать изображение под свои актуальные требования.
Реализовать микроразметку Open Graph на сайте можно 2 способами:
1. Вручную (составить программисту ТЗ для внедрения, он пропишет разметку в коде сайта).
Например, ТЗ для блога:
<html prefix=«og: http://ogp.me/ns#»>
<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]» />
Где:
Например, для страницы [страница] метаописание будет виглядеть так:
<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.
После внедрения разметки на сайт нужно проверить верность отображения данных при репосте.
Верность показа проверяется 2 способами:
1. Попробуйте самостоятельно репостнуть статью или кейс с вашего сайта в любую из соцсетей.
2. Автоматически:
Рис. 5 — Отладчик разметки в Фейсбук
Также проверить структурированные данные можно в сервисе от Google.
Вот как выглядит результат проверки:
Рис. 6 — Отладчик Google
Для работы надо ввести URL страницы, которой хотите поделиться, или фрагмент кода.
Рис. 7 — Валидатор от Яндекс
Для Twitter есть отдельный проверщик.
Рис. 8 — Проверка в Твиттер
Как будет выглядеть правильное отображение репоста:
Рис. 9 — Корректный репост
В поле “Расскажите об этом” настоятельно рекомендую придумать какую-то завлекуху — коротко написать, почему ваша ссылка заслуживает внимания, подготовить “лид” и “прогреть” пользователей. Так они сразу поймут, что за инфа по ссылке.
Чем когда вы просто кинете линк на какой-то пост без объяснения, зачем вообще на него обращать внимание людям.
Кстати, статистика просмотров, открытий, лайков, комментов и репостов у постов с “историей” выше, чем у одинокой голой ссылки.
А это помогает улучшению поведенческих факторов, что отражается на все тех же лайках, комментариях и репостах. В конечном итоге на переходах на сайт и росте трафика.
В соцсетях “любят глазами” — вероятность репоста анонса с верным отображением выше, чем у такого же анонса, но со случайно подобранным контентом (изображение, текст).
Вы уже подписаны на нашу рассылку!
Подтвердите свой Email для завершения подписки.
Спасибо! Скоро с Вами свяжется наш менеджер.