Og title

Сегодня посетителей практически каждого сайта агитируют поделиться материалами в социальных сетях. И это неудивительно, так как обмен ссылками в социальных сетях представляет собой один из наиболее эффективных способов продвижения бизнеса и услуг. Для этого используются мета теги для сайта.

Когда пользователь решил кликнуть по одной из ссылок, задача веб-разработчика заключается в том, чтобы связанная со ссылкой страница выглядела привлекательно. Именно об этом мы сегодня и поговорим.

Продвижение в Facebook и Twitter

Facebook предлагает разработчикам различные параметры настройки того, как будут выглядеть веб-страницы в новостной ленте пользователей социальной сети. Все сайты по умолчанию относятся к типу контента под названием “Веб-ресурс”, и именно его мы используем в примере.

Предположим, что кто-то поделился главной страницей сайта турфирмы. В ленте Facebook результат будет выглядеть следующим образом:

Twitter также предлагает несколько способов форматирования веб-страниц, но сегодня мы рассмотрим пример, схожий с приведенным выше примером для Facebook. Такой формат в Twitter называется «Summary Card with Large Image»:

В каждом примере имеется несколько атрибутов:

  • Большая картинка и заголовок;
  • Описание;
  • Домен.

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс Facebook и Twitter извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.

Facebook использует meta-теги, используя протокол Open Graph. Это система классификации веб-страниц, которая на данный момент охватывает meta-теги, определенные в HTML5. Полный список доступных тегов можно просмотреть на сайте Open Graph. Но в работе пригодится всего четыре тега:

Как Facebook, так и Twitter дают рекомендации относительно использования упомянутых выше тегов. Учтите, что Facebook ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Совмещаем теги <meta>

Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что Twitter позволяет заменять мета-теги Open Graph на собственные. К тому же за исключением необходимости определить формат отображения нам не понадобятся уникальные мета-теги Twitter. В результате мы получаем следующий код, который стоит рассматривать как самый минимум с точки зрения тегов, необходимых для того, чтобы репост сайта выглядел достойно:

Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение Twitter в 1Мб.

Валидация тегов <meta>

Если у вас возникли сомнения относительно комбинирования мета тега description для сайта c другими тегами, то всегда можно воспользоваться специальными инструментами Facebook Sharing Debugger и Twitter Card Validator. Оба средства умеют извлекать любые веб-страницы с публичных серверов, используя релевантные мета-теги, и демонстрировать вам, как они будут смотреться при распространении в социальных сетях. Кроме этого они выводят список ошибок и дают советы. Как мы поступим с нашим примером? С Twitter, кажется, проблем не возникло, а вот проверка Facebook выдала предупреждение:

И это дает нам отличную тему для разговора.

Аналитика социальных сетей

Этой ошибкой Facebook указывает, что, если вы собираетесь использовать их аналитический инструмент Domain Insights, то нужно будет предоставить уникальный ID, привязанный к вашему аккаунту. Мета-тег должен выглядеть следующим образом:

У Twitter имеется нечто похожее — Twitter Card Analytics. Twitter рекомендует использовать следующий мета-тега, который должен содержать ваш логин в Twitter, привязанный к публикуемой веб-странице:

Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта, и это никак не скажется на отображении публикуемой веб-страницы в хронике Facebook или ленте Twitter.

Что мы упустили?

В документации Facebook есть еще одна рекомендация о дополнительном мета-теге. Он отвечает за название сайта:

Twitter рекомендует использовать другой мета-тег, но он также не обязателен:

Он позволяет указывать альтернативное описание картинки для людей с плохим зрением.

Что у нас получилось

И на этом, пожалуй, все. Стоит отметить, что в документации Facebook и Twitter есть множество других мета тегов для HTML сайта, которые можно использовать для распространения контента другого типа. Но я считаю, что приведенного ниже кода будет вполне достаточно:

Перевод статьи “The Essential Meta Tags for Social Media” был подготовлен дружной командой проекта Сайтостроение от А до Я.

www.internet-technologies.ru

Что такое 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">  

И вот наглядный пример того, как это работает:

Og title

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

Og title

И в конце приведем полный код 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 разметку правильно и делитесь ссылками своего сайта красиво

