Корзина Корзина пуста

Что такое OpenGraph?

27.04.2017

OpenGraph разметка, это набор правил для структурирования данных, которыми могут делиться в социальных сетях. Проще говоря, если вы хотите поделиться ссылкой и хотите чтобы она выглядела красиво (включала в себя краткое описание, правильный заголовок и нужное изображение) то все эти данные нужно размечать при помощи специальных тегов.

Разновидности OpenGraph разметки.

На данный момент нет одного единого стандарта, который позволяет точно и одинаково разметить страницу, каждая соц. сеть, будь то Facebook или Twitter предоставляет собственные атрибуты или теги, для того чтобы корректно парсить информацию при шаринге ссылок.

Начнем с общепринятой разметки, которая на самом деле является первым стандартом и позволяет в целом понять разметку текущей страницы.

Основные метаданные OpenGraph

Как это выглядит на примере нашего сайта:

<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 

Следующие свойства являются необязательными для любого объекта:

 

Это была основа, стандарт 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">
Рассказать друзьям:
Комментарии
Пока нет комментариев
Написать комментарий
Контакты
+37533 640-98-68,
Skype: malen911
Email:siteapp@tut.by,
Беларусь, Минск
Мы в соцсетях
© 2017.
Заказ обратного звонка