Дивитися демо

Що таке OpenGraph розмітка?

Категорії
Зміст
  1. Що таке OpenGraph?
  2. Різновиди OpenGraph розмітки.
  3. Основні метадані OpenGraph
  4. Як це виглядає на прикладі нашого сайту:
  5. Приклад додаткових тегів OpenGraph
  6. OpenGraph Twitter
  7. Приклад впровадженої розмітки Twitter Card на сайті OkayCMS
  8. І в кінці наведемо повний код 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 розмітку правильно і діліться посиланнями свого сайту красиво

Коментарі 3
Игорь
25.12.2017, 22:13
Картинка не подтягивается почему-то и в конце текста непонятный знак http://www.picshare.ru/uploads/171225/0Kl22RKwl3.jpg
OkayCMS
25.12.2017, 14:52
Есть, она включена в OkayCMS по умолчанию.
Игорь
25.12.2017, 00:28
На демо получается ее нет?
Написати коментар
увійдіть в особистий кабінет
Завантажити OkayCMS
version 4.2.1
Підписатися на розсилку
Ви будете отримувати добірку корисних статей по роботі з сайтом на OkayCMS, знижки на модулі і шаблони