Какие html-элементы более востребованы: анализ 8 млн страниц с позиции seo

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

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

Плагин 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.

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.

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”/>

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

Вид Твиттер карт:

Вот так круто выглядит Rich Pin:

Основные Метаданные

Что бы превратить вашу web-страницу в графические объекты, вам нужно добавить базовые метаданные к вашей странице. Мы основываемся на первоначальной версии протоколаRDFa это означает что вы будите размещать дополнительные <meta> теги в <head> вашей web-странице. Четыре основных свойства для каждой страницы:

• og:title — Название вашего объекта, как он должен отображаться в графе, например фильм, «The Rock».
• og:type — , например, «video.movie». В зависимости от типа, можно задать другие свойства которые могут быть необходимы.
• og:image — URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
• og:url — Канонический URL-адрес объекта, который будет использоваться в качестве егопостоянного ID в графе, например, «http://www.imdb.com/title/tt0117500/».

В качестве примера ниже приводится разметка протокола Open Graph для фильма «The Rock» на IMDB:

Код:

<html prefix="og: http://ogp.me/ns#"><head><title>The Rock (1996)</title><meta property="og:title" content="The Rock" /><meta property="og:type" content="video.movie" /><meta property="og:url" content="http://www.imdb.com/title/tt0117500/" /><meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />...</head>...</html>

Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:

• og:audio — URL-адрес звукового файла, который сопутствует этому объекту.
• og:description — Одно-два предложения описания вашего объекта.
• og:determiner — Слово, которое появляется перед названием этого объекта в предложении. Тип (a, an, the, «», auto). Если выбрано auto, потребитель данных должен выбирать между «a» или «an». По умолчанию — » » (пусто).
• og:locale — Тег локации.Формат language_TERRITORY. По умолчанию en_US.
• og:locale:alternate — Тип других локалей на этой странице.
• og:site_name — Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Например, «IMDb».
• og:video — URL-адрес видео-файла, который сопутствует этому объекту.

Например (line-break исключительно в демонстрационных целях):

Код:

<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" />

Схему RDF (в Turtle) можно найти на ogp.me/ns.

Аналоги Open Graph

Помимо OpenGraph, также есть Schema.org

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

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

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

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.

Robots

HTML пример

Или же:

Что он делает?

Мета-теги “robots” всем поисковым ботам (роботам) или определенным ботам-обходчикам («googlebot», «bingbot», «duckduckbot» и т. д.), как обрабатывать страницу. Обычно это связано с тем, как должна быть проиндексирована страница.

Действительно ли он необходим?

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

Есть несколько причин, по которым вы могли бы заставить поисковые системы действовать иначе:

• noindex: используйте этот тег, если вы хотите скрыть страницу от поиска. (Не полагайтесь на это в целях безопасности. Помните, это всего лишь техническое решение.)
• nofollow: это полезно для блогов, которые принимают контент от авторов, но не проверяют его. Таким образом, если партнерские ссылки будут размещены на странице, Google не будет следовать им.
• nosnippet или max-snippet: управляет отображением вашего текста, изображения или фрагмента видео в поиске.
• noarchive: если существуют более старые кэшированные версии страницы, используйте этот тег, чтобы запретить поисковым системам показывать их.
• unavailable_after:: это хороший вариант для ограниченного продвижения, например, в период продаж в Черную пятницу. Если вы, захотите привлечь трафик на страницу с октября по декабрь, возможно, имеет смысл убрать все из поиска после завершения праздников и прекращения действия сделок.

Типы Объектов

Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: og:type

Код:

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

Когда мы соглашаемся со схемой типов, они добавляются в список глобальных типов. Все остальные типы объектов определяются как форма CURIEs

Код:

<head prefix="my_namespace: http://example.com/ns#"><meta property="og:type" content="my_namespace:my_type" />

Глобальные типы сгруппированы по вертикали. Каждый вертикальный тип имеет собственное пространство имен. Тип og:type значение имени всегда с префиксом пространства имен, а затем период.Это для уменьшения путаницы типов в пространствах имен, в которых всегда есть двоеточие.

Пространство имён определяется URI: http://ogp.me/ns/music#

og:type значение:

• music:duration — >=1 — Длина песни в секундах.
• music:album — — Название альбома.
• music:album:disc — >=1 -Номер альбома на диске.
• music:album:track — >=1 -Номер трека в альбоме.
• music:musician — -Исполнитель песни.

• music:song — — Название песни в альбоме.
• music:song:disc — >=1 -Тоже самое что music:album:disc но в обратном значении.
• music:song:track — >=1 -Тоже самое что music:album:track но в обратном значении.
• music:musician — — Профайл музыканта, который создал эту песню.
• music:release_date — — Дату выпуска альбома.

• music:song — Идентично одному из
• music:song:disc
• music:song:track
• music:creator — — Создатель плейлиста.

music:creator — profile — Создатель Радио-станции.

URI пространства имен: http://ogp.me/ns/video#

og:type значение:

• video:actor — — Актеры в этом фильме.
• video:actor:role — — Роли актеров
• video:director — — Режиссеры фильма.
• video:writer — — Авторы фильма.
• video:duration — >=1 — Длина фильма в секундах.
• video:release_date — — Дата выхода фильма в прокат.
• video:tag — — Теги, связанные с этим фильмом.

