замовити дзвінок
+38 (044) 358-48-00
замовити дзвінок
Starting a new project?
отримати консультацію
Читайте наш Telegram 👈
1586
3

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:

<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) для Фейсбук, Твіттер тощо..

Мінус цієї реалізації – картинка різатиметься мережами не завжди адекватно.

  • задати єдиний розмір для всіх соцмереж опціями 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. Як впровадити на сайт?

Реалізувати мікророзмітку OpenGraph на сайті можна 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. Автоматично:

OpenGraph отладчик Facebook

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

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

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

OpenGraph отладчик Google

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

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

Отладчик Twitter

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

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

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

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

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

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

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

Обчислювані показники GA4

Обчислювані показники в Google Analytics 4

Google Trends baner

Google Trends: інструкція з використання

Google Analytics 4 courses banner

Курси з Google Analytics 4

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

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

Підтвердіть свій email для завершення підписки.

Замовити
просування
Більше корисних статей та мануалів ще попереду. Будьте в курсі

Дякуємо! Скоро з вами зв'яжеться наш менеджер.