Open Graph: берем под контроль репосты ваших страниц в социальных сетях

Open Graph: берем под контроль репосты ваших страниц в социальных сетях

От автора: не бывает двух одинаковых макетов сайтов. Социальным сетям типа Facebook бывает довольно сложно найти правильную часть информации в контенте, которую необходимо отображать при репосте страницы в новостной ленте. Вот тут нам и поможет Open Graph Protocol (OGP). Проект разработки Facebook, который легко распознает веб-контент и нормально отображает его на платформе Facebook.

Разберем следующий пример:

Open Graph: берем под контроль репосты ваших страниц в социальных сетях

Страница отрендерена в ленте Facebook без мета тегов Open Graph

Неплохой предпросмотр контента в ленте Facebook, есть заголовок и краткий текст статьи. Однако если мы посмотрим на контент на нашей странице с демо, там используется больше элементов: изображения и имя автора. Facebook без помощи такие детали не вытянет.

Поэтому давайте посмотрим, как с помощью Open Graph можно улучшить представление контента на Facebook.

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

Open Graph задает ряд мета тегов с мета информацией о контенте, точно так же как в мета тегах, которые мы прописываем для поисковиков при стандартной SEO оптимизации. Перед добавлением мета тегов нам необходимо задать XML Namespace для Open Graph в html.

<!DOCTYPE html>
<html
   xmlns:og="http://ogp.me/ns#"
   xmlns:fb="http://ogp.me/ns/fb#">
        <head></head>
        <body></body>
   </html>

Концепция пространства имен в HTML работает почти, как в других языках программирования. Пространство имен убирает двусмысленность в структуре данных. Оно определяет, какие семантические словари или синтаксис использовать, когда в документ вводится пространство имен. В нашем случае пространство имен og относится к Open Graph Protocol, а fb относится к спецификации Facebook Open Graph.

Можно пойти по другому пути и использовать атрибут prefix для задания пространств имен. К примеру:

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
    <head></head>
    <body></body>    
</html>

Добавляем мета теги Open Graph

Для Facebook необходимо добавить несколько тегов, которые будут в коде все время.

Тип контента

Первый – тип контента, задается через свойство og:type. На домашней странице задаем стандартное значение website.

<meta property="og:type" content="website" />

Для контента указывает article.

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

В мета теге og:type можно указать множество других значений, если ваш контент не подходит под типичную статью из блога или новости: product, place, video.movie, books.book и т.д. К примеру:

<!-- Product Type: можно использовать в интернет-магазинах. -->
<meta property="og:type" content="product" />
 
<!-- Place Type: можно использовать на сайтах о путешествиях. -->
<meta property="og:type" content="place" />
 
<!-- Movie Type: можно использовать на сайтах с обзорами на фильмы типа iMDB или стриминговых сервисов типа Netflix. -->
<meta property="og:type" content="video.movie" />

Мета URL

URL контента, заданный через свойство og:url, должен быть абсолютным, без строк запросов или хешей, как в канонической ссылке. На домашней странице URL будет таким:

<meta property="og:url" content="https://tutsplus.github.io/" />

URL контента будет немного длиннее:

<meta property="og:url" content="https://tutsplus.github.io/open-graph-protocol/" />

Мета заголовок

Мета заголовок, заданный через свойство og:title, отвечает за заголовок в превью. Значение заголовка может отличаться от значения тега title. Заголовок можно изменить или сократить для репоста.

К примеру, контент нашей страницы о CSS, и он имеет заголовок для социальных сетей «Learn CSS: The Complete Guide». Однако заголовок документа — «Open Graph Protocol — Tuts+», поэтому:

<meta property="og:title" content="Learn CSS: The Complete Guide" />

Для og:title нет ограничений по количеству символов, но Facebook иногда обрезает заголовки, обычно это происходит в ветке комментариев, где мало места.

Open Graph: берем под контроль репосты ваших страниц в социальных сетях

Facebook обрезает заголовок и описание репоста на стене

Мета описание

В мета описании, которое задается через тег og:description, прописывается краткий текст статьи.

<meta property="og:description" content="A comprehensive guide to help you learn CSS online, whether you're just getting started with the basics or you want to explore more advanced CSS.">

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

Мета изображение