• video:actor — Идентично
• video:actor:role
• video:director
• video:writer
• video:duration
• video:release_date
• video:tag
• video:series — — К какой серии этот эпизод принадлежит.

Если это сериал или ТВ-шоу, метаданные идентичны .

Видео, которое не относится ни к одной из категорий. Метаданные идентичны .

Это глобально-определеные объекты, которые просто не вписываются в вертикальные объекты, но всеже широко используются в Интернете.

og:type значение:

— Статья, пространство имён определяется URI: http://ogp.me/ns/article#

• article:published_time — — Когда статья была впервые опубликована.
• article:modified_time — — Когда статья была последний раз изменена.
• article:expiration_time — — Время истечения срока статьи.
• article:author — -Авторы статьи.
• article:section — — Название категории.
• article:tag — — Теги, связанные с этой статьей.

— Книга, пространство имён определяется URI: http://ogp.me/ns/book#

• book:author — — Кто написал эту книгу.
• book:isbn — — Международный стандартный книжный номер ISBN
• book:release_date — — Дата выпуска книги.
• book:tag — — Теги, связанные с этой книгой.

— Профайл, пространство имён определяется URI: http://ogp.me/ns/profile#

• profile:first_name — — Имя пользователя профайла.
• profile:last_name — — Фамилия пользователя профайла.
• profile:username — — Ник.
• profile:gender — — Пол (мужской, женский).

— Web-сайт, пространство имён определяется URI: http://ogp.me/ns/website#

Никаких дополнительных свойств, отличных от базовых. Любая не размеченная web-страницы должна рассматриваться как og:type web-сайт.

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

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

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

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

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

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

Что такое Open Graph?

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

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

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

Вконтакте не подтягивает Open Graph потому что он не указан сайте

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

Так выглядит Open Graph при вставлении ссылки вручную

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

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

С помощью тегов OG, потому что мы можем установить страницу:

1. Подготовленное для пользователей броское название (согласитесь, наши сеошные тайтлы — не годятся для «желтой прессы» в 90% случаев);
2. Адекватное описание (вместо куска текста);
3. Графика (вместо случайного изображения со страницы).

Таким образом, мы будем улучшать CTR из соц. сетей и увеличим количество переходов.

Например, сервис Tumblr после реализации протокола Open Graph увеличил трафик с Facebook на 250%. Использование Open Graph особенно уместно на сайтах, связанных с таким темами, как:

• музыка;
• фильмы;
• телевидение;
• книги;
• спорт;
• общепит;
• приложения и игры;
• Кулинария;
• Женские порталы.

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

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

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.

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

Заголовок веб-страницы содержит много информации о найденном там контенте. Здесь вы найдете HTML метатеги вместе со ссылками на CSS или JavaScript, которые применимы к странице.

Вы можете найти несколько важных деталей о странице только из этого фрагмента:

• (Мета) заголовок
• Мета описание
• Тип мета-содержимого и область просмотра

Это все метатеги. В большинстве случаев они написаны на HTML в виде пары названий/значений. Например:

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

Добавление и настройка тегов Open Graph вручную

Если вы привыкли всё делать и настраивать самостоятельно и вы любите работать с кодом WordPress, вам подойдёт, конечно, это вариант. Для начала нужно проделать те же действия, что и в предыдущем варианте — заменить стандартный тег <html>на тот, что нам нужен. Открываете файл header.php и заменяете стандартный тег:

на этот код:

Следующий шаг — самый интересный

В этом же файле header.php перед закрывающим тегом </head> вставляете код тегов Open Graph Facebook:

В этих тегах вам нужно заменить 2 значения:

«fb:admins» content=«ВАШ_ЛИЧНЫЙ_ID_FACEBOOK» — вставьте id вашего аккаунта на Facebook (как его найти, я объяснил выше);

«og:image» content=«//ПУТЬ-К-КАРТИНКЕ/КАРТИНКА.jpg» — вставьте ссылку на картинку, которая будет отображаться по умолчанию, если в статье или на странице нет других картинок. Как правило, сюда вставляется ссылка на логотип.

Сохраняете изменения и проверяете работу тегов Open Graph, нажав на кнопку «Мне нравится» в любой статье блога.

Может быть ситуация, при которой картинка статьи всё равно публикуется некорректно или вся статья просто не отображается (как было у меня). Это значит, что функция wp_get_attachment_thumb_url() не работает. Тогда необходимо сделать следующие действия.

Замените этот тег:

на этот тег:

Сохраните изменения. Затем справа в панели управления найдите ссылку на файл «Функции темы» (functions.php), откройте его и в конце кода перед знаком ?> вставьте следующий код:

Этот код описывает функцию catch_that_image(), которая находит первую картинку в статье блога и вставляет её ссылку в тег изображения Open Graph. Если в статье нет картинки, то эта функция использует изображение по умолчанию. Для этого вставьте ссылку нужного изображения в эту переменную:

$first_img = «//ПУТЬ_К_КАРТИНКЕ_ПО_УМОЛЧАНИЮ/ФОТО.jpg»;

Теперь сохраняйте изменения в файле functions.php, заходите на блог и проверяйте работу кнопок «Мне нравится». Всё должно работать корректно.

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

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

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

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

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

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