Мікророзмітки open graph - як отримувати більше відвідувачів з соціальних мереж?

Мікророзмітки Open Graph - як отримувати більше відвідувачів з соціальних мереж?

Відео: 55 урок. Технічні питання просування статей в соціальних мережах (1 - Open Graph)

Мікророзмітки Open Graph була розроблена з метою зручного відображення контенту в соціальній мережі. Хто вже раніше цікавився цією мікророзмітки, то прекрасно знає, що мікророзмітки Open Graph була розроблена Facebook. З даної статті Ви зрозумієте, чому необхідно обов`язково мати дану мікророзмітки на своєму сайті.

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

  • (Практика) Впроваджуємо мікророзмітки Schema.org на свій сайт

Відео: What is Open Graph

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

  • Найпопулярніші види мікророзмітки сайту

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

Простий приклад і сама проблема: практично кожен власник сайту на своєму сайті під кожною статтею встановлює кнопки соціальних мереж, при натисканні на які, відбувається репост анонсу у відповідній соціальній мережі.

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

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

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

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

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

Валідація мікоразметкі Open Graph

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

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


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

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

Open Graph сниппет в соціальній мережі

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

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

  • og: title - відповідає за виведення заголовка статті, що також є текстом посилання;
  • og: url - посилання на статтю. Вона також з`являється ще й для зображення. Тобто при натисканні на зображення також людина перейде по посиланню, як і за назвою під зображенням;
  • og: image - це те саме зображення, при кліці на яку людина також переходить за посиланням. Тут хочу розповісти один маленький секрет, який дозволить Вам збільшити кількість кліків в соціальній мережі. Це величина зображення! Щоб зробити зображення на всю ширину поста в соціальній мережі, його розмір повинен бути більше 537px;
  • og: description - це невелике текстовий опис, яке знаходиться нижче заголовка запису.

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

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

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

  • og: site_name - тут необхідно вписати назву вашого сайту;
  • og: locale - вказуємо мову. За замовчуванням англійська;
  • og: audio або og: video - щоб вказати інформацію про аудіо або відео, яке є на сторінці;
  • fb: app_id - спеціальний код, щоб "зв`язати" сторінку зі спеціальним додатком Facebook і надалі використовувати ці дані, наприклад, в віджеті коментарів.

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

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

Реальний приклад мікророзмітки Open Graph

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

Наведу відразу невеликий код, використовуючи який Ви зможете зробити ось такий анонс в соціальній мережі:

результат сниппета

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

HTML КОД
12345
lt;meta property="Og: type" content="Article"gt;lt;meta property="Og: title" content="Як зробити привабливий сниппет в соц. Мережі"gt;lt;meta property="Og: url" content="Http://sitehere.ru/mikrorazmetka-open-graph-kak-poluchat-bolshe-posetitelej-iz-socialnyx-setej"gt;lt;meta property="Og: description" name="Description" content="Тут Ви знайдете докладну інструкцію як створити мікоразметку на своєму сайті і отримати більше кліків з соціальної мережі"gt;lt;meta property="Og: image" content="Http://sitehere.ru/examples/test/img/image-for-test-snippet-social.jpg"gt;

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

З розміткою зрозуміло. Зрозуміло що необхідно вставляти між тегами і в Вашому HTML документі. Тому зі звичайними Лендінзі проблем не виникне. Вам лише залишиться змінити інформацію всередині атрибутів. Виникає питання, коли ми використовуємо будь-яку CMS. Як бути в цьому випадку? Адже там сторінки формуються динамічно. Про це читайте далі.

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

Мікоразметка Open Graph для CMS

CMS існує різне безліч. Найпопулярніші: WordPress, Joomla і Drupal. Але крім систем управління контентом (CMS) для новинних сайтів, існують CMS і для інтернет-магазинів: Magento, Zen Cart або OpenCart. Для інтернет-магазинів також необхідно створювати мікророзмітки для соціальних мереж, щоб користувачі ділилися "правильними" анонсами з друзями.

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

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

Відео: How To Add Facebook Open Graph Tags to your LeadPages

Ми використовуємо на сайті плагін Yoast SEO і там є спеціальна вкладка для кожної статті, де можна ввести title, description і image. Для останньої версії плагіна (а на 25.01.2016 остання версія 3.0.7) вкладка виглядає наступним чином:

Open Graph для WordPress

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

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

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

Відео: Comprehensive Guide to Using Open Graph Tags in Squarespace

зміст

  • Перевіряємо валідацію мікророзмітки Open Graph
  • Крок 1. Що необхідно вказати в мікророзмітки?
  • Крок 2. Реальний приклад мікророзмітки
  • Крок 3. мікророзмітки Open Graph для CMS

висновок

Насправді далеко не всі заповнюють дані теги. Але ж заповнюючи дані теги Ви робите анонс своєї статті в соціальних мережах більш привабливим. Тому варто один раз в цьому розібратися і просто ввести собі звичку заповнювати ці поля.

Успіхів!

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!