Для чого використовувати розмітку OpenGraph

Катерина Дьоміна

Редактор

Подобається

Содержание статьи
1. Що таке та як виглядає OpenGraph
2. Основні теги розмітки
3. Як впровадити OpenGraph на сайт?
4. Де перевірити коректність відображення розмітки

SEO працює не тільки з пошуком, а й в соцмережах. Як приклад - використання протоколу OpenGraph. Це звичне "Поділитися постом", тобто кнопки соцмереж на вашому сайті.

Разметка OpenGraph

Рис. 1 - Кнопки шерінгу для соцмереж

Якщо ви хочете, щоб анонси постів у Фейсбук, Твіттер, Інстаграм або інших мережах показувалися коректно, слід впровадити її на сайт.

Кнопки шерінга працюють і підвищують довіру пошукових систем, через те, що репост служить природним посиланням.

1. Що таке та як виглядає OpenGraph

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

Мікророзмітка OpenGraph – розмітка сторінки в вигляді HTML-коду, яка розміщується в тезі <head>. Заснована на синтаксисі RDF.
OpenGraph простими словами – метатеги, які передають соцмережам інформацію, що ви вказали й показують, який саме контент використовувати при репості та в якому вигляді його слід зображати.

У чому переваги?

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

Мікророзмітка дозволяє репосту бути клікабельним – він відображається правильно: показує ту інформацію, якою ви бажаєте поділитися. У підсумку ваш анонс в соцмережі виглядає завершеним і привабливим для користувачів.

А не тягнеться випадковий текст і картинка, що знаходиться на станиці замість зображення поста.

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

Рис. 2 – Приклад вірно впровадженого OpenGraph

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

Неверная разметка OpenGraph

Рис. 3 – Приклад невірно впровадженого OpenGraph

Саме мікророзмітка відповідає за вірність зображення сніпета в соцмережах. В іншому випадку тягнуться випадкова картинка, заголовок і опис анонсу.

Розмітка допомагає в соцмережах виглядати привабливіше – так в соцмережах ви бачите зображення рис. 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:

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 (висота) у пікселях, тоді кожна мережа обрізатиме картинку під свої параметри.

Як це зображається в коді:

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

Рис. 4 – Заповнені поля в property та content

Тож, для нашого сайту ми прописували:

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

Параметри картинки зробили єдині для всіх мереж – кожна з них для превью поста буде обрізати зображення під свої актуальні вимоги.

3. Як впровадити на сайт?

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

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

Наприклад, ТЗ для блогу:

Перед тегом <head> на всіх сторінках сайту додати код:

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

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

Де:

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

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

2. За допомогою плагінів для CMS.

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

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

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

1. Спробуйте самостійно репостнути статтю або кейс з вашого сайту в будь-яку з соцмереж.

2. Автоматично:

Інструмент від Фейсбуку.

OpenGraph отладчик Facebook

Рис. 5 – Відладник розмітки в Фейсбук

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

Ось як виглядає результат перевірки:

OpenGraph отладчик Google

Рис. 6 – Відладчик Google

Для Twitter є окремий перевірник.

Отладчик Twitter

Рис. 7 – Перевірка у Твіттері

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

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

Рис. 8 – Коректний репост

У полі “Розкажіть про це” наполегливо рекомендую придумати якусь завлекуху – коротко написати, чому Ваше посилання заслуговує на увагу, підготувати “лід” та “прогріти” користувачів. Так вони відразу зрозуміють, що за інфа за посиланням.
Чим коли ви просто кинете лінк на якийсь пост без пояснення, навіщо взагалі на нього звертати увагу людям.

До речі, статистика переглядів, відкриттів, лайків, коментарів та репостів у постів з “історією” вище, ніж в одинокого голого посилання.
А це допомагає поліпшенню поведінкових факторів, що відбивається на все тих же лайках, коментарях й репостах. В кінцевому підсумку на переходах на сайт та зростанні трафіку.

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

SEO - просування

Контекстна реклама

SMM - просування

Email-маркетинг

ASO-просування

Контакти