Важные мета-теги для социальных сетей

Содержание:

Robots
Массивы
Стандартная разметка сайта
Структурированные Свойства
Взаимодействие с социальными сетями
Open Graph Meta Tags Conclusion
Основные теги протокола Open Graph
Микроразметка для социальных сетей. Внедрение.
Implementations
Добавляем разметку с помощью плагинов
- Плагин All in One SEO Pack
- Плагин Facebook Open Graph Meta
Социальная сеть ВКонтакте не берет краткое описание (description)
Проверка микроразметки Open Graph
Syntax
Как сделать микроразметку статьи?
- Разметка с schema.org
- Разметка с Open Graph
Проблемы с повторяющимися тегами Open Graph
Информация об авторе статьи

Robots

HTML пример

Или же:

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

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

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

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

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

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

Массивы

Мета-теги

Если метатег может содержать несколько значений, добавьте дополнительные 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 пикселей в высоту.

Стандартная разметка сайта

Мета теги страниц сайта: title, description, keywords, robots и другие

В самом начале мы должны указать, что используем Open Graph, для чего в тег <html> добавляем следующий код:

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

Итак, вот такой минимальный код разметки Open Graph нужен на сайте, чтобы основные социальные сети могли сделать красивый блок:

<meta property="og:type" content="website">
<meta property="og:site_name" content="Название сайта">
<meta property="og:title" content="Заголовок">
<meta property="og:description" content="Описание страницы">
<meta property="og:url" content="http://mysite.com/post">
<meta property="og:locale" content="ru_RU">
<meta property="og:image" content="http://mysite.com/thumbnail.jpg">
<meta property="og:image:width" content="968">
<meta property="og:image:height" content="504">

Код достаточно простой и понятный. Здесь уже появились и опциональные мета-теги для изображения — указания размера изображения (про размеры изображений поговорим чуть позже).

Теперь немного тонкости по мета-тегу og:type. Этот тип указывает, что это вообще за страница — если это главная страница сайта или его раздел, то его тип можно указать как website. А вот если это уже отдельная страница (статья) на сайте, то необходимо типом указать article:

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

Но при этом у нас должно измениться содержание тега <html>:

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

Замечу тут же и сразу, что мета-тег og:type связан со значениями атрибутов в теге html, поэтому здесь необходима внимательность. Значений для og:type очень много и для тех, кому интересно ознакомиться со всеми ними подробнее, предлагаю посмотреть — там всё достаточно просто, к тому же отображена актуальная информация.

Тег og:site_name указывает название сайта. В отличии от og:title, который меняется в зависимости от названия страницы, не изменяется.

Также здесь добавлен мета-тег языка страницы og:locale — он не обязателен, но желателен.

Структурированные Свойства

Некоторые свойства могут иметь дополнительные метаданные, прикрепленные к ним.Они определены таким же образом как метаданные свойство и, но свойства будут иметь дополнительные.

Свойство тега og:image имеет несколько дополнительных структурированных свойств:

og:image:url — Идентичный og:image.
og:image:secure_url — Альтернативный url-адрес для использования в случае, если web-страница требует HTTPS.
og:image:type — Типы MIME для изображения.
og:image:width — Число пикселей в ширину.
og:image:height — Число пикселей в высоту.

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

Код:

<meta property="og:image" content="http://example.com/ogp.jpg" /><meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" /><meta property="og:image:type" content="image/jpeg" /><meta property="og:image:width" content="400" /><meta property="og:image:height" content="300" />

Свойство тега og:video имеет идентичные теги с og:image. Вот пример:

Код:

<meta property="og:video" content="http://example.com/movie.swf" /><meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" /><meta property="og:video:type" content="application/x-shockwave-flash" /><meta property="og:video:width" content="400" /><meta property="og:video:height" content="300" />

Тег og:audio имеет только 3 доступных свойства (потому что, звук не имеет ширины и высоты):

Код:

<meta property="og:audio" content="http://example.com/sound.mp3" /><meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" /><meta property="og:audio:type" content="audio/mpeg" />

Взаимодействие с социальными сетями

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

Причём они могут даже не отображаться в веб-версии сайта

Текст адаптируется для поста, картинка создаётся специально под площадку. Причём они могут даже не отображаться в веб-версии сайта.

Open Graph (Facebook, Pinterest, Вконтакте, Одноклассники)

Open Graph — разработанная Facebook разметка, позволяющая настраивать превью страницы, ссылка на которую размещена в социальной сети. Open Graph поддерживают социальные сети вроде Вконтакте, Одноклассники, Google+, Twitter и LinkedIn. Как основную используют Facebook и Pinterest.

Middle Frontend Developer (TypeScript, Svelte)

Tproger, Москва, можно удалённо, От 80 000 до 160 000 ₽

tproger.ru

Вакансии на tproger.ru

Стандартный сниппет выглядит так:

Facebook поддерживает дополнительные метатеги для изображений и видео.

Для Pinterest в указывается имя автора или название сайта, но это противоречит требованиям Open Graph на Facebook. Для программистов создано интересное решение. В противном случае используйте более выгодный вариант или разметку Schema вместе с Open Graph.

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

Стандартные метатеги (Twitter)

Twitter поддерживает некоторые элементы Open Graph, но в основном использует стандартные метатеги для определения расшаренного контента. Проверить описание, или карту, как называет его Twitter, можно с помощью валидатора карт.

Вот пример описания:

Примечание — ссылка на аккаунт сайта в Twitter, — ссылка на аккаунт автора.

Schema (Google+ и Pinterest)