Мета изображение задается через og:image и позволяет визуально представлять контент. В качестве значения не всегда может выступать изображение из контента. Возьмите изображение получше, чтобы читатели нажали и прочитали контент.

<meta property="og:image" content="https://tutsplus.github.io/open-graph-protocol/img/css-best-browser-850.png" />

Помимо URL, в этих тегах можно прописать размер изображения и MIME-тип. Эти теги необязательные, но они облегчат парсинг и кэширование изображений для Facebook.

<meta property="og:image:width" content="850">
<meta property="og:image:height" content="450">
<meta property="og:image:type" content="image/png" />

Минимальный размер изображения – 200х200 пикселей, однако Facebook рекомендует 1200х630 пикселей для наилучшего результата.

Open Graph: берем под контроль репосты ваших страниц в социальных сетях

Маленькое или больше изображение в репосте на Facebook

У вас может возникнуть желание сохранить соотношение сторон: «Старайтесь подогнать соотношение сторон под 1,91:1 для отображения всего изображения в новостной ленте без обрезания.» — разработчики Facebook

Facebook App ID

Настоятельно рекомендуется добавлять на Facebook App ID с помощью мета тега fb:app_id. App ID поможет Facebook создать ссылку на ваш сайт и сгенерирует полный обзор того, как пользователи взаимодействуют с вашим сайтом и контентом.

<meta property="fb:app_id" content="1494084460xxxxxx">

Если вам не требуется аналитика, этот тег можно не использовать.

Вспомогательные мета теги

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

Название сайта

Название сайта задается через мета тег og:site_name. Если быть более точным, с его помощью задается бренд сайта. Бренд и название могут не совпадать с доменным именем. Хороший пример – Tuts+.

Согласно нашим правилам брендинга название должно быть в виде Tuts+, а не Tutsplus. И все же доменное имя имеет вид tutsplus.com, потому что нельзя использовать символ +:

<meta name="og:site_name" content="Tuts+">

Facebook не показывает название сайта в репосте. Оно отображается в уведомлениях, если на вашем сайте установлен плагин Facebook, например, Facebook Comment.

Open Graph: берем под контроль репосты ваших страниц в социальных сетях

Типизированные мета теги

Есть целый ряд тегов, связанных с определенным типом контента. Теги отличаются значением в og:type. У нас есть тег article. С типом article можно использовать вспомогательные мета теги типа article:author, article:published_time, article:publisher, article:section и article:tag.

Перед их использованием необходимо добавить новое пространство имен, ссылающееся на спецификацию Open Graph Article. Теперь у нас три пространства имен: og, fb и article.

<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">
   <head></head>
   <body></body>
</html>

Автор статьи

Facebook требует, чтобы в мета теге article:author был URL на профиль автора статьи в Facebook или его ID.

<meta name="article:author" content="https://www.facebook.com/johndoe">

Если статью писали несколько авторов, можно указать несколько URL или ID.

<meta name="article:author" content="https://www.facebook.com/johndoe, https://www.facebook.com/janedoe">

Совет: если у автора статьи нет аккаунта на Facebook, тег article:author можно заменить на author.

<meta name='author' content='John Doe' />

Facebook покажет имя автора в превью.

Open Graph: берем под контроль репосты ваших страниц в социальных сетях

Facebook также советует добавлять дополнительные теги статьи типа article:published_date и article:section, но на момент написания этой статьи они не играю существенной роли. Эти теги можно не использовать, если вы не работаете с Instant Article page.

Как уже было сказано, эти теги сильно зависят от типа контента. Если тип контента video.movie, лучше всего подойдут теги video:actor, video:director и video:duration, а не articles:published_date.

Эту часть Open Graph я отдам на самообучение. На Facebook есть множество материалов по этим мета тегам, а также пара примеров с кодом.

Заключение

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

Если ваш контент отрисовывается не так, как вы ожидали, воспользуйтесь Facebook Sharing Debugger для поиска ошибок разметки.

Автор: Louie Rootfield

Источник: https://webdesign.tutsplus.com/

Редакция: Команда webformyself.

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Современные тенденции веб-разработки

За ближайшие 5 дней мы составим ваш пошаговый алгоритм профессионального роста с нуля в сайтостроении...

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree