Розмітка Open Graph — це один з ефективних способів оптимізації семантичної розмітки, що допоможе привабити на ваш сайт новий трафік з соцмереж. Також, мікророзмітка дозволяє пошуковим роботам ідентифікувати доступні типи інформації на сайті, структурувати її в соціальних мережах.

Основні переваги використання інструменту Open Graph — це максимальна інформативність сніпета, привабливий візуал для користувачів. Звісно, що мікророзмітка не має прямого впливу на SEO, але завдяки цьому інструменту можна значно покращити поведінкові чинники сайту.

Можливості та особливості розмітки Open Graph

Основна можливість, яку перед користувачами відкриває Open Graph — це оформлення максимально привабливих посилань, з картинками та описами, для поширення у соціальних мережах.

Якщо ви спробуєте здійснити репост статті з блогу на сайті в акаунт на Facebook без розмітки Open Graph — одразу помітите неприємні нюанси та зрозумієте, чому все-таки варто її використовувати. Саме мікророзмітка дозволяє вказувати який заголовок та анонс мають бути у публікації при репості сторінки, яка адреса та параметри зображення, будуть закріплені в якості обкладинки.

Мікророзмітка була створена розробниками Facebook та спочатку використовувалася лише на просторах цієї соціальної мережі. На даний час цей протокол підтримується такими платформами, як ВКонтакте, Твіттер, LinkedIn, Телеграм, Viber, Slack і т.д.

Приклад розмітки в Facebook

Синтаксис розмітки Open Graph

Ви можете ознайомитись з документацією, що пригодиться у роботі з розміткою Open Graph у таких джерелах:

ogp.me — англомовна версія інструкцій та документів.
ruogp.me — документи російською мовою.

Коротку інформацію про оновлення та стислі інструкції ви можете у довідці Яндекс.Вебмайстер. Також у довідці ви можете знайти відповіді на основні запитання про розмітку, основні теги, що допомагають реалізувати протокол на сайті. Варто звернути увагу на посібники з використання Open Graph для окремих соцмереж:

Мікророзмітка — це комплекс метатегів, які використовуються для того, щоб передати потрібну інформацію соціальним мережам. Теги також вказують на контент для репосту, тип та спосіб його відображення. Мікророзмітка Open Graph заснована на синтаксисі RDFa, що передбачає використання додаткових тегів <meta> у розділі <head>. Під тегом <meta> варто обов’язково вказати два атрибути — “property” та “content”. Атрибут “property” часто наділяють обов’язковими та опціональними властивостями.

Обов’язкові теги

Пропонуємо ознайомитись з обов’язковими властивостями та тегами, що входять в атрибут “property”:

og: title — заголовок або назва, що характеризує сторінку..
og: type — тип матеріалу, що розміщений на сторінці.
- Відео: <meta property=’og:type’ content=”video.movie”/>.
- Аудіо: <meta property=’og:type’ content=”music.song”/>.
- Стаття: <meta property=’og:type’ content=”article”/>.
og: image — URL-адреса картинки, що супроводжуватиме матеріал.
og: url — канонічне посилання на веб-сторінку, яка поширюється в соцмережі.

Опціональні теги

Також при роботі з мікророзміткою ви можете використати такі теги:

og: site_name — задає ім’я сайту, яке відображається в попередньому показі.
og:description — розширений опис сторінки, який не обов’язково додавати, адже він не завжди відображається у режимі попереднього перегляду.
og: locale — тег, що задає мову і відповідний регіон у форматі “мова_регіон”.

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

Публікація відео з використанням Open Graph

Відеостоки, онлайн-сховища та ресурси з великою кількістю відеоконтенту можуть використовувати протокол мікророзмітки Open Graph для покращення ранжування контенту на платформі Яндекс.Відео. У розмітці Open Graph доступні спеціальні метатеги, за допомогою яких можна детально охарактеризувати ролик та передати Яндексу необхідну інформацію про нього:

og:title — коротка назва ролика, що не має перевищувати 1000 символів.
og:description — опис ролика, обсягом від 150 до 1000 символів.
og:url — URL-адреса сторінки на якій розміщене відео.
og:video — шлях до відеоплеєра або файлу.
og:image — посилання на картинку, яка буде використана як заставка відео.
og:type — категорія, або тема до якої буде віднесене відео.
og:video:type — усі кодеки, що доступні для даного формату ролика.
ya:ovs:upload_date — дата та час завантаження.
ya:ovs:adult — використовується для роликів, що входять в категорію контенту “для дорослих”. Якщо це так, вкажіть значення “true”, якщо ні — “false”.
video:duration — тривалість відеоролика (вказується в секундах з округленням до цілого числа).

Сервіси та плагіни для роботи з Open Graph

Доступні кілька способів впровадження Open Graph на вашому сайті:

Перший і найпростіший — це використати відповідні плагіни для CMS, яка встановлена на вашому сайті. Існує безліч зручних варіантів, що дозволяють швидко розмістити мікророзмітку. Також, у сайтах на платформі Tilda передбачений конструктор з вбудованою оптимізацією сторінок для соціальних мереж.
Другий та складніший варіант — це розміщення протоколу безпосередньо в код сторінок вашого сайту. На початку html-коду варто вставити таку частину: <html prefix=”og:http://ogp.me/ns#”>. Згодом, використайте потрібні теги між <head> та </head>.

Серед найпопулярніших сервісів та плагінів для роботи варто виділити:

All in One SEO Pack та Yoast SEO для WordPress.
Open Graph для Битрикс.
Open Graph для Opencart.
Open Graph для Joomla.

Як перевірити коректність мікророзмітки?

На даний час доступні три методи перевірки правильності застосування розмітки:

Налагоджувач репостів від Facebook.
Валідатор мікророзмітки від Яндекс.
Сервіс Open Graph Check.

Доступний також окремий валідатор для мікророзмітки у соціальній мережі Twitter. Усі ці інструменти стануть в пригоді, якщо ви не впевнені у привабливості оголошення, або виявили помилку та бажаєте її виправити.

Що таке розмітка Open Graph і навіщо вона потрібна