The open graph protocol

Open Graph плагин WordPress

Можно использовать специальные, отдельные модули Open Graph в WordPress. Смотрите на этой странице wordpress.org. Или введите в поиск по плагинам, в админ-панели, метку open graph и оп-ля. Выбирайте подходящий вам, ориентируйтесь по количеству установок (популярность) и как часто обновляются:

Результаты по запросу: open graph

Использование Open Graph плагина WordPress, чтобы добавить микроданные для социальных сетей на сайт, самый безопасный и правильный метод. Установка без плагина — только для опытных пользователей. Поэтому, друзья, я не советую начинающим использовать различные коды разметки соцсетей найденные в интернете. Не рискуйте.

В заключение

Добавление метаданных Facebook Open Graph в WordPress — один из хороших способов привлечь больше посетителей/читателей на ваш веб-ресурс.

Если пост выглядит плохо, шансы на это уменьшаются. Поэтому используйте микроданные для социальных сетей и будьте уверены, что ссылки на ваш сайт будут выглядеть супер привлекательно в любой social networks.

Расшаривание записью в социальные сети (ваши или пользовательские) могут дать дополнительный трафик на сайт WP. Главное: в соц-сетях важна визуальная привлекательность контента

И только так можно привлечь внимание пользователей при просмотре ленты новостей

Внедрение протокола Open Graph в Joomla 3

Как всегда самым простым вариантом в решение данной, если можно так сказать, проблемы будет использование специальных плагинов (Easy Open Graph, Phoca Open Graph, Open Graph Tags, Global Open Graph). Но если честно ни один из множества плагинов, которые я тестировал, меня не впечатлили, поэтому я решил делать все самостоятельно, чего и Вам советую.

Как добавить данные в блок head документа Joomla 3? В этом нам поможет стандартный класс JDocument, при помощи которого мы сможем внедрить в блок head документа все что угодно. Чтобы не ходить вокруг да около, давайте сразу рассмотрим код, который необходимо добавить в файл отвечающий макет статьи /components/com_content/views/article/tmpl/default.php, но предварительно я советую вам создать переопределение (скопировать данный файл в папку /templates/имя_шаблона/html/com_content/article). Более подробная информация об этом содержится в статье «Переопределение в Joomla 3».

//Протокол Open Graph
$document =& JFactory :: getDocument();
if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации
$document -> addCustomTag( '
<meta property="og:title" content="'.$this -> escape($this -> item -> title).'" />
<meta property="og:description" content="'.$desc.'" />
<meta property="og:type" content="article" />
<meta property="og:url" content="'.JURI :: current().'" />
<meta property="og:image" content="http://joom4all.ru/'.$images -> image_fulltext.'" />
<meta property="article:published_time" content="'.$this->item->created.'" />
<meta property="article:modified_time" content="'.$this->item->modified.'" />
<meta property="fb:app_id" content="140756266603425" />
');

Код не сложный, изначально мы объявляем, что будем использовать класс JDocument, а затем при помощи метода addCustomTag мы можем добавлять что угодно в секцию head документа, в нашем случае это будут метатеги Open Graph.

Хочу обратить отдельное внимание на то, как формируется описание публикации, тут мы при помощи определенного условия проверяем наличие текста в метатеге description , если его нет, тогда в качестве краткого описания страницы будет использован вступительный текст материала. За это отвечает следующая строчка кода:

if($this->item->metadesc == "") {$desc = strip_tags($this->item->introtext);} else {$desc = $this->item->metadesc;} //Описание публикации

Основные метатеги

В стандарте Open Graph одна страница описывает только один объект — человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head) добавить следующие обязательные метатеги:

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

<meta property="og:title" content="Мэрилин Монро"/>
<meta property="og:description" content="Американская киноактриса и певица"/>
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Marilyn_Monroe_-_publicity.JPG/210px-Marilyn_Monroe_-_publicity.JPG">
<meta property="og:type" content="profile"/>
<meta property="og:url" content= "https://ru.wikipedia.org/wiki/Мэрилин_Монро" />

Мета-теги для картинок сайта:

