Мікророзмітки open graph - як отримувати більше відвідувачів з соціальних мереж?
Відео: 55 урок. Технічні питання просування статей в соціальних мережах (1 - Open Graph)
Мікророзмітки Open Graph була розроблена з метою зручного відображення контенту в соціальній мережі. Хто вже раніше цікавився цією мікророзмітки, то прекрасно знає, що мікророзмітки Open Graph була розроблена Facebook. З даної статті Ви зрозумієте, чому необхідно обов`язково мати дану мікророзмітки на своєму сайті.
Хочу Вас трохи порадувати, тому що мікророзмітки Open Graph технічно впроваджується набагато легше, ніж мікророзмітки Schema.org. Як пам`ятаєте, як впровадити на свій сайт мікророзмітки Schema.org ми розглядали в минулій статті:
Відео: What is Open Graph
А якщо Ви дізналися вперше про мікророзмітки з даної статті, то рекомендую обов`язково прочитати наступну статтю, де я розглянув кілька видів мікророзмітки і для чого вони призначені:
Давайте повторимо, для чого необхідна ця мікророзмітки і навіщо варто в цьому розібратися.
Простий приклад і сама проблема: практично кожен власник сайту на своєму сайті під кожною статтею встановлює кнопки соціальних мереж, при натисканні на які, відбувається репост анонсу у відповідній соціальній мережі.
Але в даному випадку анонс формується автоматично за допомогою тієї соціальної мережі, де Ви захотіли розмістити його. Тобто Ви ніяк не впливаєте на те, яка картинка буде розміщена, який текст, і яка посилання.
У цьому нам і допоможе мікророзмітки Open Graph. Тому що за допомогою даної мікророзмітки можна вплинути на той самий анонс, який буде розміщуватися в соціальній мережі. Тобто можна вказати яке зображення необхідно брати, який текст для опису і який текст для анкора посилання.
Адже Ви зможете змусити будь-сниппет, на який буде більше кликати в соціальній мережі, а, значить, до Вас на сайт буде приходити ще більше трафіку з соціальних мереж. Адже люди будуть постійно ділитися Вашими статтями на сторінках в соціальних мережах. Але в залежності від того, яке зображення буде розміщуватися в анонсі, відповідну кількість кліків Ви і отримаєте. Цей текст, який формується завдяки мікророзмітки Open Graph користувач не зможе змінити при публікації, що дуже зручно.
Пора зробити невелику мікророзмітки, щоб Ви побачили як це працює на практиці!
Перевіряємо валідацію мікророзмітки Open Graph
як при перевірці мікророзмітки Schema.org, тут також можна перевірити правильно перевірки даної мікророзмітки за допомогою даного валідатора:
- Валідатор мікророзмітки від Yandex
Тут Ви побачите помилки і втрачені властивості. Тут найкраще як у випадку з мікророзмітки Schema.org спочатку вставити невеликий код і перевірити його, а вже потім впровадити на повноцінний сайт. Щоб Ви чітко усвідомлювали що означає кожен рядок і не було зайвого сміття.
Крок 1. Що необхідно вказати в мікророзмітки?
Почнемо з наочного зображення, щоб Ви розуміли як саме буде виглядати сниппет в соціальній мережі. Для прикладу я буду розповідати все на прикладі соціальної мережі Вконтакте.
Тобто з зображення видно, що найважливіші елементи це:
- 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. Реальний приклад мікророзмітки
Якщо до цього було не зовсім зрозуміло як же використовувати практично дану мікророзмітки, то зараз будьте уважні.
Наведу відразу невеликий код, використовуючи який Ви зможете зробити ось такий анонс в соціальній мережі:
А ось той код, який необхідно розмістити між тегами і:
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
CMS існує різне безліч. Найпопулярніші: WordPress, Joomla і Drupal. Але крім систем управління контентом (CMS) для новинних сайтів, існують CMS і для інтернет-магазинів: Magento, Zen Cart або OpenCart. Для інтернет-магазинів також необхідно створювати мікророзмітки для соціальних мереж, щоб користувачі ділилися "правильними" анонсами з друзями.
Ось деякі плагіни, які Ви можете використовувати для CMS WordPress, щоб створити дану мікророзмітки навіть не знаючи код:
Відео: How To Add Facebook Open Graph Tags to your LeadPages
Ми використовуємо на сайті плагін Yoast SEO і там є спеціальна вкладка для кожної статті, де можна ввести title, description і image. Для останньої версії плагіна (а на 25.01.2016 остання версія 3.0.7) вкладка виглядає наступним чином:
Це стосується плагінів, які формують мікророзмітки Open Graph для WordPress. А ось список плагінів і розширень для інших CMS:
Сподіваюся, зараз у Вас не виникне питань як зробити мікророзмітки Open Graph для будь-якої CMS.
Відео: Comprehensive Guide to Using Open Graph Tags in Squarespace
зміст
висновок
Насправді далеко не всі заповнюють дані теги. Але ж заповнюючи дані теги Ви робите анонс своєї статті в соціальних мережах більш привабливим. Тому варто один раз в цьому розібратися і просто ввести собі звичку заповнювати ці поля.