Сегодня посетителей практически каждого сайта агитируют поделиться материалами в социальных сетях. И это неудивительно, так как обмен ссылками в социальных сетях представляет собой один из наиболее эффективных способов продвижения бизнеса и услуг. Для этого используются мета теги для сайта.
Когда пользователь решил кликнуть по одной из ссылок, задача веб-разработчика заключается в том, чтобы связанная со ссылкой страница выглядела привлекательно. Именно об этом мы сегодня и поговорим.
Продвижение в 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
Что такое Open Graph на практике
Для подключение OG необходимо внести специальный html-код (разметка на примере видео есть в хэлпе Яндекса). Группа обязательных тегов:
- og:title — название страницы (длина в Facebook — до 95 символов);
- og:type — тип контента на сайте (статья, фильм, песня или профиль человека);
- og:image — адрес изображения, используемого в качестве превью (на Facebook минимальный размер составляет 50 х 50px, максимальный вес 5 МБ);
- og:url — адрес страницы.
Open Graph мета-теги
В результате применения этих тегов расшаренная запись в Facebook будет отображаться так:
В дополнение к 4 обязательным мета-тегам Open Graph есть дополнительные:
- og:site_name — название сайта, на котором расположен сайт;
- og:description — краткое описание (максимальная длина Facebook — 297 символов);
- og:locale — язык, используемый на сайте и его местонахождение;
- og:locale:alternate — Другие языки, в которых доступна страница (для мультиязычных сайтов). Вы можете указать несколько дополнительных языков.
В Facebook можно использовать еще больше мета-данных (подробности здесь). Например:
Геолокации: широта, долгота, высота над уровнем моря:
<meta property="place:location:latitude" content="37.416382/">
Контактная информация (street_address, locality, postal_code, region, country_name, email, phone_number, fax_number):
<meta property="business:contact_data:email" content="info@mail.ru/">
Типы контента
На Facebook широкий спектр дополнительных типов данных, которые мы можем назначить для страницы (вы должны поместить их в тег «og:type»). Типы контента сгруппированы по категориям:
- Виды деятельности: activity, sport;
- Бизнес: bar, company, restaurant, cafe, hotel;
- Группы: sports_league, sports_team;
- Организации: band, government, non_profit, school, university;
- Люди: actor, athlete, author, director, musician, politician, public_figure;
- Места: city, country, landmark, state_province;
- Развлечения: album, book, drink, food, game, product, song, movie, tv_show;
- Веб-сайты: blog, website, article.
Для некоторых типов контента есть уникальные дополнительные маркеры. Например, тип «article» может определить дату публикации — «article:published_time» или категорию статьи «article:section». Для того, чтобы использовать это нужно немного магии в микро-разметке:
<meta property="og:type" content="article" /> <meta property="article:published_time" content="2015-05-20T10:31:27+00:00" /> <meta property="article:section" content="Алгоритм Google" />
Для получения дополнительной информации о дополнительных маркерах для типов контента нужно покопать документацию Open Graph (на русском).
Реализация
Реализация протокола Open Graph на сайтах гораздо проще, если вы используете популярные CMS (системы управления контентом), такие как WordPress или Drupal и т.д. Есть куча плагинов, которые позволяют довольно просто настраивать соответствующую разметку. Например для WordPress это сделает Yoast SEO.
Когда соответствующие теги Open Graph будут размещены на сайте, вы можете проверить его точность с помощью инструментов, предоставляемых Facebook: https://developers.facebook.com/tools/debug
Open Graph в других социальных сетях
Открытый протокол График используется не только Facebook, но и на других сайтах социальных сетей, в разной вариации. Вконтакте и Одноклассники, например, поддерживают стандартный Open Graph, потому их не выделяем.
Карты Twitter
Twitter автоматически использует стандартные теги OG, но и создал свой собственный набор метаданных. Они позволяют делать более сложные и хорошо размеченные твиты. Они выделяются в толпе других постов и позволит вам получить больше переходов и ретвитов. Ниже приведены два примера твитов.
Для использования этих функций необходимо разместить специальный код, используемый Твиттером. Наиболее важными тегами являются:
- twitter:card — Определяет тип содержимого, разделяемых. В настоящее время эти типы карт:
- > Player Card — Для сообщений, содержащих видео / музыку;
- > App Card — позволяет скачать мобильное приложение;
- > Summary Card — для других типов публикаций;
- > Summary Card with Large Image — Позволяет дополнительно включать изображение
Пример:
<meta name=”twitter:card” content=”summary_large_image”/>
- twitter:title — похож на og:title. Максимальная длина составляет 70 символов,
- twitter:description — похож на og:description. Максимальная длина составляет 200 символов,
- twitter:image — Тег подобен og:image, в котором идет адрес изображение. Максимальный вес изображения: 1 МБ, а минимальный размер 60 х 60 пикселей.
- twitter:site — Указывает имя страницы учетной записи на Twitter.
Пример:
<meta name=”twitter:site” content=”@RomanusRU”/>
Подробная информация о Twitter карточки с примерами и перечнем необходимых тегов для различных типов карт можно найти в официальной документации: https://dev.twitter.com/cards/overview
Вы должны знать, что если вы используете Open Graph и Twitter карты, то можно опустить дублирующие теги, такие как название, описание или изображение и оставить их только стандартные теги OG.
Правильность реализации на данных мета Twitter можно проверить с помощью валидатора: https://cards-dev.twitter.com/validator
Вид Твиттер карт:
Google+
Предпочтительными тегами являются Schema.org (она же микроразметка), но также поддерживаются следующие мета-теги Open Graph: og:title, og:description, og:image. Для получения более подробной информации о представлении страниц в Google+ доступна по адресу: https://developers.google.com/+/web/snippet/.
Pinterest использует несколько типов разметки: Schema.org, Open Graph, oEmbed и hRecipe. Существуют различные типы тегов в зависимости от типа контента, так называемые — Rich Pins, содержащие дополнительные данные доступные для следующих категорий: рецепты, статьи, видео, места и продукты. Точные описания метки, необходимые для данной категории, вы можете получить на странице: https://developers.pinterest.com/docs/rich-pins/.
Вот так круто выглядит Rich Pin:
Как использовать Open Graph
С помощью тегов OG, потому что мы можем установить страницу:
- Подготовленное для пользователей броское название (согласитесь, наши сеошные тайтлы — не годятся для «желтой прессы» в 90% случаев);
- Адекватное описание (вместо куска текста);
- Графика (вместо случайного изображения со страницы).
Таким образом, мы будем улучшать CTR из соц. сетей и увеличим количество переходов.
Например, сервис Tumblr после реализации протокола Open Graph увеличил трафик с Facebook на 250%. Использование Open Graph особенно уместно на сайтах, связанных с таким темами, как:
- музыка;
- фильмы;
- телевидение;
- книги;
- спорт;
- общепит;
- приложения и игры;
- Кулинария;
- Женские порталы.
В общем любые тематики, где часто делают расшаривания контента, т.к. это даст более качественное представление вашего поста в любой соц. сети. Одним слово, Open Graph — полезняк, который нужно внедрять на сайты. Я проспал эту тему (откладывал постоянно), потому сейчас дописываю пост и иду пилить его на свои сайты ?
romanus.ru
Не знаю, кто начал первым употреблять этот термин, но сейчас Open Graph активно продвигается социальной сетью Facebook, как универсальный протокол представления информации для дальнейшего распространения. Так что же это такое и с чем его едят?
Протокол Open Graph позволяет странице быть полноценным участником социального окружения, формируемого публикуемой информацией. С его помощью можно унифицировать всю информацию на странице, составив из нее своеобразную визитную карточку, в которую включено текстовое описание, графическое изображение, правильно оформленный заголовок.
Большинство начинающих блоггеров плохо знакомы с этим протоколом, и с его возможностями, поэтому страницы, отправляемые в Facebook имеют страшный вид – без изображений, с недостаточно точным описанием или вовсе без оного, с корявым заголовком. Чтобы исправить такую ситуацию, разработчики Facebook рекомендуют применять несколько тегов, с помощью которых можно добиться наиболее привлекательного представления ссылки на страницу. Вот самые востребованные из них:
- og:image – этот тег указывает на наиболее релевантную картинку, которая может сопровождать ссылку при отправке ее в Facebook.
- og:title – этот тег определяет заголовок рядом с ссылкой. Его можно изменять с таким расчетом, чтобы он имел наибольшую привлекательность для читателей.
- og:description – этот тег указывает на текстовое описание ссылки. По умолчанию Facebook понимает текст длиной 295 символов, что, например, больше, чем 160 символов, которые понимают сервисы Google, и этим можно пользоваться, предоставляя для одних социальных один текст, а для других – другой.
Подробнее познакомиться с описанием Open Graph можно на странице Facebook и странице протокола.
Так как же правильно настроить теги Open Graph для максимальной выгоды своему блогу? Ничего сложного в этом нет – достаточно добавить в файл functions.php следующий код:
Этот код автоматически формирует из содержимого поста Open Graph теги:
- og:type – используется значение article, указывающее, что пост является статьей
- og:title – используется полное название поста
- og:url – используется прямая ссылка на страницу поста
- og:description – текстовое описание формируется из цитаты поста
- og:image – в качестве картинки используется миниатюра поста
Эти теги он при формировании страницы вставляет в между тегами
и
Ну и чтобы не возникало ошибок в определении языка и кодировки, нужно открыть файл header.php, и найти в нем тег html. Например, в теме Twenty Twelve, являющейся в WordPress 3.4.x дефолтной, он выглядит так:
Вместо него нужно вставить:
n-wp.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">
И вот наглядный пример того, как это работает:
Другие сервисы, такие как 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 разметку правильно и делитесь ссылками своего сайта красиво
okay-cms.com
Решил собрать в одной статье короткий рецепт приготовления страницы, которая круто шарится во все основные соцсети. Тем, кто вообще не в теме, придётся сначала прочитать про Open Graph protocol.
Для Фейсбука, Вконтакта, Одноклассников и Гуглплюса:
<meta property="og:type" content="website"> <meta property="og:site_name" content="Название сайта"> <meta property="og:title" content="Заголовок"> <meta property="og:description" content="Описание."> <meta property="og:url" content="http://example.com/page.html"> <meta property="og:locale" content="ru_RU"> <meta property="og:image" content="http://example.com/img.jpg"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> Для Твиттера и Вконтакта (ВКонтакт выберет для заголовка тот title, который в коде будет расположен ниже):
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Заголовок"> <meta name="twitter:description" content="Описание."> <meta name="twitter:image:src" content="http://example.com/img.jpg"> <meta name="twitter:url" content="http://example.com/page.html"> <meta name="twitter:domain" content="example.com"> <meta name="twitter:site" content="@"> <meta name="twitter:creator" content="@..."> Гуглплюс нормально подхватывает Open Graph, поэтому добавлять специальные теги для него больше не нужно:
<!-- <meta itemprop="name" content=""> <meta itemprop="description" content=""> <meta itemprop="image" content=""> --> Выбор картинки подходящего размера — основная проблема. Даже внутри одной соцсети есть сценарии, в которых изображения безбожно кропятся. Раньше я пользовался специальным шаблоном, чтобы понять, как откадрировать изображение и гарантированно не потерять главного.
А потом я просто подсмотрел, как делают на Слоне.
Да, 968×504 пискеля это меньше минимально рекомендованных Фейсбуком 1200×630. Зато при таком размере и ратио картинку нигде не кропят, и выглядит она отлично.
Кстати, соцсети кэширует вашу страницу, и это сводит с ума во время отладки, пока вы не научитесь сбрасывать кэш: VK pages.clearCache, Facebook Open Graph Object Debugger.
Расскажите о других тонкостях применения технологии в комментариях? Хорошего шаринга.
habr.com
Протокол Open Graph как инструмент продвижения в соц. сетях
Все еще удивляетесь, почему SEO не приносит Вашему сайту ожидаемых результатов? А Вы точно используете все возможности?
Возьмем самое элементарное – кнопки социальных сетей на сайте. Их Вы хотя бы установили? Когда посетители веб-сайта получат привычные для них инструменты взаимодействия с понравившимся контентом и его распространения, дела с привлечением трафика и его рейтингом в глазах поисковиков пойдут куда лучше. Поэтому все эти «Лайки», «Поделиться» и им подобные на сайте быть должны. Будем считать, что с этим мы разобрались.
Если у Вас возник вопрос по поводу того, какое отношение имеет данное вступление к теме в заголовке статьи (протокол 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:
- og:image — используется для указания пути к изображению, которое должно быть использовано для создания анонса. Причем это не обязательно должна быть картинка с текущей страницы.
- og:title — в нем прописывается желаемый заголовок анонса, который вовсе не должен совпадать с заголовком страницы.
- og:description – тег, в котором содержится описание контента страниц, то есть текст анонса. В отличие от стандартного description страницы, размер которого не должен быть больше 160 знаков, в этом мета-теге Open Graph можно прописывать до 295 символов.
- og:url – указывается ссылка страницы, анонс которой собственно и будет формироваться.
- og:site_name – прописывается имя сайта, которое должно отображаться в будущем посте в соц. сети. Можно указать любое.
- og:type – указывает на тип основного содержимого веб-страницы (article – статья, movie – фильм и т. д.).
Это основные мета-теги Open Graph, которые чаще всего используются и рекомендованы разработчиками разметки. Но кроме них имеются и дополнительные, с помощью которых в анонсах можно указывать второстепенные (необязательные) данные:
- og:video и og:audio – в них размещаются URL на прикрепляемые к анонсу видео- и аудиофайлы;
- og:locale – указывается язык, на котором составлено описание объекта.
Также og:image и og:video могут содержать дополнительные мета-данные, указываемые после двоеточия:
- :secure_url — URL на вариант контента, который открывается по защищенному HTTPS;
- :width — ширина картинки (видео) в пикселях;
- :height — высота картинки (видео) в пикселях.
На самом деле в протоколе Open Graph мета-тегов имеется намного больше, и мы перечислили лишь наиболее часто используемые. С остальными можно ознакомиться на официальном сайте http://ogp.me.
В заключение – нюансы использования протокола Open Graph
Чтобы убедиться в правильности внедрения и заполнения мета-тегов Open Graph, можно воспользоваться специально разработанным для этой цели сервисом от Facebook. Нужно всего лишь ввести ссылку на веб-страницу, чтобы увидеть, как будет выглядеть ее анонс при публикации в соц. сети. При наличии каких-либо ошибок, Вы получите предупреждающее сообщение с указанием на обнаруженную проблему.
Еще один момент касательно использования данной разметки – не каждый захочет или сможет копаться в коде страниц своего сайта для улучшения их отображения в соц. сетях. К счастью, это не обязательно. Для сайтов, работающих на Joomla и WordPress, имеются специализированные плагины, берущие на себя обязанность по внедрению мета-тегов Open Graph.
Как видите все это вовсе не сложно и отказываться от преимуществ, которые дает протокол Open Graph, более, чем нерационально: только по-настоящему ленивый веб-мастер не воспользуется ими.
seo-akademiya.com
Немного теории об 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 код будет таким:
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
- 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