Og title

okay-cms.com

Проблема с добавлением ссылки в социальную сеть

Дело в том, что «лайки» и добавление нужной страницы в социальные сети далеко не всегда происходит корректно. Самый распространённый сбой состоит в том, что размещённое превью содержит не тот графический контент. В результате новость в социальной сети сопровождается не тематическим фото, а, скажем, рисунком рекламного баннера, который также присутствовал на странице, с которой эта новость была взята. Согласитесь, веб-мастера это не может не расстраивать.

Og title

Протокол Open Graph от Facebook

Впрочем, это расстройство не на века, так как устраняется довольно просто – с помощью дополнительного стандарта микроразметки страницы Open Graph. Последний разработан Facebook и призван контролировать текстово-графический анонс, который формируется при добавлении ссылки на ресурс в социальную сеть.

На практике протокол Open Graph представляет собой особый набор мета-тегов, которые интегрируются в html-код страницы (в границах тега <head>) и обеспечивают нужное отображение превью страницы сайта в социальной сети. Кстати, несмотря на то, что Open Graph разработал и внедрил Facebook, сегодня данный стандарт разметки страницы используется другими известными социальными платформами. Помимо упомянутых выше Вконтакте и Twitter, это также Google+, Яндекс.Видео, Pinterest, LinkedIn и др.

Ключевые мета-теги Open Graph

Для корректного отображения анонса материала в социальной сети html-код страницы сайта должен содержать следующие мета-теги Open Graph:

— – тег, отвечающий за название материала;

og:description – тег, содержащий описание материала (причём в отличие от традиционного мета-тега description стандарт Open Graph позволяет увеличить размер описания со 160 до 295 знаков);

Og title

og:image – ссылка на картинку, которая должна сопровождать материал;

og:type – тег, указывающий на тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;

og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

Пример микроразметки страницы с помощью Open Graph

В качестве примера практического использования протокола Open Graph приведём фрагмент html-кода, в котором использованы необходимые теги данной разметки (подопытная страница – одна из прошлых новостей на PR-CY):

<head>  …  <meta property="og:title" content="Приятный баг для новых пользователей Google AdSense"/>  <meta property="og:description" content="Описание новой ошибки в системе Google AdSense "/>  <meta property="og:image" content="http://pr-cy.ru/news/upload/49127/images/1051f4d0d4dee5fe79e56c59aa71c063.jpg ">  <meta property="og:type" content="article"/>  <meta property="og:url" content= "http:// pr-cy.ru/news/p/5396" />  …  <head>  

Список основных тегов Open Graph (обязательное заполнение которых рекомендуется разработчиком) дополняют условно второстепенные. Иногда их использование тоже может быть оправдано. Например, в том случае, если добавляемая страница содержит информацию о конкретном человеке, то с помощью специального тега в превью в социальной сети можно дополнительно указать пол, возраст и прочие характеристики личности. Исчерпывающий мета-инструментарий Open Graph представлен здесь.

pr-cy.ru

Немного теории об Open Graph

Все данные для OG передаются в мета-тегах, что размещаются в контейнере <head>. Существует 4 таких тега, которые должны быть, иначе не взлетит (или взлетит, но не совсем):

  • og:title — название размечаемого объекта (страницы). Аналог и родственник title.
  • og:type — тип страницы (объекта) или другими словами обозначение того, что находится на данной странице — страница сайта, видео или аудио файлы. В зависимости от указанного типа может понадобиться ещё метатегов.
  • og:image — изображение-иллюстрация для страницы (объекта). Здесь требуется указать прямую ссылку на изображение.
  • og:url — каноничный url адрес данной страницы.

Наверное, вы заметили, что в описании типов я указывал наряду со страницей слово “объект” — дело в том, что в логике работы OG им называется основной элемент на странице. Допустим, наш сайт — видеохостинг и на данной странице мы предлагаем зрителям посмотреть видео. Значит, эта страница — это объект типа “видео” со всеми вытекающими отсюда мета-тегами.

Все дополнительные мета-теги называются опциональными — останавливаться на них сейчас не будем, а рассмотрим на примерах позже.

