Що таке OpenGraph розмітка?
- Що таке OpenGraph?
- Різновиди OpenGraph розмітки.
- Основні метадані OpenGraph
- Як це виглядає на прикладі нашого сайту:
- Приклад додаткових тегів OpenGraph
- OpenGraph Twitter
- Приклад впровадженої розмітки Twitter Card на сайті OkayCMS
- І в кінці наведемо повний код OpenGraph розмітки, який використовується в OkayCMS
Що таке OpenGraph?
OpenGraph розмітка, це набір правил для структурування даних, якими можуть ділитися в соціальних мережах. Простіше кажучи, якщо ви хочете поділитися посиланням і хочете щоб вона виглядала красиво (включала в себе короткий опис, правильний заголовок і потрібне зображення) то всі ці дані потрібно розмічати за допомогою спеціальних тегів.
Різновиди OpenGraph розмітки.
На даний момент немає одного єдиного стандарту, який дозволяє точно і однаково розмітити сторінку, кожна соц. мережу, будь то Facebook або Twitter надає власні атрибути або теги, для того щоб коректно парсити інформацію при шарінгом посилань.
Почнемо з загальноприйнятою розмітки, яка насправді є першим стандартом і дозволяє в цілому зрозуміти розмітку поточної сторінки.
Основні метадані OpenGraph
- og: title - Назва вашого об'єкта, наприклад шаблон для OkayCMS
- og: type - Типи об'єктів, наприклад article.
- og: image - URL-адресу зображення, який повинен визначити ваш об'єкт.
- og: url - Канонічний URL-адресу об'єкта ".
Як це виглядає на прикладі нашого сайту:
<Meta property = "og: url" content = "https://okay-cms.com/products/shablon-dlya-okaycms-okeffect" />
<Meta property = "og: type" content = "article" />
<Meta property = "og: title" content = "Шаблон для OkayCMS OkEffect" />
<Meta property = "og: description" content = "Багатомовний адаптивний шаблон Carol для інтернет-магазинів з широкою аудиторією продажів.
Багатомовність сайту і можливість вибору валюти відображення цін на товари - обов'язковий функціонал для магазину з широкою аудиторією збуту. Особливо, якщо це одяг, взуття або дизайнерські аксесуари.
Стильний шаблон Carol допоможе вам "зі смаком" піднести товари клієнту на вашому сайті. Лаконічний, в строгій колірній ... ">
<Meta property = "og: image" content = "https://okaycms.com/files/products/okeffect.400x400.png" />
Як бачите, кожен пункт заповнений відповідним контентом.
Це був базовий набір тегів, який слід розміщувати в блоці <head>. Крім цього, розмітку можна розширювати іншими тегами, які допоможуть більш точно розмічати інформацію.
Приклад додаткових тегів OpenGraph
Наступні властивості є необов'язковими для будь-якого об'єкта:
- og: audio - URL-адресу звукового файлу.
- og: description - опису вашого об'єкта.
- og: determiner - Слово, яке з'являється перед назвою цього об'єкта в реченні. Тип enum (a, an, the, "", auto). Якщо вибрано auto, споживач даних повинен вибирати між "a" або "an". За замовчуванням - "" (пусто).
- og: locale - Тег локації. Формат language_TERRITORY. За замовчуванням en_US.
- og: locale: alternate - Тип array інших локалей на цій сторінці.
- og: site_name - Якщо ваш об'єкт є частиною великого web-сайту, назва, має відображатися на всіх сторінках сайту. Наприклад, "OkayCMS".
- og: video - URL-адресу відео-файлу.
Це була основа, стандарт RDF який дозволяє в цілому вказати на «шарінговий контент». Тепер перейдемо до більш спеціалізованим раметкам.
OpenGraph Twitter
Теги Twitter схожі на теги Open Graph і засновані на тих же угодах, що і протокол Open Graph. Використовуючи протокол Open Graph для опису даних на сторінці, можна легко створити Twitter Card без дублювання тегів і даних. Коли процесор Twitter Card шукає теги на сторінці, він спочатку перевіряє властивість, специфічне для Twitter, а якщо немає, повертається до підтримуваного властивості Open Graph. Це дозволяє як визначати на сторінці самостійно, так і мінімізувати кількість дублюючої розмітки, необхідної для опису вмісту і досвіду.
Зверніть увагу, що хоча Open Graph рекомендує вказувати префікс "og" RDFa через <html prefix = "og: http://ogp.me/ns#">, така розмітка не потрібно для Twitter Card і її використання Префікс twitter: в атрибуті імені мета-елемента HTML. Протокол Open Graph також визначає використання атрибутів властивостей і контенту для розмітки (<meta property = "og: image" content = "http://example.com/ogp.jpg" />), в той час як Twitter Card використовують ім'я та контент. Аналізатор Twitter буде повертатися до використання властивості і вмісту, тому немає необхідності змінювати існуючу розмітку протоколу Open Graph, якщо вона вже існує.
Приклад впровадженої розмітки Twitter Card на сайті OkayCMS
<Meta name = "twitter: card" content = "summary"> <Meta name = "twitter: title" content = "Шаблон для OkayCMS OkEffect"> <Meta name = "twitter: description" content = "Багатомовний адаптивний шаблон Carol для інтернет-магазинів з широкою аудиторією продажів. Багатомовність сайту і можливість вибору валюти відображення цін на товари - обов'язковий функціонал для магазину з широкою аудиторією збуту. Особливо, якщо це одяг, взуття або дизайнерські аксесуари. Стильний шаблон Carol допоможе вам "зі смаком" піднести товари клієнту на вашому сайті. Лаконічний, в строгій колірній ... "> <Meta name = "twitter: image" content = "https://okay-cms.com/files/products/okeffect.400x400.png">
І ось наочний приклад того, як це працює:
Інші сервіси, такі як Facebook, VK, Однокласники беруть інформацію з стандартних тегів, які ми розглянули на початку статті. Нижче ви можете спостерігати, як виглядає один і той же контент при шарінгом в різних соц мережах.
І в кінці наведемо повний код OpenGraph розмітки, який використовується в OkayCMS
{If $ module == 'ProductView'}
<Meta property = "og: url" content = " {if $ lang_link} / {str_replace ( '/', '', $ lang_link)} {/ if} " />
<Meta property = "og: type" content = "article" />
<Meta property = "og: title" content = "" />
<Meta property = "og: description" content = "" />
<Meta property = "og: image" content = "" />
<Link rel = "image_src" href = "
<Meta name = "twitter: card" content = "summary">
<Meta name = "twitter: title" content = "">
<Meta name = "twitter: description" content = "">
<Meta name = "twitter: image" content = "">
{Elseif $ module == 'BlogView'}
<Meta property = "og: url" content = " {if $ lang_link} / {str_replace ( '/', '', $ lang_link)} {/ if} " />
<Meta property = "og: type" content = "article" />
<Meta property = "og: title" content = "" />
{If $ post-> image}
<Meta property = "og: image" content = "{$ post-> image | resize: 400: 300: false: $ config-> resized_blog_dir}" />
<Link rel = "image_src" href = "{$ post-> image | resize: 400: 300: false: $ config-> resized_blog_dir}" />
{Else}
<Meta property = "og: image" content = " / design / /images/logo_ru.png" />
<Meta name = "twitter: image" content = " / design /
<Meta property = "og: description" content = "
<Meta name = "twitter: card" content = "summary">
<Meta name = "twitter: title" content = "">
<Meta name = "twitter: description" content = "">
<Meta name = "twitter: image" content = "{$ post-> image | resize: 400: 300: false: $ config-> resized_blog_dir}">
{Else}
<Meta property = "og: title" content = "" />
<Meta property = "og: type" content = "website" />
<Meta property = "og: url" content = "" />
<Meta property = "og: image" content = " / design / /images/logo_ru.png" />
<Meta property = "og: site_name" content = "" />
<Meta property = "og: description" content = "" />
<Link rel = "image_src" href = " / design /
<Meta name = "twitter: card" content = "summary">
<Meta name = "twitter: title" content = "">
<Meta name = "twitter: description" content = "">
<Meta name = "twitter: image" content = " / design /
Робіть OpenGraph розмітку правильно і діліться посиланнями свого сайту красиво