Тег alt предназначен для того, чтобы быть альтернативным источником информации для тех, кто отключает показ изображений в своих броузерах. Без текста в теге alt изображение будет показано как пустое изображение. Google подтвердил, что он главным образом при поиске сосредотачивается на тексте в теге alt, пытаясь понять, что изображено на рисунке. У поисковой системы Яндекс есть поиск по картинкам, который выводится одновременно с результатами основного поиска. Название изображения — title — должно предоставить посетителю дополнительную информацию. В броузерах это название всплывает, когда вы наводите мышку на изображение. Включайте в эти теги главные ключевые слова, но делайте их разными.

alt="описание картинки"
title="всплывающее описание картинки"

код картинки дожен выглядеть следующим образом:
<img src="ссылка на картинку" alt="описание картинки" title="всплывающее описание картинки">

Why was Open Graph created?

Facebook introduced Open Graph in 2010. It promotes integration between Facebook and other websites by allowing them to become rich “graph” objects with the same functionality as other Facebook objects.

Put simply, a degree of control is possible over how information travels from a third-party website to Facebook when a page is shared (or liked, etc.). In order to make this possible, information is sent via Open Graph meta tags in the <head> part of the website’s code.

Now, other social media sites also are taking advantage of social meta tags. All of the other major platforms, , LinkedIn, and , recognize Open Graph tags. Twitter actually has its own meta tags for Twitter Cards, but if Twitter robots cannot find any, Twitter uses Open Graph tags instead.

Object Types

In order for your object to be represented within the graph, you need to
specify its type. This is done using the property:

When the community agrees on the schema for a type, it is added to the list
of global types. All other objects in the type system are
CURIEs of the form

The global types are grouped into verticals. Each vertical has its
own namespace. The values for a namespace are always prefixed with
the namespace and then a period.
This is to reduce confusion with user-defined namespaced types which always
have colons in them.

Namespace URI: https://ogp.me/ns/music#

values:

• — >=1 — The song’s length in seconds.
• — —
  The album this song is from.
• — >=1 —
  Which disc of the album this song is on.
• — >=1 —
  Which track this song is.
• — —
  The musician that made this song.

• — — The song on this album.
• — >=1 —
  The same as but in reverse.
• — >=1 —
  The same as but in reverse.
• — —
  The musician that made this song.
• — —
  The date the album was released.

• — Identical to the ones on
• — — The creator of this playlist.

music:creator — profile — The creator of this station.

Namespace URI: https://ogp.me/ns/video#

values:

• — —
  Actors in the movie.
• — — The role they played.
• — —
  Directors of the movie.
• — —
  Writers of the movie.
• — >=1 —
  The movie’s length in seconds.
• — —
  The date the movie was released.
• — —
  Tag words associated with this movie.

• — Identical to
• — —
  Which series this episode belongs to.

A multi-episode TV show.
The metadata is identical to .

A video that doesn’t belong in any other category.
The metadata is identical to .

These are globally defined objects that just don’t fit into a vertical but
yet are broadly used and agreed upon.

values:

— Namespace URI:

• — —
  When the article was first published.
• — —
  When the article was last changed.
• — —
  When the article is out of date after.
• — —
  Writers of the article.
• — — A high-level section name. E.g. Technology
• — —
  Tag words associated with this article.

— Namespace URI:

• — — Who wrote this book.
• — —
  The ISBN
• — — The date the book was released.
• — —
  Tag words associated with this book.

— Namespace URI:

• — — A name normally given to an individual by a parent or self-chosen.
• — — A name inherited from a family or marriage and by which the individual is commonly known.
• — — A short unique string to identify them.
• — (male, female) — Their gender.

— Namespace URI:

No additional properties other than the basic ones.
Any non-marked up webpage should be treated as website.

Implementations

The open source community has developed a number of parsers and publishing
tools. Let the Facebook group know if you’ve built something awesome too!

• Facebook Object Debugger —
  Facebook’s official parser and debugger
• Google Rich Snippets Testing Tool — Open Graph protocol support in specific verticals and Search Engines.
• PHP Validator and Markup Generator — OGP 2011 input validator and markup generator in PHP5 objects
• PHP Consumer —
  a small library for accessing of Open Graph Protocol data in PHP
