Микроразметка open graph

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

• og:audio — URL звукового файла, который относится к описываемому объекту.
• og:description — краткое описание объекта.
• 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://example.com/bond/theme.mp3" />
<meta property="og:description" content="Sean Connery found fame and fortune as the suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<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://example.com/bond/trailer.swf" />

Добавляем разметку с помощью плагинов

Плагин All in One SEO Pack

Этим плагином пользуюсь я на своем блоге. Его можно скачать здесь. Он позволяет сразу оптимизировать блог для поисковиков и для Facebook. Я остановился на этом плагине, потому что мне надо оптимизировать не только статьи блога, но и отдельные страницы видеокурса «Фан-страница: запуск». Если оптимизировать и статьи, и страницы блога вручную, это занимает время и требует навыков работы с PHP. Но благодаря тому, что плагин All in One SEO Pack позволяет настроить картинку, заголовок и описание для каждой статьи и для каждой страницы отдельно, я могу полностью контролировать информацию и для поисковиков, и для Facebook.

Настройка этого плагина стандарта. Скачиваете его на компьютер, устанавливаете себе на блог (Плагины -> Добавить новый -> Загрузить), нажимаете «Активировать». Затем заходите в «Параметры» -> «All in One SEO Pack» и заполняете поля «Заголовок сайта», «Краткое описание», «Адрес WordPress (URL)», «Адрес сайта (URL)» — это стандартные настройки плагина. Затем обязательно внизу нажимаете кнопку «Сохранить»

Самое важное для нас — в настройках само́й статьи или страницы блога. Выглядят эти настройки вот так:
Если вы добавили новую страницу на блог, то для неё появится поле загрузки картинки чуть выше, чем поле «Title»

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

Плагин Facebook Open Graph Meta

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

В панели управления слева заходите в «Настройки» -> «Facebook Open Graph». Вверху появится такая форма:
Первое поле «App Id» можете пропустить. Во второе поле «Admins» вставьте ваш личный id на Fаcebook. Чтобы узнать свой id, зайдите к себе в профиль и в адресной строке замените «www» на «graph». Например, в моём случае:

надо заменить

на

Скопируйте id и вставьте его в поле «Admins» плагина. Затем в третье поле «Image Url» вставьте ссылку на картинку, которая будет отображаться по умолчанию на тот случай, если в какой-то статье блога не будет изображений или если это главная страница блога, или любая другая страница (не статья).

После этих действий нажимаете серую кнопку «Save» (Сохранить). Плагин почти готов к работе.

Зачем плагину нужен ваш id Facebook? Чтобы подключить статистику Facebook к вашему блогу, которая будет доступна в вашем аккаунте по этому адресу . Благодаря этой статистике, вы увидите данные по всем Facebook-плагинам, установленным на вашем блоге: кто нажимал, сколько раз, когда, где чаще/реже и другие важные данные. Подробно о том, как пользоваться этой статистикой я рассказал в своём платном видеокурсе «Фан-страницы: результат за 27 дней».

Последний важный шаг. Вам необходимо вручную заменить тег <html> в файле header.php на этот код:

В противном случае ваш блог может не понять метатеги Facebook. Чтобы отредактировать файл header.php, в панели управления слева зайдите во «Внешний вид» -> «Редактор» и справа найдите и нажмите на ссылку «Заголовок (header.php)». В самом верху кода вы увидите тег <html> (на скриншоте ниже), который надо заменить и сохранить изменения.

После этих действий плагин полностью готов к работе. Проверьте его действие, зайдя у себя в любую статью и нажав «Мне нравится». Потом посмотрите, какая информация появилась на вашей стене в Facebook.

Типы

Следующие типы используются при определении атрибутов в протоколе Open Graph.

Тип	Описание	Литерал
	Представляет логическое значение true или false	true, false, 1, 0
	DateTime представляет собой временное значение, состоящее из даты (Год, месяц, день) и дополнительного компонента времени (часов, минут)	ISO 8601
	Типа, состоящий из ограниченного множества постоянных строковых значений (перечисление членов).	Строковое значение, которое является членом перечисления
	64-разрядное число с плавающей точкой	Все литералы, которые соответствуют следующим форматам:1.234-1.2341.2e3-1.2e37E-10
	32-разрядное целое число с плавающей запятой. Во многих языках целое число, по сравнению с 32-бит, становятся числом с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобного использования нескольких языков.	Все литералы, которые соответствуют следующим форматам:1234-123
	Последовательность Unistrong символов	Все литералы состоят из символов Unistrong без каких-либо символов Escape-Последовательности
	Последовательность Unistrong символов, которые идентифицируют Интернет-ресурс.	Все допустимые URL-адреса, которые используют протокол http:// или https://

Можешь почитать и вот эту статейку «Переехал на UTF-8»

ПредыдущаяСледующая

Types

The following is a list of the possible values for og:type

• band
• government
• non_profit

• school
• university

Products and Entertainment

• album
• book
• drink
• food
• game
• movie
• product
• song
• tv_show

For products which have a UPC code or ISBN number, you can specify them using the og:upc and og:isbn properties. These properties help to make more concrete connections between graphs.

Websites

• article
• blog
• website

Use article for any URL that represents transient content — such as a news article, blog post, photo, video, etc. Do not use website for this purpose. website and blog are designed to represent an entire site, an og:type tag with types website or blog should usually only appear on the root of a domain.

If your object does not fit into one of the types above, you can specify your own type. This will be represented as type other on Facebook. We will monitor the most commonly used types and graduate them to fully supported og:types. If you are specifying your own type we recommend that you use your own namespace. For example if you are moviesite.com, and you want to mark a URL on your site as a director you would do:

<html xmlns:moviesite="http://www.moviesite.com/ns#" > 
<head>
....
    <meta property="og:type" content="moviesite:director">

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

Полная документация по разметке Open Graph доступна в нескольких источниках:

• ogp.me — англоязычная документация;
• ruogp.me — документация на русском языке.

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

Также есть руководства по применению Open Graph для отдельных соцсетей:

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

Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.

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

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

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

В других соцсетях картинка будет обрезаться в соответствии с параметрами соцсети. И это нужно учитывать — не размещать в «критичных» областях картинки текст или важные части изображения.

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

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

Помимо обязательных есть опциональные свойства, которые, тем не менее, рекомендуем заполнять:

Вот так description отображается в публикациях в Фейсбуке:

А так — в Телеграме:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

Introduction

The Open Graph protocol enables any web page to become a
rich object in a social graph. For instance, this is used on Facebook to allow
any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined
together, there isn’t a single technology which provides enough information to
richly represent any web page within the social graph. The Open Graph protocol
builds on these existing technologies and gives developers one thing to
implement. Developer simplicity is a key goal of the Open Graph protocol which
has informed many of the technical design decisions.

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

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

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

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

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

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

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

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

Это значительно облегчает интеграции OG даже для неопытных пользователей.

Аналоги Open Graph

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

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

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

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

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

Массивы

Если тег может иметь несколько значений, просто поставьте несколько таких тегов <meta> на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.

Код:

<meta property="og:image" content="http://example.com/rock.jpg" /><meta property="og:image" content="http://example.com/rock2.jpg" />

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

Пример:

Код:

<meta property="og:image" content="http://example.com/rock.jpg" /><meta property="og:image:width" content="300" /><meta property="og:image:height" content="300" /><meta property="og:image" content="http://example.com/rock2.jpg" /><meta property="og:image" content="http://example.com/rock3.jpg" /><meta property="og:image:height" content="1000" />

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер 300x300px, второе изображением не имеет указанных размеров и третье изображением имеет размеры 1000px в высоту.

Images in open graph

While adding your image as should often be enough, sometimes it can be challenging to get your image to show up correctly. If you seem to be running into trouble, the open graph standard includes a few image tags such as vs as well as the and .

Try to make sure you’re following all of the . Additionally, some of the social networks have image requirements. Twitter for instance requires a ratio of 2:1 with a minimum size of 300×157 and a maximum size of 4096×4096 that’s under 5MB and of JPG, PNG, WEBP or GIF format.

