Как сделать превью сайта при попытке поделиться ссылкой в социальных сетях
Содержание:
- Как внедрить OG на сайт?
- Мета тег title
- Implementations
- Проверка микроразметки Open Graph
- Типы
- Дополнительные метатеги
- Типы Объектов
- Properties
- Синтаксис разметки
- Главные мета теги:
- Оптимизация сайта под социальные сети
- Alt атрибуты изображения
- Мета-теги для картинок сайта:
- Why was Open Graph created?
- Проблемы с повторяющимися тегами Open Graph
Как внедрить OG на сайт?
Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.
В теге html объявляем то, что на странице мы используем словарь OG.
<html xmlns:fb=”http://ogp.me/ns/fb#”>
Остальное прописываем в head. Вот основные мета теги Open Graph:
- og:title – аналог обычного title, заголовок страницы или другого объекта, он же текст ссылки;
- og:description – как и стандарный description, описание материала, которое будет выводиться под заголовком;
- og:type – типы объектов, это может быть статья, видео или аудио трек;
- og:image – ссылка на иллюстрацию материала;
- og:url – собственно сама ссылка на материал.
Далее примеры как прописать теги OG.
В примере встретилось еще несколько полезных тегов. Желательно указывать локализацию, можно задать размер изображения.
Вариантов значений тега type достаточно много. Для разных видов контента они свои. Кроме того, с этим связаны атрибуты в теге html. Подробное описание содержится в документации Фейсбук для разработчиков
или на сайте Open Graph.
Для каждой соцсети существуют отдельные теги. Особенно много специализированных тегов у Twitter. Например, у всех сетей разные требования к размерам картинок. И чтобы все это выглядело красиво можно прописать vk:image для VK, fb:image для Фейсбук, twitter:image для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.
Мета тег title
Например, если вы посмотрите HTML-код этой страницы, то увидите, что заголовок выглядит следующим образом:
Теги заголовков помещаются в <head> вашей веб-страницы и предназначены для предоставления чёткого и исчерпывающего представления о том, о чём эта страница. Но имеют ли они такое же сильное влияние на позиции в выдаче, как это было много лет назад?
В последние несколько лет идёт активное обсуждение поведенческих факторов, как логического доказательства релевантности и, следовательно, сигнала ранжирования – даже представители поисковых систем периодически признают их влияние.
Заголовок страницы по-прежнему является первым, что пользователь видит в поисковой выдаче и решает, отвечает ли страница поисковому запросу. Правильно написанный title может значительно увеличить количество кликов по сниппету и трафик на сайт, что, безусловно, влияет на ранжирование.
Простой эксперимент показывает, что Гуглу больше не нужен ваш тайтл, включающий ключ с точным соответствием, чтобы понять тему страницы. Например, несколько лет назад выдача Гугла по запросу «как повысить узнаваемость бренда» очень сильно походила на то, что вы можете наблюдать сейчас в Яндексе:
Всего 1 заголовок из всего топа не включает точное соответствие. А теперь давайте взглянем на Google:
Всего 1 заголовок из всего топа включает точное соответствие. Но при этом в Гугле нет ни одного неуместного результата: каждая, из приведённых здесь страниц, объясняет, как повысить узнаваемость, и заголовки это отражают.
Поисковые системы смотрят на общую картину и обычно оценивают содержание страницы в целом, но «обложка книги» всё ещё имеет значение, особенно, когда речь идёт о взаимодействии с пользователями.
Как правильно заполнять title
- Сделайте для каждой страницы уникальный заголовок, который кратко и точно описывает её контент.
- Если хотите, чтобы заголовки не обрезались в поисковой выдаче, лучше ограничивать их 50-60 символами. В Google длинные заголовки сокращаются, примерно, до 600-700 пикселей, но эти цифры иногда меняются, так что не стоит их жёстко придерживаться.
- Главные ключевые слова должны стоять как можно ближе к началу заголовка. Но вставляйте их максимально органично, как будто вы это делаете для посетителей сайта.
- Используйте название вашего бренда в названии, даже если оно не отображается в поисковой выдаче, это всё равно будет иметь значение для поисковой системы.
Совет: используйте title для привлечения внимания
Тег заголовка ценен не только потому, что он является основным элементом поисковой выдачи, но и потому, что он действует, как заголовок вкладки в вашем веб-браузере. Это можно использовать для привлечения внимания пользователя. Например:
Такой подход используют социальные сети: ВКонтакте, Facebook, LinkedIn, чтобы показать вам, что имеются новые уведомления. Эта тактика может дать весьма неплохой результат!
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
Начнем с «книгоморды», вставляем в соответствующее поле адрес страницы сайта, которую хотим проверить и жмем на кнопку «Отладка». Если все сделано правильно, ошибок быть не должно, а результат должен быть примерно таким:
Теперь проделаем то же самое в валидаторе микроразметки от Яндекса, но тут оказалось не все так замечательно, и я получил ошибку, которая гласит:
ОШИБКА: префикс 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#">
Типы
Следующие типы используются при определении атрибутов в протоколе 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:// |
Можешь почитать и вот эту статейку «Переливающийся текст»
ПредыдущаяСледующая
Дополнительные метатеги
- 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" />
Типы Объектов
Для того что бы корректно отобразить объект в графе, необходимо задать ему тип. Это делается с помощью свойств: 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-сайт.
Properties
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:title | any text | The Rock | required | after a page receives 50 likes the title becomes unchangeable | |
| og:type | see below | required | after a page receives 10,000 likes the type becomes unchangeable | ||
| og:url | «proper»/canonical format for URL of current page | fully qualified URL | required | ||
| og:image | image to associate with the content of the page | fully qualified URL | required | ||
| og:site_name | human readable name of the website this page is contained in | any text | IMDb | required | |
| fb:admins | comma separated list of users who should have administrative access to any Facebook pages created about this web page | comma separated list of Facebook user ids | required if no defined | ||
| fb:app_id | Facebook ID for an application that owns this page | Facebook application ID | 118381521562237 | required if no defined | |
| og:description | description of the page | any text |
Locations
adding latitude and longitude coordinates
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:latitude | 37.416343 | ||||
| og:longitude | -122.153013 |
adding a «human» readable address
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:street-address | 1601 S California Ave | none | |||
| og:locality | Palo Alto | none | |||
| og:region | CA | none | |||
| og:postal-code | 94304 | none | |||
| og:country-name | USA | none |
Contact Information
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:email | me@example.com | none | |||
| og:phone_number | +1-650-123-4567 | none | |||
| og:fax_number | +1-415-123-4567 | none |
Videos
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:video | fully qualified URL to a SWF video | none | Facebook supports embedding video in SWF format only. You must include a valid og:image for your video to be displayed in the news feed. | ||
| og:video:width | pixel width of video described in og:video | integer ≤ 398 | 385 | must have og:video | |
| og:video:height | pixel height of video described in og:video | integer ≤ 460 | 400 | must have og:video | |
| og:video:type | mime-type of video file described in og:video | application/x-shockwave-flash | must have og:video |
Audio
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:audio | fully qualified URL to an audio file | none | not sure what all formats are supported beyond mp3 | ||
| og:audio:title | title of audio described in og:audio | any text | «Amazing Soft Rock Ballad» | must have og:audio | |
| og:audio:artist | pixel height of audio described in og:audio | any text | «Amazing Band» | must have og:audio | |
| og:audio:album | mime-type of audio described in og:audio | any text | «Amazing Album» | must have og:audio | |
| og:audio:type | mime-type of audio file described in og:audio | any text | «application/mp3» | must have og:audio |
Others
| Property | Description | Allowable Values | Example | Dependencies | Notes |
|---|---|---|---|---|---|
| og:upc | UPC code of the item | none | may be an expectation of og:type being one under «Products and Entertainment» | ||
| og:isbn | ISBN code of book if describing a book | «978-0470878040» | none | may be an expectation of og:type being one under «Products and Entertainment» |
Синтаксис разметки
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 — это совокупность обязательных и опциональных свойств. В структуре кода они выглядят так.
Главные мета теги:
Как правило, при заполнении мета тегов, учитываются следующие ограничения на число символов в каждом:
Заголовок страницы (title) – 70 символов
Мета описание (description) – 160 символов
Мета ключевые слова (keywords) – не более 10 ключевых фраз разделенных запятой.
<title>Заголовок страницы</title> <base href="url сайта" /> <meta name=robots content="index, follow"/> <meta name="description" content="краткое описание страницы"/> <meta name="keywords" content="поисковые слова через запятую" /> <meta name="subject" content="описание темы страницы"/> <meta name="reply-to" content="ваш адрес электронной почты"/> <meta name="author" content="Автор размещенного на странице материала"/> <meta name="copyright" content="Чьи авторские права"/>
<meta property = "og:title" content = "Заголовок страницы" /> <meta property = "og:type" content = "article" /> <meta property = "og:image" content = "url фотографии" /> <meta property = "og:description" content = "Краткое описание страницы" />
Оптимизация сайта под социальные сети
Оптимизация сайта под социальные сети (англ. Social media optimization, SMO) — комплекс мер, направленных на привлечение на сайт посетителей из социальных медиа: блогов, социальных сетей и т. п.
Появление термина SMO принято связывать с публикацией Рохита Бхаргавы (Rohit Bhargava), сформулировавшего 5 основных правил SMO:
- Повышение ссылочной популярности;
- Упрощение добавления контента с сайта в социальные сети;
- Привлечение входящих ссылок;
- Обеспечение экспорта и распространения контента;
- Поощрение создания сервисов, использующих наш контент.
Вопросы, связанные непосредственно с генерацией контента рассматривать не будем. О написании сильных текстов лучше всего расскажет недавно вышедшая книга Максима Ильяхова и Людмилы Сарычевой «Пиши, сокращай. Как создавать сильный текст».
Настоятельно рекомендую всем кто хотя бы иногда что-то пишет.
Возьмем в качестве примера самую простую публикацию самого заурядного блога. На ней я покажу как контент должен расшариваться и как не должен.
Сначала как должен.
В Фейсбуке.
Как видим, публикация имеет понятный заголовок, характерное изображение и краткое описание. Оно не самое лучшее, но технически работает все верно.
А вот как не должен расшариваться контент.
В Фейсбуке.
Видим, что и Фейсбук, и ВКонтакте получили только адрес сайта. Еще я часто вижу при расшаривании, как в качестве изображения прикрепляются разные счетчики Лайвинтернета, Рамблера, какие-то логотипы и прочие бессмысленные картинки. Так тоже быть не должно. Изображение должно соответствовать публикации или хотя бы тематике сайта, если публикация не несёт в себе никаких изображений. Никакие счетчики и элементы интерфейса прикрепляться не должны.
Такой шаринг никуда не годится.
Такие посты никто не будет ни лайкать, ни репостить. Скорее всего и посетитель, решивший расшарить публикацию, увидев эту срамоту, изменит свои планы.
Задача веб-разработчика сделать так, чтобы социальные сети видели метаданные публикаций и понимали, что конкретно репостит посетитель. Если это статья — она должна быть соответствующе оформлена, если это медиаконтент — он должен оставаться медиаконтентом, не теряя при репосте никакой информации о себе. Иначе не может быть никакой речи о SMO.
Для решения этой задачи в 2010 году компанией Facebook был разработан протокол Open Graph.
Alt атрибуты изображения
Атрибут alt изображения добавляется к тегу изображения img для описания его содержимого. Альтернативные атрибуты важны с точки зрения внутренней оптимизации сайта по двум причинам:
- Альтернативный текст показывается посетителям, если какое-либо конкретное изображение не может быть загружено (или если отображение картинок отключено).
- Атрибуты Alt обеспечивают контекст для роботов, потому что поисковые системы не могут «видеть» изображения.
На e-commerce сайтах изображения часто имеют решающее влияние на то, как посетитель взаимодействует со страницей
Поисковики так же прямо заявляют о важности этого тега
Например, Google в своих гайдах для вебмастеров пишет, что помощь поисковым системам в понимании того, что находится на картинках, и как они сочетаются с остальным контентом, помогает соотносить страницу сайта с подходящими поисковыми запросами.
Даже Мюллер писал у себя в Твиттере, что продуманное альтернативное описание изображения необычайно важно, если вы хотите занять высокое место в Google Картинках. Однако не забывайте о релевантности
Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте
Однако не забывайте о релевантности. Не только alt-текст, заголовки и подписи должны соответствовать изображению, но и сама картинка должна размещаться в тематическом контенте.
Оптимизация alt тега img для изображений
- Сделайте всё возможное, чтобы оптимизировать свои самые важные изображения (картинки товаров, инфографику, инструкции), которые могут получить хорошие позиции в поиске Google Images.
- Добавьте alt-текст на страницах, где не так много другого контента (кроме картинок).
- Делайте тег alt для изображений понятным и достаточно информативным, разумно используйте ключевые слова и убедитесь, что они естественным образом вписываются в содержание страниц.
Мета-теги для картинок сайта:
Тег 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.
Проблемы с повторяющимися тегами Open Graph
Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.
В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.
И все бы ничего, но так уж получается, что этот самый тег стоит первый в очереди и некоторые социальные сети которые не дают возможность выбора изображений берут для создания поста (когда вы жмете кнопку поделиться) именно его, а это в большинстве случаев как минимум не красиво.
Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:
На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.