• —
  a simple parser for PHP
• PyOpenGraph —
  a library written in Python for parsing Open Graph protocol
  information from web sites
• OpenGraph Ruby —
  Ruby Gem which parses web pages and extracts Open Graph protocol markup
• OpenGraph for Java —
  small Java class used to represent the Open Graph protocol
• RDF::RDFa::Parser —
  Perl RDFa parser which understands the Open Graph protocol
• WordPress plugin —
  Facebook’s official WordPress plugin, which adds Open Graph metadata to WordPress powered sites.
• Alternate WordPress OGP plugin —
  A simple lightweight WordPress plugin which adds Open Graph metadata to WordPress powered sites.

Написание скрипта для генерации изображения

Скрипт будем писать на php. Так как он генерирует картинку с пользовательским текстом, мы реализуем поддержку параметров, переданных в ссылке. Создаём в директории og-image-files файл og-image.php и открываем его. Весь код, написанный на php нужно заключить в тег <?php … >. Первым делом опишем функцию, которая откроет фоновое изображение. Пробуем открыть изображение и вернуть его. Если не удалось — создаём пустое белое и выводим сообщение об ошибке на нём.

Функция загрузки изображения

Следом опишем другую функцию: она будет помещать текст на картинку, автоматически расставляя переносы строки. Она принимает картинку, размер текста, угол наклона, отступ слева и сверху, цвет текста, шрифт, сам текст и максимальную ширину. Внутри строка делится на массив слов, считаются все необходимые значения ширины текста, а затем в цикле for элементы массива помещаются на изображение.

Функция загрузки изображения

Теперь основная часть: так как при переходе на страницу со скриптом должна отображаться исключительно картинка формата png, указываем Content-Type как image/png. Затем читаем изображение и получаем первый параметр social_network — он пригодится, если вы хотите в зависимости от социальной сети вставлять разные фоновые изображения. Загружаем картинку и получаем второй параметр — text. Все пробелы будут переформатированы в «%20», поэтому методом str_replace возвращаем всё обратно. Время чтения — параметр time_for_read, а time_ending — слово, которое нужно подставить после числа минут. Далее загружаем нужные шрифты.

Так как параметры принимаются через ссылку, в теории, туда можно передать любой SQL-запрос — это называется SQL-инъекцией. Такую брешь можно устранить, если все числовые переменные ещё раз перевести в числовые типы данных, а в строках экранировать кавычки: для этого есть функция mysql_escape_string(). А ещё в строку могут передать HTML-теги — для удаления тегов можно воспользоваться функцией strip_tags().

Функция mysql_escape_string() ещё работает в php5, но была удалена в php7. Подробнее об альтернативах можно почитать в документации

Задаём нужные цвета для текста и подставляем текст на изображение. Функцией imagepng выводим изображение, а затем его удаляем для освобождения памяти.

После размещения скрипта на сайте можно сразу протестировать его работу: так как наш лежит на сайте leftjoin.ru в директории og-image-files, можно пройти по ссылке leftjoin.ru/og-image-files/og-image.php и увидеть следующее изображение:

Оно пустое, так как мы не передали параметров. Они передаются непосредственно в ссылку. Например, передача текста и наименования социальной сети выглядит так:

Что такое мета-теги?

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

Такие теги могут нести в себе описание страницы (например, ключевые слова и само описание), информацию об авторских правах или самом авторе, указания браузеру на какие-то внешние или внутренние механизмы обработки страницы и даже команды браузеру, а также правила «поведения» для поисковых систем.

Нужно заметить, что правильное написание («мета-теги» или «метатеги») нигде не регламентировано, а следовательно, здесь вы можете шалить как душе угодно. На википедии оперируют метатегами и мета-тегами наравне. Но не будем о грустном мира сего, пойдём дальше.

Сразу же нужно уяснить, что не всякий тег имеет приставку мета. Мета-тегом он будет называться, если находится между тегами и его содержимое как-то соотносится с тем, что умеет браузер.

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