Стандартная разметка сайта

В самом начале мы должны указать, что используем Open Graph, для чего в тег <html> добавляем следующий код:

Итак, вот такой минимальный код разметки Open Graph нужен на сайте, чтобы основные социальные сети могли сделать красивый блок:

Код достаточно простой и понятный. Здесь уже появились и опциональные мета-теги для изображения — указания размера изображения (про размеры изображений поговорим чуть позже).

Теперь немного тонкости по мета-тегу og:type. Этот тип указывает, что это вообще за страница — если это главная страница сайта или его раздел, то его тип можно указать как website. А вот если это уже отдельная страница (статья) на сайте, то необходимо типом указать article:

Но при этом у нас должно измениться содержание тега <html>:

Замечу тут же и сразу, что мета-тег og:type связан со значениями атрибутов в теге html, поэтому здесь необходима внимательность. Значений для og:type очень много и для тех, кому интересно ознакомиться со всеми ними подробнее, предлагаю посмотреть документацию Facebook — там всё достаточно просто, к тому же отображена актуальная информация.

Тег og:site_name указывает название сайта. В отличии от og:title, который меняется в зависимости от названия страницы, не изменяется.

Также здесь добавлен мета-тег языка страницы og:locale — он не обязателен, но желателен.

Open Graph для Twittera

С Твиттером немного сложнее — если мы хотим добавить полную поддержку для него, то нужно добавить ещё несколько строк кода:

Тэги частично повторяют стандартный набор Open Graph, но на одном из них, а именно twitter:card, нужно остановиться подробнее. Данный тег отвечает за инициализацию карточки в системе Твиттера и для нескольких вариантов её отображения имеет отдельные значения.

Summary Card — данное значение является общим нейтральным и может быть применимо для использоваться для многих видов веб-контента, от сообщений в блогах и новостных статей, продуктов и ресторанов. Он предназначен, чтобы дать читателю предварительный просмотр содержимого перед кликом на ваш сайт. Стандартный вариант, чтобы не заморачиваться. В случае для Summary Card код будет таким:Og title

Summary Card with Large Image — по сути, та же Summary Card, только с большой фотографией, на которой и делается весь акцент. Код меняется не слишком сильно:

App Card — используется, чтобы указать ссылку на мобильное приложение. Здесь имеется чуть больше параметров — кроме иконки (то же изображение по сути), названия и описания, можно добавить такие параметры, как цена и рейтинг. Количество тегов здесь значительно больше.

Имхо, данная тема больше нужна разработчикам мобильных приложений для Android и iOs, поэтому даю ссылку на документацию — там есть немного больше информации.

Player Card — создаёт карточку для трансляций видео (стримов) и аудио (подкастов).  Тут тоже есть ряд нюансов, которые заслуживают отдельной статьи и похода в документацию, поэтому приведу минимально необходимый код для того, чтобы это работало:

Теперь про тег twitter:site — он создан для связывания контента с аккаунтом Вашего сайта в Twitter. Если у вашего сайта есть собственный аккаунт — указывайте его, если нет — можете пропустить, поскольку тег не обязательный. Его практически дублирует twitter:creator, который указывает на аккаунт непосредственно автора контента, что может быть полезным для сайтов с количеством авторов, отличном от 1. Тег также необязателен и можно его не указывать.

Хочу отметить, что если этот код не добавлять, то система сможет составить из содержимого страницы данные, но лучше сделать чуть больше, но правильно.

В разделе для разработчиков предоставлен валидатор для карточек Твиттера для тестирования веб-страниц.

Статистика от Facebook

На правах создателя разметки Open Graph компания Facebook добавил тег, который он хочет видеть в разметке — в простом варианте я его не указывал, но пропустить и умолчать о нём считаю неправильным.

Тег fb:app_id создан для того, чтобы была возможность воспользоваться статистикой на Facebook — с её помощью можно просматривать информацию о переходах на Ваш сайт из Facebook. Для того, чтобы иметь такую возможность, необходимо в разделе Разработки создать новое приложение типа сайт или выбрать из уже имеющихся.

Этот тег необязательный, но Отладчик объектов Open Graph в Facebook будет показывать ошибку.

