Что такое 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.5.0
Подписаться на рассылку
Вы будете получать подборку полезных статей по работе с сайтом на OkayCMS, скидки на модули и шаблоны