Разметка Schema — продукт совместной работы крупнейших поисковых систем, преимущественно используемый в Google+. В Pinterest Schema поддерживается как альтернатива Open Graph, но не в полной мере: рекомендуется использовать обе. Разметка Schema громоздкая и менее привлекательная, чем Open Graph, но её словарь описания связанного контента богаче.

Вот сниппет для Google+:

Google+ использует Open Graph как резервную разметку, у Pinterest используются дополнительные метатеги Schema, поэтому разумно использовать все три описанные разметки.

Open Graph Meta Tags Conclusion

The final code for both Facebook and Twitter should look more-or-less like this:

It might seem a bit confusing, but luckily there are several tools that make the process easier — you don’t need to know how to code.

It’s surprising how few people optimize these tags. It’s worth doing because it helps you stand out and draw more clicks and views, and it can even help improve your SEO —all things that lead to more profit.

Have you implemented open graph meta tags? How has it impacted your site?

See How My Agency Can Drive Massive Amounts of Traffic to Your Website

SEO — unlock massive amounts of SEO traffic. See real results.
Content Marketing — our team creates epic content that will get shared, get links, and attract traffic.
Paid Media — effective paid strategies with clear ROI.

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

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

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

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

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

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

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

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

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

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

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

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

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

Микроразметка для социальных сетей. Внедрение.

Поскольку Фейсбук, Гугл+, Вконтакте, Твиттер и Одноклассники имеют разную ширину контента – требования к минимальным размерам картинок, их пропорциям, а также длине вводного текста слегка отличаются друг от друга. Я собрал воедино все требования и на их основе составил общее, с которым и предлагаю Вам ознакомиться.

Метатеги (а именно они понадобятся для внедрения Open Graph на сайт
Располагаются в шапке сайта между тегами <head></head> имеют следующий вид:

В микроразметке для соцсетей основных метатегов четыре, а именно:

og:title – название статьи (ссылки);
og:description – описание;
og:url – ссылка на ваш сайт;
og:image – ссылка на картинку.

Требования к картинкам

	Мин. ширина, px	Мин. высота, px	Соотношение сторон
ОК.ру	640	286	1:91 или 2:2375
400	н/д	1:91 или 2:2375

Как видно из таблицы, минимальный размер картинки, который «понравится» всем сосцетям сразу, должен быть не меньше 640 px в ширину и не меньше 315 px в высоту. Но это не все! По непонятной причине ВКонтакте отказался от поддержки установленной фейсбуком (родоначальником Open Graph), пропорции 1:91 и ввел свою 2:2375.

Что это означает на практике? А то, что картинки, не соответствующие этой пропорции будут «подрезаны снизу»!

Менее раскрученные соцсети, а именно Гугл+, Одноклассники и ряд других поступили мудрее. Они поддерживают оба формата (фейсбучный, и вконтактовский). Также слегка отошел от стандартов Твиттер. Но его пропорция 1:87 не так уж сильно ушла от 1:91, поэтому обрезка незначительна. Кроме того, Твиттер проявил мудрость, расширив микроразметку своими собственными параметрами такими как twitter:image (аналог og:image), twitter:card и ряд других.

Вывод. Создавая картинку для перепоста предстоит выбирать, либо полную совместимость с Фейсбук, либо ВКонтакте. Т.е. минимальный размер картинки для корректного отображения во всех соцсетях должен быть либо:

640×335 (стандарт Фейсбук 1:91)
705×315 (стандарт ВК 2:2375)

В код микроразметку внедрил, но ВКонтакте ее не распознает

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

Микроразметка для Твиттера

Не смотря на то, что Твиттер неплохо расшаривает стандартные метатегитеги “og:”, я все же рекомендую прописывать для него собственные, начинающиеся с twitter: (см. пример ниже)

Обратите внимание на twitter:card и его значение summary_large_image. Этот метатег сообщает социальной сети, что следует создать картинку на всю ширину ленты!. Подробную документацию по микроразмете для твиттер можно

А протестировать тут

Подробную документацию по микроразмете для твиттер можно . А протестировать тут.

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.

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

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

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

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

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

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

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

Проверка микроразметки Open Graph

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

Теперь проделаем то же самое в валидаторе микроразметки от Яндекса, но тут оказалось не все так замечательно, и я получил ошибку, которая гласит:

ОШИБКА: префикс article неизвестен валидатору, укажите его явно атрибутом prefix

Выглядит это дело следующим образом:

Что это за атрибут такой и почему он не известен валидатору? Оказалось все просто, чтобы избавиться от подобной ошибки всего на всего необходимо явно указать Яндексу, что мы используем микроразметку (протокол) Open Graph. Для этого в индексном файле нашего шаблона необходимо найти открывающийся тег HTML:

<html lang="en">

И заменить его следующей строкой:

<html lang="en" prefix="article: http://ogp.me/ns/article#">

После этого ошибка в валидаторе Яндекса исчезнет. Кстати возможны случаи, когда вместо article Яндексу не нравится префикс fb, в таком случае в теге html необходимо дописать дополнительную строку fb: http://ogp.me/ns/fb# и так далее:

<html lang="en" prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#">

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»>

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

Рассмотрим примеры применения микроразметки 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.

Все остальное размещается внутри <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

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

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

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

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

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

Информация об авторе статьи

Увековечить себя в микроразметки поможет следующая строчка в коде:

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

Если объект страницы — продукт коллективного труда, то авторов можно указать через запятую:

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

Как вы уже успели заметить, указание автора происходит путём указания ссылки на его профиль в Facebook. Но как быть, если авторство застолбить охота, но профиля в FB нет? В таком случае используем следующий тег:

<meta name="author" content="ivanpupkin" />

Да, он уже идёт без пометки og и не очень каноничен, но это вынужденная мера — не заводить же аккаунт в Facebook, в самом деле!