Немного про размер изображений

Я обещал на этом моменте остановиться подробнее и его сдерживаю, поскольку вопрос действительно важный. На карту поставлен престиж и такие вопросы оставлять нельзя.

Разработчики Facebook в рекомендациях указывают, что размер изображения должен быть пропорционален 1,91:1, чтобы избежать для него обрезания. И минимальным размером считают 1200×630 пикселов.

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

Посему зачастую размер изображения делают равным 968×504 пикселов. Получается хорошо и универсально. Но конечный выбор размера изображения остаётся за Вами.

Информация об авторе статьи

Увековечить себя в микроразметки поможет следующая строчка в коде:

Если объект страницы — продукт коллективного труда, то авторов можно указать через запятую:

Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:

Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!😊😊😊😊

Разметка видео

Такую разметку следует применять на страницах, где основным элементом является видео. Для начала добавляем нужную информацию в <html>:

Заметили? Появился новый указатель на словарь от Яндекса — это нужно для того, чтобы видео с сайта попало в поиск в соответствующий раздел. Теперь добавляем мета-теги:

Их тут очень много и некоторые необходимо разобрать подробнее:

  • Тег og:video указывает либо на сам файл, либо на плеер, с помощью которого он проигрывается.
  • Тег video:duration указывает продолжительность видео в секундах (поэтому такие большие значения).
  • Тег ya:ovs:adult указывает на принадлежность видео к категории “18+”. Если видео имеет такое ограничение, то пишем true, а если нет, то false.
  • Тег og:type показывает, к какому жанру относится это видео — кино, серия из сериала, музыкальный клип, шоу, прямая трансляция или что-то другое (как в нашем примере).
  • Тег og:video:type указывает на формат файла.

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

anatolykulikov.ru

Что такое Open Graph?

На официальном сайте говорится, что протокол Open Graph обогащает возможности страницы в социальных медиа. Другими словами, это группа мета-тегов, рассказывающая социальным сетям о содержимом страниц, которыми вы делитесь. Благодаря этому ссылки из набора символов превращаются в понятные заголовки с картинками и пояснениями. Протокол Open Graph был создан Facebook’ом и сейчас регулируется Open Web Foundation.

Пример отображения ссылки на страницу с Open Graph

Почему Open Graph важен

Социальные сети – один из крупнейших источников трафика. Чтобы не терять посетителей и потенциальных клиентов, нужно использовать Open Graph. Прямого влияния на поисковую оптимизацию страницы протокол не оказывает, но делает ссылки в социальных сетях проще для восприятия. Ниже мы приводим список тегов и их назначение.

Мета-теги Open Graph

  • og:title – заголовок страницы. Для него есть ограничение в 65 символов. Напишите что-то длиннее – текст будет обрезан.
  • og:type описывает тип объекта на странице (веб-сайт, блог, книга, фильм и т.д.).
  • og:image — URL изображения, характеризующего страницу.
  • og:url – адрес сайта.
  • og:description – краткое описание страницы длиной не более 300 символов.
  • og:video – если на странице есть видео, здесь прописывается URL.
  • og:locale – язык страницы (ru_RU, en_GB, de_DE, etc.).
  • og:site_name – название сайта.

Использование тегов Open Graph

Чтобы добавить протокол Open Graph, нужно выполнить следующие шаги:

  • Добавить «http://ogp.me/ns#» к тегу html.
  • Вставить мета-теги с их содержимым и атрибутами между тегами head.
  • Использовать min 4 мета-тега Open Graph, которые являются обязательными: og:title, og:type, og:image и og:url.
  • Расширить разметку, если на вашей странице много разнообразного контента.

Вот как будет выглядеть HTML-код:

<html prefix="og: http://ogp.me/ns#">  <head>  <title>The Title of Your Article</title>  <meta property="og:title" content="Article on Anything by You" />  <meta property="og:type" content="article" />  <meta property="og:url" content="http://www.websiteaddress.com/article/" />  <meta property="og:image" content="http://www.websiteaddress.com/images/article_pic.jpg" />  ...  </head>  ...  </html>  

Мета-теги Google+