На самом деле так же дела обстоят и с другими тегами. Недавно перешедшая в статус официальной рекомендации спецификация HTML5, содержит в себе реинкарнацию элемента dialog, который до сих пор поддерживается только Chrome и Opera. Однако, это не значит, что в других браузерах этот элемент и его содержимое будет игнорироваться вовсе — он просто будет обычным тегом, например, таким, как . Разумеется, что и доступное для него API (по спецификации) в таком браузере не будет реализовано, хотя в DOM такой элемент будет, и его содержимое будет отображаться на странице.

Basic Metadata

To turn your web pages into graph objects, you need to add basic metadata to
your page. We’ve based the initial version of the protocol on
RDFa which means that you’ll place
additional tags in the of your web page. The four required
properties for every page are:

• — The title of your object as it should appear within the graph,
  e.g., «The Rock».
• — The of your object, e.g., «video.movie». Depending on
  the type you specify, other properties may also be required.
• — An image URL which should represent your object within the
  graph.
• — The canonical URL of your object that will be used as its
  permanent ID in the graph, e.g., «https://www.imdb.com/title/tt0117500/».

As an example, the following is the Open Graph protocol markup for The Rock on
IMDB:

The following properties are optional for any object and are generally
recommended:

• — A URL to an audio file to accompany this object.
• — A one to two sentence description of your object.
• — The word that appears before this object’s title
  in a sentence. An of (a, an, the, «», auto). If is
  chosen, the consumer of your data should chose between «a» or «an».
  Default is «» (blank).
• — The locale these tags are marked up in.
  Of the format . Default is .
• — An of other locales this page is
  available in.
• — If your object is part of a larger web site, the name which
  should be displayed for the overall site. e.g., «IMDb».
• — A URL to a video file that complements this object.

For example (line-break solely for display purposes):

The RDF schema (in Turtle)
can be found at ogp.me/ns.

Особенности внедрения OG на сайт

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

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

Кроме того проверку микроразметки ОпенГраф умеет делать валидатор Yandex.

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

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

What happens if I don’t have it?

Most social networks by default will try to make their best effort in creating a preview of your content. This more often than not doesn’t go so well.

Take for instance my website colbyfayock.com.

Example of a simple Twitter Card

It correctly grabs the title of my page and the description, but it’s not the most enticing looking tweet in a feed.

Contrast that to the preview of a single post and we see a different story.

Example of a Twitter Card with a large image

So what happens if you don’t have open graph tags? Nothing bad will happen, but you won’t be taking advantage of some of the features that help make your content stand out next to the loads of other content getting posted on the internet.

Twitter and other social media networks using open graph

Most of the social networks adhere to the basics of open graph standards, but a few of them also include their own extension to help customize the look and feel within their ecosystem.

Twitter for instance, allows you to specify , which is the type of “card” you can use when they show your website. At this time, their card types include:

• summary
• summary_large_image
• app
• player

This will help you choose how your links are used in their feed. If you choose for instance, Twitter will show your links with big high resolution images as long as you’re providing it in the in the tag.

Here are some quick references to the documentation of how to use open graph tags with some of the social media sites:

• Twitter:
• Facebook:
• Pinterest: ?
• LinkedIn: https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en

Что такое Open Graph и зачем он нужен?

На многих страницах сайта мы видим кнопки для соцсетей. При нажатии на них происходит репост анонса страницы сайта. При этом сниппет с этим анонсом формируется по правилам той соцсети, где происходит репост. То есть текст и картинка в анонс попадают автоматически со страницы сайта. Очень часто это бывает не самый понятный текст и не самая удачная картинка. В сниппет может попасть даже рекламный баннер, который в это время оказался на странице, совершенно далекий от темы статьи. Если «социальному» роботу попалась даже подходящая картинка, она может быть изуродована до неузнаваемости подгонкой под формат соцсети всякими обрезаниями и сжатиями.

Для того, чтобы анонс страницы выглядел информативно и привлекательно, чтобы на него хотелось кликнуть, а не скорее пролистнуть, и придумали специальные правила. Это – микроразметка для социальных сетей. Теперь вебмастер может определять вид анонса страницы сайта в соцсетях. Он указывает какой брать текст, изображение и анкор ссылки для сниппета.

