
Залиште свої контактні дані, наш менеджер передзвонить вам.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.
SEO працює не тільки з пошуком, а й в соцмережах. Як приклад - використання протоколу OpenGraph. Це звичне "Поділитися постом", тобто кнопки соцмереж на вашому сайті.
Рис. 1 - Кнопки шерінгу для соцмереж
Якщо ви хочете, щоб анонси постів у Фейсбук, Твіттер, Інстаграм або інших мережах показувалися коректно, слід впровадити її на сайт.
Кнопки шерінга працюють і підвищують довіру пошукових систем, через те, що репост служить природним посиланням.
Розмітка або протокол OpenGraph спочатку був створений для Facebook, але сьогодні з ним працюють усі соціалки, і навіть месенджери.
Мікророзмітка OpenGraph – розмітка сторінки в вигляді HTML-коду, яка розміщується в тезі <head>. Заснована на синтаксисі RDF.
OpenGraph простими словами – метатеги, які передають соцмережам інформацію, що ви вказали й показують, який саме контент використовувати при репості та в якому вигляді його слід зображати.
У чому переваги?
Мікророзмітка дозволяє репосту бути клікабельним – він відображається правильно: показує ту інформацію, якою ви бажаєте поділитися. У підсумку ваш анонс в соцмережі виглядає завершеним і привабливим для користувачів.
А не тягнеться випадковий текст і картинка, що знаходиться на станиці замість зображення поста.
Рис. 2 – Приклад вірно впровадженого OpenGraph
Коли ви бажаєте репостнути статтю в соцмережі й клікаєте на іконку потрібної мережі, включається робота мікророзмітки.
Рис. 3 – Приклад невірно впровадженого OpenGraph
Саме мікророзмітка відповідає за вірність зображення сніпета в соцмережах. В іншому випадку тягнуться випадкова картинка, заголовок і опис анонсу.
Розмітка допомагає в соцмережах виглядати привабливіше – так в соцмережах ви бачите зображення рис. 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
Тож, для нашого сайту ми прописували:
Параметри картинки зробили єдині для всіх мереж – кожна з них для превью поста буде обрізати зображення під свої актуальні вимоги.
Реалізувати мікророзмітку OpenGraph на сайті можна 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
Для Twitter є окремий перевірник.
Рис. 7 – Перевірка у Твіттері
Як буде виглядати правильне зображення репоста:
Рис. 8 – Коректний репост
У полі “Розкажіть про це” наполегливо рекомендую придумати якусь завлекуху – коротко написати, чому Ваше посилання заслуговує на увагу, підготувати “лід” та “прогріти” користувачів. Так вони відразу зрозуміють, що за інфа за посиланням.
Чим коли ви просто кинете лінк на якийсь пост без пояснення, навіщо взагалі на нього звертати увагу людям.
До речі, статистика переглядів, відкриттів, лайків, коментарів та репостів у постів з “історією” вище, ніж в одинокого голого посилання.
А це допомагає поліпшенню поведінкових факторів, що відбивається на все тих же лайках, коментарях й репостах. В кінцевому підсумку на переходах на сайт та зростанні трафіку.
У соцмережах “люблять очима” – ймовірність репоста анонсу з вірним зображенням вище, ніж у такого ж анонса, але з випадково підібраним контентом (зображення, текст).
Ви вже підписані на нашу розсилку!
Підтвердіть свій email для завершення підписки.
Дякуємо! Скоро з вами зв'яжеться наш менеджер.