Оптимизировать ссылки для Google+ можно 2 способами. В отличие от других социальных сетей, Google+, в первую очередь, ищет разметку Schema. Только потом, если ее не удалось найти, Google+ обращается к тегам Open Graph. Поэтому можно не заморачиваться и использовать Open Graph или добавить Schema. Алгоритм у разметки аналогичный, только теги немного отличаются. Вот основные:

  • name: соответствует og:title
  • description: соответствует og:description
  • image: соответствует og:image
  • author: URL профиля Google+
  • publisher: URL страницы Google+
<meta itemprop="name" content="The name of your website" />  <meta itemprop="description" content="The description of your website" />  <meta itemprop="image" content="https://websiteaddress.com/yourimage.png" />  

Добавьте эти теги в свой код, и вы увидите, что они действительно полезны. Ссылки на сайт в социальных сетях получат больше кликов, что приведет на сайт больше посетителей. Конечно, это только базовые знания об Open Graph. Больше узнать можно на официальном сайте, или воспользоваться услугами нашей команды, которая поможет оптимизировать сайт по всем фронтам.

magora-systems.ru

Что такое Open Graph?

Open Graph – протокол, который позволяет сформировать необходимое превью при публикации ссылки в социальных сетях.

По-другому Open Graph называют словарь микроданных, который был разработан компанией Facebook специально для решения проблемы с отображением ссылок в соцсети.

На сегодняшний день Open Graph используется в Facebook, Вконтакте, Google+, Twitter, Linkedin, Pinterest. Например, Яндекс использует Open Graph для формирования заголовка сниппета и передачи данных в сервис Яндекс Видео.

Часто на многих сайтах встречается серия кнопок поделиться в различных соц сетях. Например, мы поделились Вконтакте, что произойдет?

OpenGraph Вконтакте

На 2 страницах практически нет информации, но в случае с ссылкой Яндекса мы видим более информативный пост с внешней ссылкой и слоган (которого на странице нет), т.к. используются возможности Open Graph. Но если данные сайты в представлении не нуждаются, то внешний вид нашей ссылки имеет огромное значение.

Open Graph во Вконтакте

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

Open Graph как использовать?

Итак, чтобы вашу страницу смогли считывать социальные сети необходимо добавить определенные мета-теги. Эти мета-теги будут размещаться в разделе <head></head> и теге <meta>. Давайте разберем базовую Open Graph разметку, то есть 4 основных атрибута для каждой страницы.

  • og:title – в атрибуте указывается заголовок страницы, который вы хотите видеть при отображении в превью социальных сетей;
  • og:type – атрибут указывает тип объекта: страницы или видео. В зависимости от типа, можно задать другие свойства которые могут быть необходимы;

  • og:description – Краткое описание вашей страницы или видео. Чем-то напоминает Meta-tag description, но без символьных ограничений;
  • og:image — URL-адрес изображения, которое можно указать самостоятельно просто добавить в этот атрибут ссылку;
  • og:url — URL-адрес страницы, который использоваться в качестве постоянного ID.

Пример:

<meta property=»og:title» content=»Как настроить Яндекс Директ»/>

<meta property=»og:description» content=»В этой статье я расписал 10 способов как настроить Яндекс Директ.»/>

<meta property=»og:image» content=»http://site.ru/images/yandex_direct.jpg&quot; />

<meta property=»og:type» content=»article»/>

<meta property=»og:url» content= «http://site.ru/blog/nastroyka_yandex_direct/&quot; />

Читайте в нашем блоге: Xenu — поиск битых ссылок на сайте

Дополнительные атрибуты Open Graph

Разберем следующие виды атрибутов, которые не обязательны и зависят от спецификации вашего объекта.

  • og:audio — URL звукового файла, который относится к описываемому объекту;
  • og:determiner — слово, которое должно быть перед названием объекта в предложении. Оно может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать;
  • og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US;
  • og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта;
  • og:site_name — название сайта, на котором размещена информация об объекте;
  • og:video — URL видео файла, который относится к описываемому объекту.

<meta property=»og:audio» content=»http://site.com/intro.mp3&quot; />

