Гайд із використання тегів Open Graph
Що таке метатеги Open Graph?
Теги Open Graph — короткі фрагменти коду, які допомагають правильно відтворювати посилання на ваш сайт у провідних соціальних мережах. Цю систему розмітки вебсторінок уперше було створено для Facebook, але потім її взяли на озброєння Twitter та LinkedIn. Її підтримка також є у найпопулярніших месенджерах Viber, WhatsApp та Telegram.
Теги соціальних мереж слід шукати в розділі <head> поряд зі звичайними метаданими для пошукових систем. Їх можна впізнати за ідентифікатором «og:» на початку. Зазвичай такі елементи додаються до коду автоматично, хоча ви можете прописувати їх вручну.
Для чого слід користуватися тегами OGP?
Теги Opengraph дають змогу самостійно вибирати ключові елементи відтворення посилання в соціальних мережах. До них належать зображення, заголовок та короткий опис — майже те саме, що ми вказуємо для пошукових роботів. Ви також можете зазначати мову, регіональні особливості та тип контенту, щоб підвищити ефективність реклами. Крім того, у вас є можливість підключати внутрішні інструменти соцмережі Facebook.
Якщо ігнорувати цей важливий інструмент, більшість елементів відтворення визначатимуться автоматично. Цілком можливо, що система зробить скриншот не найпривабливішої частини сторінки, наприклад, простору між двома елементами. Це стосується й опису — до нього потрапить короткий фрагмент тексту поряд із релевантним ключовим словом.
Готові ризикнути, довіривши успіх своєї маркетингової кампанії випадковому відбору? Якщо ні, тоді зосередьтесь на вивченні розмітки Open Graph.
Різні типи тегів Opengraph
Почнемо з синтаксису. Щоб додати метатег OG на свій сайт, відкрийте розділ <head> в його коді. До нього додається такий рядок: <meta property=”AAA” content=”BBB” />. AAA — назва тегу, BBB — змінна, тобто значення, яке він передає соціальній мережі.
У розмітці Open Graph є чотири обов’язкових елементи і ще кілька додаткових. Останні теж дуже важливі, особливо якщо ви часто користуєтесь контекстною рекламою.
og:URL
Посилання на канонічну версію сторінки, якою ви хочете поділитися. Цей тег OG гарантує, що користувачі соціальної мережі побачать саме той контент, який ви для них підготували. Він особливо важливий, якщо ви створювали кілька варіантів вебсайту в процесі розробки, тестування та виправлення помилок. Вказуючи правильний URL, ви також консолідуєте дані щодо лайків та інших взаємодій — це полегшує збирання статистики.
Синтаксис вживання тегу:
<meta property=”og:url” content=”https://example.com/main.html” />
og:Title
Заголовок вашої сторінки, який відтворюватиметься в посиланні. Створюючи його, пам’ятайте про правила копірайтингу: пишіть коротко, вкладайте максимум сенсу, старайтесь не повторюватися та уникати відвертого клікбейту. Хоча офіційних рекомендацій щодо довжини заголовку немає, бажано дотримуватися діапазону від 40 до 60 знаків із пробілами — так само, як у метаданих для пошуковиків. Ще одна важлива рекомендація: зосередьтесь на контенті та не вживайте назву бренду. По-перше, логотип зазвичай виноситься в зображення. По-друге, це заощадить місце та підвищить довіру користувачів.
Синтаксис вживання тегу:
<meta property=”og:title” content=”Short instruction how to use Open Graph Protocol” />
og:Description
Короткий опис, який показуватиметься під заголовком. Правила написання цього тегу Open Graph такі самі, як і в тексті для пошукових машин. Пишіть коротко й по суті — дайте користувачу мотивацію клікнути та перейти за посиланням. Використовуйте тригерні слова та створюйте інтригу. Але забудьте про клікбейт та обман, інакше вони приведуть вас до блокування за спам.
Щодо довжини тексту Facebook рекомендує обмежуватися 2–4 короткими реченнями. Але для коректного відтворення тексту в інших соціальних мережах і месенджерах варто згадати про поради Google: оптимальний розмір — до 160 символів із пробілами.
Синтаксис вживання тегу:
<meta property=”og:description” content=”Learn how to use OG tags in your webpage properly” />
og:Image
Найважливіший тег, на який припадає максимальний відсоток площі відтворення посилання. Містить посилання на картинку, яку ви покажете користувачу. До нього додають зображення зі співвідношенням сторін 1,91:1 або 2:1,05. Мінімальна роздільна здатність для коректного відтворення на всіх девайсах незалежно від характеристик екрану — 1200х630.
Щоб ефективно вести маркетинг у соціальних мережах, тег Open Graph image варто додавати на всі важливі сторінки — головну, блог, контакти, опис умов співпраці тощо. Створюйте унікальні зображення, які відповідають контенту. Для карток товарів та інших комерційних розділів можна вибрати стандартизовану картинку, наприклад, логотип компанії.
Синтаксис вживання тегу:
<meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg” />
og:Type
Невидимий тег. Він впливає на ефективність пошуку посилання та результативність маркетингових кампаній, а не на відтворення у соціальних мережах. Для сортування за типом контенту використовуються такі змінні:
- website — просто сторінка без мультимедійного вмісту;
- article — стаття в блогу або розділі новин;
- book — електронна книга;
- profile — профіль у соціальних мережах або на інших сервісах;
- music — аудіоконтент;
- video — посилання на відоролик.
Тег og:type можна використовувати для сортування контенту на нижчому рівні. Наприклад, за іменем виконавця чи режисером фільму. Повний список змінних викладено в офіційному довіднику Open Graph.
Синтаксис вживання тегу:
<meta property=”og:type” content=”article” />
og:Locale
Мова та регіональні особливості контенту. Тег використовується для полегшення пошуку і коректного відтворення посилання. Якщо ви цілитесь на аудиторію США, можете взагалі не додавати цей тег — за замовчуванням соціальні мережі та месенджери розпізнають його, як «en_US».
Синтаксис вживання тегу:
<meta property=”og:locale” content=”en_GB” />
FB:app_id
Спеціалізований метатег Open Graph для Facebook. Він дає змогу прив’язувати певні сервіси соціальної мережі до посилання. Якщо ви переслідуєте комерційну мету, вам варто підключити статистику для аналізу ефективності. Можна також додати інтеграцію інших платформ чи відкрити коменти. Ідентифікатори всіх сервісів вказано на панелі додатків.
Синтаксис вживання тегу:
<meta property=”fb:app_id” content=”1234567890″ />
Додаткові засоби розмітки для різних типів мультимедійного контенту
Щоб підвищити ефективність розміщення посилання в соціальних мережах, варто зробити його яскравим та привабливим. У цьому допоможуть засоби візуалізації — зображення, відеоролики, геодані та тримірні об’єкти. Розбираємося, як посилатися на них за допомогою тегів OG.
Зображення
Вище ми вже розповідали, як завантажувати картинки за допомогою тегу og:image. Але в деяких випадках його потрібно модифікувати:
- og:image:url — повний аналог звичайного тегу. Ним краще користуватися, якщо ви завантажуєте кілька зображень — вони змінюватимуться після оновлення сторінки;
- og:image:secure_url — те саме, але з захищеним посиланням типу «https://»;
- og:image:type — формат файлу. Соціальні мережі розпізнають jpeg, gif та png;
- og:image:width — примусове встановлення ширини зображення. Бажано використовувати, якщо картинка за посиланням має неоптимальні розміри;
- og:image:height — те саме, але для висоти.
Відео
В Opengraph Protocol описується тегом og:video. Щоб ролик відтворювався в стрічці соціальної мережі, слід давати посилання з захищеним префіксом «https://» та використовувати один із двох форматів — MPEG-4 або Shockwave Flash. Для правильного показу контенту варто пам’ятати про такі модифікації тегу:
- og:video:url — посилання для публікації кількох відеороликів;
- og:video:secure_url — те саме для захищеного джерела;
- og:video:type — формат ролика. Може набувати значень «application/x-shockwave-flash» або «video/mp4». Обов’язково вказується для відтворення в стрічці;
- og:video:width — ширина вікна для відео. Використовується для контенту неоптимального розміру;
- og:video:height — те саме для висоти.
3D-об’єкти
Рекомендуємо ознайомитись із вимогами до такого типу мультимедійного контенту, перш ніж додавати його до свого посилання. Якщо коротко, ви обмежені форматами FBX 2015, gITF 2, COLLADA, OBJ та DAE. При цьому вам доступний не весь функціонал, який використовувався в розробці.
Щоб вставити тримірний об’єкт, використовуйте синтаксис:
<meta property=”og:type” content=”threed.asset” />
Посилання вказується в тегу:
<meta property=”og:asset” content=” https://example.com/assets/standard.obj” />
І останнім штрихом буде заголовок, який прописується в стандартному тегу og:title.
Як інтегрувати протокол Opengraph у вашу вебсторінку?
Підтримка розмітки для соціальних мереж уже з’явилась у більшості CMS та плагінів до них. Крім того, існують застосунки для автоматизації, які вставляють її на всі необхідні сторінки за лічені секунди. Однак ви все ще можете потренуватися, прописавши метадані вручну.
WordPress
Найкращим вибором для цієї CMS буде плагін Yoast:
- Встановіть його, відкрийте меню та увійдіть у режим редагування сторінки.
- Прогорніть цей розділ до самого низу, де розташовано вікно «Yoast SEO».
- Відкрийте вкладку «Social» і виберіть «Facebook».
- Заповніть розділи «Title» та «Description», вкажіть посилання на зображення.
Одна з ефективних практик для WordPress — вибір загального шаблону відтворення посилань для всього сайту. Увійдіть у налаштування Yoast, відкрийте розділи Social та Facebook. Переведіть перемикач під надписом «Add Open Graph meta data» в положення «Enabled». Після цього посилання за замовчуванням використовуватиме шаблон. Якщо вам потрібно змінити спосіб відтворення для окремої сторінки, поверніться до наведеної вище інструкції.
Shopify
Ця система керування контентом не надто гнучка. Вона автоматично дублює OG-теги з метаданих для пошукових систем. Єдине, що ви можете змінити, — вибрати шаблонне зображення для всіх сторінок сайту. Для цього відкривайте розділи меню у такій послідовності:
- Online Store.
- Themes.
- Customize.
- Theme settings.
- Customize.
- Social media.
Після останнього кроку вам залишиться тільки вказати посилання на підготовлену картинку. Все інше можна редагувати тільки вручну в коді сторінки.
Wix
Відомий конструктор сайтів також автоматично підтягує теги з мета пошукових роботів і навіть вибирає перше за порядком зображення на сторінці. Однак у нього є можливість редагування подібної інформації на кожній сторінці. Для цього варто вибрати пункт «Social share» у режимі редагування. Загальний шаблон для всього сайту створюється в аналогічному розділі головного меню. Це одна з найпростіших та найгнучкіших CMS для маркетингу в соціальних мережах.
Squarespace
За замовчуванням копіює метадані соціальних мереж. Але зображення вставляється на кожну сторінку окремо. Відкривайте режим редагування та шукайте в ньому розділ «Social Image», що містить рядок для завантаження картинки. Для використання інших типів OG-тегів у меню редагування переходьте до розділу «Advanced» та вибирайте інструмент «Page Header Code Injection» — вікно розробника.
Ручна інтеграція
Вище ми описали всі види тегів, але варто зібрати їх в одному місці, щоб не проґавити нічого важливого:
- <meta property=”og:url” content=”https://example.com/main.html” />
- <meta property=”og:title” content=”Short instruction how to use Open Graph Protocol” />
- <meta property=”og:description” content=”Learn how to use OG tags in your webpage properly” />
- <meta property=”og:image” content=”https://example.com/blog/wp-content/uploads/2022/11/image.jpg” />
- <meta property=”og:video” content=”https://example.com/blog/wp-content/uploads/2022/11/video.mp4″ />
- <meta property=”og:video:type” content=”video/mp4″ />
- <meta property=”og:type” content=”threed.asset” />
- <meta property=”og:asset” content=” https://example.com/assets/standard.obj” />
- <meta property=”og:type” content=”article” />
- <meta property=”og:locale” content=”en_GB” />
- <meta property=”fb:app_id” content=”1234567890″ />
Усі теги вписують до розділу <head>. Насправді їхнє розташування відносно один одного та інших елементів не має великого значення. Однак для простоти редагування коду в майбутньому всі метадані варто збирати в одному місці.
Якщо ви віддаєте перевагу ручному написанню тегів, після їхнього додавання варто перевірити коректну роботу посилання та провести аудит. Однак ми наполегливо рекомендуємо користуватися інструментами автоматизації, наприклад, Mega Tags або Web Code Tools. Це пришвидшить процес та зменшить кількість синтаксичних помилок.
Як протестувати теги Open Graph?
Цікаво, що цей етап зазвичай займає більше часу, ніж написання самих метаданих. У ньому використовуються три інструменти:
- Facebook Sharing Debugger;
- Twitter Card Validator;
- LinkedIn Post Inspector.
Усі вони мають однаковий функціонал і навіть подібний вигляд інтерфейсу. Відмінність полягає тільки в соціальній мережі. Після введення посилання в рядок URL ви побачите, як воно виглядатиме в стрічці. Зосередьтесь на графічному показу, тобто на OG image, title та description. Якщо у вас обмаль часу, просто ігноруйте другорядні теги на кшталт type та app_id.
Після внесення змін натисніть кнопку «Scrape Again», щоб краулер соціальної мережі знову індексував сторінку. Якщо відтворення залишається тим самим, скористайтеся інструментом Batch Invalidator для очищення кешу. Повторюйте процес у кожному з трьох додатків, поки не отримаєте ідеальний результат.
Найкращі практики застосування тегів Open Graph
Є кілька секретів успіху, які значно пришвидшать інтеграцію розмітки соціальних мереж та підвищать якість результату:
- Використовуйте тільки канонічні версії сторінок в тегу og:URL.
- Встановіть довжину title в діапазоні 40–60 символів із пробілами, а description — від 120 до 160 символів.
- Створюйте унікальні зображення для найбільш популярних та змістовних сторінок.
- Використовуйте шаблон розмітки посилань для решти сайту — його можна створити автоматично в більшості CMS.
- Додавайте зображення з роздільною здатністю 1200х630. Це допоможе пришвидшити завантаження та зберегти необхідний рівень якості.
І найцінніша порада: проводьте зовнішнє тестування результатів. Покажіть посилання в соціальних мережах фокус-групі з 15–20 людей та попросіть оцінити його привабливість. Коли йдеться про шаблон, не буде зайвим розширене A/B-тестування з кількома варіантами. Вибравши найкращий із них, ви поліпшите конверсію усього сайту.
Які помилки слід шукати в метаданих?
Навіть використання найкращих інструментів автоматизації не позбавляє від усіх ризиків. А ручне написання коду взагалі збільшує їх у кілька разів. Тому для перевірки сторінки після публікації варто користуватися спеціальними сервісами, наприклад, SearchAtlas. Вони здатні знаходити такі помилки:
- Неправильний синтаксис. Соціальні мережі не здатні розпізнавати помилкові команди.
- Відсутність тегів Opengraph. Вище ми вже писали про наслідки — система автоматично визначить картинку та опис. При цьому вона не дає жодних гарантій того, що це виглядатиме привабливо.
- Занадто багато знаків в title та description. Текст не відтворюватиметься повністю, тому ви не донесете свою думку до користувача.
- В URL вказано не канонічну версію сторінки. Цілком можливо, ви показуєте в стрічці не той контент, який планували.
- Зображення має нестандартний розмір. Система покаже тільки його частку. Це завжди ризик, адже контекст має значення.
Теги Open Graph: коли й для чого їх використовувати
Протокол OG — це місточок, який поєднує традиційні вебсайти зі стрічками соціальних мереж. Враховуючи, що аудиторія останніх вимірюється мільярдами, його використання обов’язкове для будь-яких сторінок незалежно від типу та вмісту. Щоб досягти успіху, дотримуйтесь чітко визначеного протоколу — додавайте всі необхідні теги зі списку, проводьте внутрішню діагностику та зовнішнє оцінювання. Дуже ефективним рішенням буде створення загального шаблону для всього сайту з подальшим A/B-тестуванням і вибором оптимального варіанта.
Поширені запитання
Що таке мета-теги Open Graph?
Це короткі фрагменти коду, які програмують показ посилання на ваш сайт у соціальних мережах. Наразі вони підтримуються у Facebook, Twitter, LinkedIn, Viber, Telegram та WhatsApp.
Які існують типи тегів Open Graph?
URL — посилання, title — заголовок, description — короткий текст під ним, image — картинка, video — короткий ролик для відтворення в стрічці, type — опис контенту для пошуку, locale — мова та регіональні особливості, FB:app_id — підключення модулів Facebook.
Як інтегрувати теги Opengraph у вебсторінку?
Ви можете вручну додати відповідний код до розділу <head> або скористатися інструментами автоматизації, які є у більшості популярних CMS, включно з WordPress, Wix, Squarespace та Shopify.
