Что такое OpenGraph разметка ?

Михайленко
  • 473
  • 0

Что такое 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="{$config->root_url}{if $lang_link}/{str_replace('/', '', $lang_link)}{/if}{$canonical}"/>
        <meta property="og:type" content="article"/>
        <meta property="og:title" content="{$product->name|escape}"/>
        <meta property="og:description" content="{$product->annotation|strip_tags}" />
        <meta property="og:image" content="{$product->image->filename|resize:330:300}"/>
        <link rel="image_src" href="{$product->image->filename|resize:330:300}"/>
        {*twitter*}
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="{$product->name|escape}">
        <meta name="twitter:description" content="{$product->annotation|strip_tags}">
        <meta name="twitter:image" content="{$product->image->filename|resize:330:300}">
    {elseif $module == 'BlogView'}
        <meta property="og:url" content="{$config->root_url}{if $lang_link}/{str_replace('/', '', $lang_link)}{/if}{$canonical}"/>
        <meta property="og:type" content="article"/>
        <meta property="og:title" content="{$post->name|escape}"/>
        {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="{$config->root_url}/design/{$settings->theme}/images/logo_ru.png" />
            <meta name="twitter:image" content="{$config->root_url}/design/{$settings->theme}/images/logo_ru.png">
        {/if}
        <meta property="og:description" content="{$post->annotation|strip_tags}"/>

        {*twitter*}
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="{$post->name|escape}">
        <meta name="twitter:description" content="{$post->annotation|strip_tags}">
        <meta name="twitter:image" content="{$post->image|resize:400:300:false:$config->resized_blog_dir}">
    {else}
        <meta property="og:title" content="{$settings->site_name}" />
        <meta property="og:type" content="website"/>
        <meta property="og:url" content="{$config->root_url}"/>
        <meta property="og:image" content="{$config->root_url}/design/{$settings->theme}/images/logo_ru.png" />
        <meta property="og:site_name" content="{$settings->site_name}"/>
        <meta property="og:description" content="{$meta_description|escape}"/>
        <link rel="image_src" href="{$config->root_url}/design/{$settings->theme}/images/logo_ru.png"/>
        {*twitter*}
        <meta name="twitter:card" content="summary">
        <meta name="twitter:title" content="{$settings->site_name}">
        <meta name="twitter:description" content="{$meta_description|escape}">
        <meta name="twitter:image" content="{$config->root_url}/design/{$settings->theme}/images/logo_ru.png">
    {/if}

Делайте OpenGraph разметку правильно и делитесь ссылками своего сайта красиво

Рассказать друзьям:


Написать комментарий

captcha

Пока нет комментариев