<meta property=»og:description» content=»Directed by Christopher Nolan.  With Matthew McConaughey, Anne Hathaway, Jessica Chastain, Mackenzie Foy. A team of explorers travel through a wormhole in space in an attempt to ensure humanity’s survival..» />

<meta property=»og:determiner» content=»a» />

<meta property=»og:locale» content=»en_GB» />

<meta property=»og:locale:alternate» content=»fr_FR» />

<meta property=»og:locale:alternate» content=»es_ES» />

<meta property=»og:site_name» content=»IMDb» />

<meta property=»og:video» content=»http://site.com/trailer.mp4&quot; />

Существует и другие специфичные атрибуты разметок для различных типов объектов (type): Image (Изображения), Music(Музыки), Video(Видео), Article(Статьи). Но на них мы не будем более подробно останавливаться, основную суть я уже подчеркнул.

Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:

Open Graph СМИ Republic

Популярное издательство Republic тоже не обходит социальные сети. Мне понравилось, что ребята подходят отдельно к оформлению в соцсетях. Помимо микроразметки они используют еще картинку с текстом, благодаря чему кликабельность может увеличиться в 2, а то и более раз. Все-таки людям свойственно обращать внимание на большие заголовки, вспомните газеты, журналы, где писали большими печатными буквами так же и тут.

Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.

Как проверить Open Graph?

Здесь все просто – рассмотрит 2 самых популярных способа.

Проверяем вручную

Проверка OpenGraph

Для этого заходим на сайт, где мы хотим проверить разметку OpenGraph и нажимаем “Посмотреть исходный код” или в Google Chrome это клавиши CTRL+U. Мы попадем в код страницы, далее нам необходимо нажать CTRL + F и написать в появшейся строке 3 символа: “og:”, где og – означает Open Graph. Нам подсветятся значения если они используются на сайте.

Использование сервиса Open Graph Check

OpenGraph Checker

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

Читайте в нашем блоге: Что такое meta name robots?

Аналоги Open Graph

Микроразметка Schema.org и OpenGraph