If you’re stuck, test your tags using the social media network’s tools to see if you can find the issue.

Основные теги протокола Open Graph

Разметкой предусмотрено много свойств (тегов). Основные:

1. og:title — заголовок, который характеризует страницу и отображается внешне.

1. og:type — тип основного содержимого страницы. Например:

• видео: <meta property=’og:type’ content=»video.movie» />;
• музыка: <meta property=’og:type’ content=»music.song» />;
• статья: <meta property=’og:type’ content=»article» />.

1. og:image — URL изображения, которое отобразится в предпоказе.

og:url — канонический URL веб-страницы. Он используется как идентификатор объекта (веб-страницы). Например:

<meta property=»og:url» content=»http://www.site.ru/example/» />

Пример кода, если задействовать только основные свойства:

Рассмотрим не основные, но важные и полезные теги при продвижении:

1. og:site_name — задает имя сайта, которое отображается в предпоказе.

1. og:description — описание страницы (элемент подгружается не всегда. Иногда, к примеру, Facebook может не показывать описание в превью).

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

Как сделать микроразметку статьи?

Рассмотрим примеры применения микроразметки schema.org и Open Graph. Тут есть некоторое различие. В первом случае вся разметка прописывается рядом с телом статьи. При передаче же информации в соцсети описывается как должна выглядеть ссылка на страницу статьи.

Разметка с schema.org

Рассмотрим, как с помощью schema.org можно сделать микроразметку статьи.

Сначала посмотрим, как статья выглядит в HTML без разметки

А теперь этот пример с разметкой

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

itemscope itemtype=”http://schema.org/Article” id=”main”.

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

• headline – наименование статьи;
• datePublished – дата публикации в формате ISO 8601;
• image – картинка;
• articleBody – тело статьи;
• author – имя автора;
• publisher – наименование сайта, публикующего статью.

Есть еще необязательные параметры, которые все же желательно указывать:

• dateModified – дата изменения статьи;
• mainEntityOfPage – ссылка на страницу со статьей.

В теге publisher использованы следующие параметры:

• logo — логотип;
• name — наименование организации;
• telephone – телефон;
• address — адрес.

Если статью публикует не организация, а частное лицо, то все равно publisher нужно заполнить, так как параметр обязателен. Иначе Гугл будет ругаться при проверке. Замена Organization на Person не поможет. Можно сознательно не заполнять этот блок и игнорировать предупреждение.

Разметка с Open Graph

Микроразметку Open Graph нужно разместить внутри тегов <html> и <head>.

В блоке <html> указываем роботу на использование разметки Open Graph.

<html xmlns:fb=”http://ogp.me/ns/fb#”>

Все остальное размещается внутри <head>

<meta property="og:title" content="Создание микроразметки статьи ">
<meta property="og:type" content="article">
<meta property="og:description" content=" В этом материале познакомимся с таким важным видом семантической разметки как микроразметка статьи.">
<meta property="og:url" content="http://nashsite.com/microrazmetka ">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content=" http://nashsite.com/imgrazmetka.jpg ">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">
<meta property="og: article:published_time" content="2019-01-22T16:20:30+00:00">
<meta property="og: article:modified_time" content="2019-01-22T17:30:40+00:00">
<meta property="og: article: author" content="Михаил Степанов">

Выглядит здесь все проще, чем с schema.org. Вот что значат использованные теги:

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

Тег article использовать несложно:

• og:article:published_time – дата публикации статьи;
• og:article:modified_time – дата последнего изменения;
• og:article:author – автор статьи.

Как внедрять Open Graph

Вручную

Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:

Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.

С помощью плагинов

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

По ссылкам ниже можно найти плагины для вашей CMS:

• WordPress.
• Joomla.
• Битрикс.
• Opencart.
• Drupal.
• .

А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.

Пример внедрения Open Graph на WordPress

Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.

Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.

После активации перейдите в модуль «Социальные мета» в меню плагина:

Укажите настройки:

• главной страницы;
• изображений;
• типов данных;
• укажите отдельные настройки для Twitter.

Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».

Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.

Вот вид размеченной ссылки в ленте Facebook:

Примерно по такому же принципу работают другие плагины.

Подытожим: все еще есть над чем работать

Понимание того, как выглядит средняя веб-страница, дает представление о текущих тенденциях. И тут же возникают вопросы.

Почему вебмастера редко прописывают alt для изображений? Почему заголовки h1 есть только на 60% страниц? Почему title и description заполняют далеко не все? Почему не спешат внедрять микроразметку JSON-LD? А ведь это базовое SEO…

Хочется сказать, что все это неважно — все-таки анализировались страницы из ТОП-20 Google. То есть Google считает их в общей массе авторитетными — даже без «альтов»

Но не забываем, что SEO — это комплекс факторов. Мы рассмотрели лишь малый технический аспект. Даже если взять только оптимизацию сайта, то там более 60 разных работ. А еще ссылки, упоминания, локализация, поведенческие факторы…

Социальная сеть ВКонтакте не берет краткое описание (description)

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

Чтоб понять причину подобного явления я решил задать вопрос в службу поддержки, на что получил вполне доходчивый ответ:

Получается ВКонтакте намеренно перестал брать краткое описание в свой сниппет еще с осени 2016 года. Жаль конечно, но что поделаешь. Так что если вы заметили подобную проблему знайте что это не ваша вина, а некие запреты со стороны социальной сети.

В заключение хочу отметить, что кроме протокола Open Graph существует множество других форматов микроразметки, в частности Schema.org, о которой мы говорили в статье «Микроразметка Schema.org для материалов Joomla 3».

Массивы

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

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

Укажите структурированные метатеги после основного метатега.

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

где разметка означает, что на странице размещены 3 изображения: первое имеет размер 300×300, для второго изображения размер не указан, третье — 1000 пикселей в высоту.

Robots

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

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

| Значение | Описание |
| ————— | ————- |програмного
| | По умолчанию. Эквивалентен значению . Позволяет роботу индексировать страницу. |
| | Запрещает роботу индексировать страницу. |
| | Запрещает роботу переходить по ссылкам со страницы |
| | Позволяет роботу переходить по ссылкам со страницы |
| | Эквивалетно значению |
| | Запрещает поисковой системе кэшировать содержимое страницы. |
| | Эквивалетно значению для Bing |
| | Запрещает показывать фрагменты этой страницы в результатах поиска. |
| | Запрещает использование Open Directory Project описания, если таковые имеются, как описание страницы на странице результатов поиска |
| | Запрещает переводы этой страницы в результатах поиска. |
| | Запрещает индексировать изображения на странице |
| | Запрещает показывать эту страницу в результатах поиска после указанной даты/времени. Дата/время должны быть указаны в формате RFC 850. |

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

Introduction

The Open Graph protocol enables any web page to become a
rich object in a social graph. For instance, this is used on Facebook to allow
any web page to have the same functionality as any other object on Facebook.

While many different technologies and schemas exist and could be combined
together, there isn’t a single technology which provides enough information to
richly represent any web page within the social graph. The Open Graph protocol
builds on these existing technologies and gives developers one thing to
implement. Developer simplicity is a key goal of the Open Graph protocol which
has informed many of the technical design decisions.

Проблемы с повторяющимися тегами Open Graph

Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.

В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.

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

Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:

На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.

Syntax

Return the name property:

metaObject.name

Set the name property:

metaObject.name = «application-name|author|description|generator|keywords»

Value	Description
application-name	Specifies the name of the Web application that the page represents
author	Specifies the name of the author of the document. Example: <meta name=»author» content=»Hege Refsnes»>
description	Specifies a description of the page. Search engines can pick up this description to show with the results of searches. Example: <meta name=»description» content=»Free web tutorials»>
generator	Specifies one of the software packages used to generate the document (not used on hand-authored pages) Example: <meta name=»generator» content=»FrontPage 4.0″>
keywords	Specifies a comma-separated list of keywords — relevant to the page (Informs search engines what the page is about).Tip: Always specify keywords (needed by search engines to catalogize the page). Example: <meta name=»keywords» content=»HTML, meta tag, tag reference»>

Внедрение протокола 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;} //Описание публикации