Open Graph (OG)– это специальный словарь семантической разметки, который в свое время был разработан для Facebook. Сейчас этот словарь понимают и остальные соцсети – ВКонтакте, Twitter, Одноклассники, Pinterest и другие. Протокол Open Graph также поддерживают поисковики, в том числе Гугл и Яндекс. Наряду с schema.org это самый распространенный словарь для микроразметки.

Синтаксис разметки

Open Graph базируется на синтаксисе RDFa, где в <head> прописываются мета-теги. Внутри <meta> прописывают атрибуты property и content.

Полную информацию по настройке разметки можно найти на сайтах ogp.me, ruogp.me и в справке Яндекс.Вебмастер.

Обязательные свойства

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

• og:url – ссылка на сайт, которая добавляется в социальную сеть. В ней не должно быть лишнего и она должна отсылать на главную страницу сайта.
• og:type – вид страницы. Здесь указывается вид предоставляемой информации, например «Статья».
• og:title – заголовок страницы. Указывают название документа или страницы.
• og:image – ссылка на страницу с изображением. Без картинки сделать репост невозможно. Минимальные требования к размеру: Вконтакте — 160х160 пикселей, Facebook – 600х315 пикселей. Если подойдет только одно изображение, то оно само станет нужных размеров, если нет — отобразится серый квадрат. Изображения в разном размере можно указывать с помощью тегов с названием соцсетей (vk:image, fb:image, twitter:image). Они будут обрабатываться в первую очередь.

Опциональные свойства

Помимо основных свойств, есть еще и опциональные (дополнительные). Они не обязательны, но улучшают визуальное оформление разметки. Например:

• og:description – краткое описание текста. Здесь указывают анонс той информации, которую пользователь в итоге получит. Соцсеть не всегда его выводит. Будет показано примерно 60 символов и многоточие. 
• og:site_name – раздел с названием сайта и краткой информацией о нем.
• og:video – ссылка на страницу с видео и др.

Структурированные метатеги

Мета-теги – часть кода страницы, заключенная между <head>…</head>. Мета-теги OG — это совокупность обязательных и опциональных свойств. В структуре кода они выглядят так.

Website open graph type

The open graph protocol has a few variations of the “type” of website it supports. This includes types like website, article, or video.

When setting up your open graph tags, you’ll want to have an idea of which type will make more sense for your website. If your page is focused on a single video, it probably makes sense to use the type “video”. If it’s a general website with no specific vertical, you would probably just want to use the type “website”.

Similar to the others, this is unique for each page. So if your homepage is «website,” you could always have another page of type “video”.

So if I were to create an open graph type for my website, it might look like the following on my homepage:

When navigating to a blog post, it would look like:

You can find the most common open graph website types on the open graph webpage:

Как подключить Open Graph к WordPress

Для WordPress традиционно существует два способа подключения: с помощью плагина и ручное подключение с помощью фильтров и экшенов.

Подключение Open Graph к WordPress с помощью плагина

Для подключения Open Graph к WordPress существуют специальные плагины:

• WP Facebook Open Graph protocol;
• Open Graph.

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

Самые популярные:

• Yoast SEO — рекомендую;
• All in One SEO Pack.

Иногда поддержка Open Graph имеется прямо в теме WordPress, особенно это касается премиум-тем. Поэтому, перед стартом работ по SMO, нужно открыть HTML-код сайта и проверить его на наличие метатегов Open Graph. Их можно определить по характерному свойству (property) — «OG:».

Подключение Open Graph к WordPress без плагинов

Код размещаем в файле функций активной темы (functions.php) или в функциональном плагине, в который вы выносите весь функционал, чтобы не потерять его при смене темы.

В результате на страницах всех записей будут выводиться основные метаданные Open Graph:

• og:title;
• og:type;
• og:url;
• og:site_name;
• og:image.

А также fb:admins, в котором нужно указать ваш Facebook ID. Есть несколько способов определения своего ID, самый простой — навести курсор мыши на вашу аватарку Facebook, в системной строке браузера увидим fbid. Это и есть Facebook ID.

Отдельно стоит остановиться на og:image. В качестве изображения будет установлена миниатюра текущей записи. В случае ее отсутствия будет выводиться дефолтное изображение, ссылку на которое задается в переменной $default_image.