Помимо Open Graph существует много других микроразметок данных. Разберем самые популярные виды микроразметок:

  • Микроформаты (Microformats.org). Данный вид разметки по большей части используется для определённых нужд (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Минус разметки Microformats –сложное внедрение, поэтому этот словарь применяется сегодня все реже;
  • Schema.org – вид микроразметки, который активно используется в поисковых системах Google и Яндекс. Плюс такой разметки в том, что она содержит более миллиона характеристик и свойств.

Что касается других видов разметок, но они менее популярные и используются только в особых случаях.

Читайте так же про:

Что такое геозависимость?

Что такое noindex, nofollow?

Зачем нужен meta name robots?

Что такое пузомерки сайта?
Все про алгоритм БМ25
Что такое ТИЦ?
Что такое Мета-тег Description?
Что такое Мета-тег Keywords?

Заключение:

Open Graph безусловно важна, в первую очередь с точки зрения привлечения трафика на сайт с социальных сетей. Ведь от того, как выглядит ссылка, будет зависеть кликнет на вас пользователь или нет, да что говорить, если самые посещаемые сайты используют данную разметку.

Так что не ленитесь, все в ваших руках! Успехов вам в настройке Open Graph и продвижении ваших ресурсов!

Если у вас остались вопросы ко мне, пишите, я на них отвечу!

edison.bz

Протокол Open Graph как инструмент продвижения в соц. сетях

Все еще удивляетесь, почему SEO не приносит Вашему сайту ожидаемых результатов? А Вы точно используете все возможности? 

Возьмем самое элементарное – кнопки социальных сетей на сайте. Их Вы хотя бы установили? Когда посетители веб-сайта получат привычные для них инструменты взаимодействия с понравившимся контентом и его распространения, дела с привлечением трафика и его рейтингом в глазах поисковиков пойдут куда лучше. Поэтому все эти «Лайки», «Поделиться» и им подобные на сайте быть должны. Будем считать, что с этим мы разобрались. 

Если у Вас возник вопрос по поводу того, какое отношение имеет данное вступление к теме в заголовке статьи (протокол Open Graph), предлагаем перейти к следующему моменту: очень частой проблемой для веб-мастеров, которые используют кнопки соц. сетей на своих сайтах, становятся некорректное содержимое и внешний вид анонсов контента, которые автоматически генерируются при нажатии на кнопку расшаривания. 

В результате в социальную сеть попадает либо слабо привлекающий внимание пост с неудачно выбранной картинкой, либо вообще содержащий информацию о сторонних веб-ресурсах, извлеченную из рекламных блоков сайта. 

Анонс без Open Graph протокола
 
В примере на скриншоте человек поделится с друзьями постом со ссылкой на статью об AC/DC с «левой» картинкой из раздела «Недавно опубликовано» и описанием, взятым наугад из других материалов оттуда же (о прахе Дэвида Боуи).

Конечно же, об эффективности продвижения сайта в социальных сетях при этом речь идти не может: пользователи не будут переходить по такой ссылке из ленты друга, поскольку не поймут этот «винегрет».

И тогда на помощь веб-мастеру приходит протокол Open Graph!

Теория по теме: что такое Open Graph и чем он может быть полезен

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

Со временем стандарт Open Graph разметки начали использовать и другие популярные социальные сети (Вконтакте, Google+, Pinterest, Twitter и др.).

Внедрение мета-тегов  Open Graph в html-код веб-страниц дает возможность управлять содержимым анонсов статей, которые посетители отправляют в соц. сети в виде постов с помощью соответствующих кнопок на сайтах или обычной вставки ссылок.

Как настроить разметку Open Graph на своем сайте

На самом деле ничего сложного в этом нет. Для создания разметки, которая будет способствовать отображению корректных анонсов контента в соц. сетях, требуется лишь добавить в раздел <head>…</head> кода страницы нужные мета-теги Open Graph:

  1. og:image — используется для указания пути к изображению, которое должно быть использовано для создания анонса. Причем это не обязательно должна быть картинка с текущей страницы.
     
  2. og:title — в нем прописывается желаемый заголовок анонса, который вовсе не должен совпадать с заголовком страницы.
     
  3. og:description – тег, в котором содержится описание контента страниц, то есть текст анонса. В отличие от стандартного description страницы, размер которого не должен быть больше 160 знаков, в этом мета-теге Open Graph можно прописывать до 295 символов.

    Пример внедрения мета-тегов Open Graph
     

  4. og:url – указывается ссылка страницы, анонс которой собственно и будет формироваться. 
     
  5. og:site_name – прописывается имя сайта, которое должно отображаться в будущем посте в соц. сети. Можно указать любое.
     
  6. og:type – указывает на тип основного содержимого веб-страницы (article – статья, movie – фильм и т. д.).

    Пример отображения тегов Open Graph 

Это основные мета-теги Open Graph, которые чаще всего используются и рекомендованы разработчиками разметки. Но кроме них имеются и дополнительные, с помощью которых в анонсах можно указывать второстепенные (необязательные) данные:

  • og:video и og:audio  – в них размещаются URL на прикрепляемые к анонсу видео- и аудиофайлы;
     
  • og:locale – указывается язык, на котором составлено описание объекта.
     

Также og:image и og:video могут содержать дополнительные мета-данные, указываемые после двоеточия:

  • :secure_url — URL на вариант контента, который открывается по защищенному HTTPS;
     
  • :width — ширина картинки (видео) в пикселях;
     
  • :height — высота картинки (видео) в пикселях.

    Дополнительные мета-теги Open Graph 

На самом деле в протоколе Open Graph мета-тегов имеется намного больше, и мы перечислили лишь наиболее часто используемые. С остальными можно ознакомиться на официальном сайте http://ogp.me.

В заключение – нюансы использования протокола Open Graph

Чтобы убедиться в правильности внедрения и заполнения мета-тегов Open Graph, можно воспользоваться специально разработанным для этой цели сервисом от Facebook. Нужно всего лишь ввести ссылку на веб-страницу, чтобы увидеть, как будет выглядеть ее анонс при публикации в соц. сети. При наличии каких-либо ошибок, Вы получите предупреждающее сообщение с указанием на обнаруженную проблему.

Проверка Open Graph

Еще один момент касательно использования данной разметки – не каждый захочет или сможет копаться в коде страниц своего сайта для улучшения их отображения в соц. сетях. К счастью, это не обязательно. Для сайтов, работающих на Joomla и WordPress, имеются специализированные плагины, берущие на себя обязанность по внедрению мета-тегов Open Graph.

Как видите все это вовсе не сложно и отказываться от преимуществ, которые дает протокол Open Graph, более, чем нерационально: только по-настоящему ленивый веб-мастер не воспользуется ими.

 

seo-akademiya.com

Откуда появился Open Graph?

Open Graph – это словарь микроданных, который был разработан специалистами Facebook специально для решения проблемы с «кривым» отображением ссылок в ленте соцсети.

Благодаря OG владелец веб-ресурса может обеспечить корректный и привлекательный показ ссылки на свой сайт в социальной сети. А это, в свою очередь, оказывает влияние на кликабельность ссылки и, в нашем случае, на продажи.

34.png

Ссылки на товары Вконтакте

КСТАТИ. Несмотря на то, что Open Graph разрабатывался Facebook «под себя», его используют и другие социальные сети (ВКонтакте, Одноклассники, Twitter). Так что, внедрив такую разметку на свой сайт, вы одномоментно решите проблему с некорректным показом ссылок в большинстве популярных соцсетей и сервисов.

Как использовать Open Graph разметку?

Все довольно просто: чтобы получить красивое превью ссылки ВКонтакте, Facebook, Одноклассниках и в других социальных сетях, в код страницы (в теге < head>) необходимо внедрить мета-теги Open Graph.

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

Итак, пример куска кода с обязательными тегами (свойствами) OG выглядит так:

< head>

< meta property="og:title" content="Здесь вы прописываете название, которое хотите видеть в превью ссылки в социальной сети«/>

< meta property="og:description" content="Здесь укажите описание материала (например, краткую характеристику товара или категории интернет-магазина). Размер – до 295 симв. «/>

< meta property="og:image" content="Здесь указывается ссылка на картинку, которая будет отображаться в превью» />

< meta property="og:type" content="article"/> — этот параметр определяет тип добавляемого материала (в данном случае — статья).

< meta property="og:url" content= "Ссылка на саму веб-страницу, которая и будет добавляться в соц. сеть» />

< /head>

ВАЖНО. Для популярных CMS существуют даже свои плагины, позволяющие внедрить разметку Open Graph для Facebook, VK и прочих соцсетей самостоятельно, без привлечения специалистов и долгого «рытья» в коде. Это значительно облегчает интеграции OG даже для неопытных пользователей.

Аналоги Open Graph

OG не одинок в мире микроданных. Помимо него используется еще множество различных словарей микроразметки. Наиболее яркими представителями можно назвать следующие:

56.png

Как устроен мир семантической разметки

  • Микроформаты (Microformats.org). Этот проект можно рассматривать как набор инструментов, заточенных под определённые нужды (например, для разметки товаров используется микроформат hProduct, для кулинарных рецептов – свой hRecipe). Главная особенность Microformats – более сложное внедрение, поэтому этот словарь применяется сегодня все реже.
  • Schema.org – словарь, активно поддерживаемый поисковиками (создавался с целью обеспечения возможности формирования специальных сниппетов в поисковой выдаче). Главная особенность этого инструмента – гибкость, которая достигается за счет обилия свойств, которые можно описать в коде микроразметки. Всего словарь насчитывает более миллиона характеристик и свойств.
  • Dublin Core. Этот словарь разрабатывался с прицелом на различного рода электронные библиотеки и базы данных, и активно используется специалистами музейной сферы, библиотечного дела и пр. Он, в отличие от других, даже стандартизирован в РФ ГОСТом Р 7.0.10-2010.

И это лишь малая часть словарей, используемых сегодня для облегчения жизни владельцам сайтов, оптимизаторам и конечным пользователям. Внедрение Open graph разметки гарантированно улучшит превью ссылок Вконтакте, Skype, Facebook, Google+, Twitter, Pinterest, LinkedIn и др.

Обязательно внедряйте микроданные на сайт, чтобы ваши ссылки в соцсетях имели красивый вид с правильным изображением и актуальным содержанием!

www.seonews.ru

You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.