Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

Хочу Вас трохи порадувати, тому що мікророзмітки Open Graph технічно впроваджується набагато легше, ніж мікророзмітки Schema.org. Як пам'ятаєте, як впровадити на свій сайт мікророзмітки Schema.org ми розглядали в минулій статті:

А якщо Ви дізналися вперше про мікророзмітки з даної статті, то рекомендую обов'язково прочитати наступну статтю, де я розглянув кілька видів мікророзмітки і для чого вони призначені:

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

Пора зробити невелику мікророзмітки, щоб Ви побачили як це працює на практиці!

Перевіряємо валідацію мікророзмітки Open Graph

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

Як при перевірці мікророзмітки Schema.org. тут також можна перевірити правильно перевірки даної мікророзмітки за допомогою даного валідатора:

  • Валідатор мікророзмітки від Yandex

Тут Ви побачите помилки і втрачені властивості. Тут найкраще як у випадку з мікророзмітки Schema.org спочатку вставити невеликий код і перевірити його, а вже потім впровадити на повноцінний сайт. Щоб Ви чітко усвідомлювали що означає кожен рядок і не було зайвого сміття.

Крок 1. Що необхідно вказати в мікророзмітки?

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

Тобто з зображення видно, що найважливіші елементи це:

Це дійсно велика частина властивостей, які необхідно постійно заповнювати. Але є ще одна обов'язкова властивість, без якого валідатор буде "лаятися" і видавати помилки. Ось це властивість:

  • og: type - це тип сторінки. Тобто те, що на ній розташоване.

Також є і необов'язкові властивості:

Властивостей насправді досить, але обов'язкових не так багато, що робить мікророзмітки Open Graph досить зручним і простим. А зараз перейдемо до реальних прикладів.

Крок 2. Реальний приклад мікророзмітки

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

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

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

А ось той код, який необхідно розмістити між тегами і :

Опис всіх елементів Ви можете побачити вище. Там я докладно розписав усі обов'язкові необов'язкові пункти.

Крок 3. мікророзмітки Open Graph для CMS

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

Ось деякі плагіни, які Ви можете використовувати для CMS WordPress, щоб створити дану мікророзмітки навіть не знаючи код:

  • Плагін "WP Facebook Open Graph protocol" - перейти на сторінку з плагіном
  • Плагін "Facebook" - перейти на сторінку з плагіном
  • Плагін "Yoast SEO" - перейти на сторінку з плагіном
  • Плагін "All in One SEO Pack" - перейти на сторінку з плагіном

Розбираємо мікророзмітки open graph - мікророзмітки сайту для соціальних мереж open graph

Це стосується плагінів, які формують мікророзмітки Open Graph для WordPress. А ось список плагінів і розширень для інших CMS:

  • Плагін для CMS "Joomla" - перейти на сторінку з плагіном
  • Плагін для CMS "Drupal" - перейти на сторінку з плагіном
  • Плагін для CMS "OpenCart" - перейти на сторінку з плагіном
  • Плагін для CMS "Magento" - перейти на сторінку з плагіном
  • Плагін для CMS "Zen Cart" - перейти на сторінку з плагіном

Сподіваюся, зараз у Вас не виникне питань як зробити мікророзмітки Open Graph для будь-якої CMS.