Open graph — панацея для соцсетей

Содержание:

Дополнительные мета- теги:
Как внедрить OG на сайт?
JavaScript
Разные бесполезности
Как сделать микроразметку статьи?
- Разметка с schema.org
- Разметка с Open Graph
Пример микроразметки страницы с помощью Open Graph
Почему оптимизация блога не дала результатов
Взаимодействие с социальными сетями
Что такое разметка Open Graph и как она поможет вашему сайту получать больше трафика
- Что можно сделать с помощью Open Graph
- Где используется Open Graph
Главные мета теги:
Properties
Structured Properties
Разметка видео
Как подключить Open Graph к WordPress
- Подключение Open Graph к WordPress с помощью плагина
- Подключение Open Graph к WordPress без плагинов
Проблемы с повторяющимися тегами Open Graph
Conclusion
Types
Мета-теги

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

Google месторасположение

<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Название улицы"/>
<meta property="business:contact_data:locality" content="Город"/>
<meta property="business:contact_data:postal_code" content="Индекс"/>
<meta property="business:contact_data:country_name" content="Страна"/>
<meta property="business:contact_data:email" content="cotact@mail.com"/>
<meta property="business:contact_data:phone_number" content="+91 1234567890"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>

Google Plus

<meta itemprop="name" content="Название сайта"/>
<meta itemprop="description" content="Описание сайта"/>
<meta itemprop="image" content="https://website.com/image250X250.png"/>

<meta name="twitter:card" content="summary"/> <!-- Тип окна -->
<meta name="twitter:site" content="Название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание"/>
<meta name="twitter:creator" content="автор"/>
<meta name="twitter:image:src" content="https://website.com/image250X250.png"/>
<meta name="twitter:domain" content="website.com"/>

<meta property="og:type" content="profile"/>
<meta property="profile:first_name" content="Имя"/>
<meta property="profile:last_name" content="Фамилия"/>
<meta property="profile:username" content="Ник"/>
<meta property="og:title" content="Название страницы"/>
<meta property="og:description" content="Описание"/>
<meta property="og:image" content="https://website.com/image250X250.png"/>
<meta property="og:url" content="http://www.site.com"/>
<meta property="og:site_name" content="Название сайта"/>
<meta property="og:see_also" content="http://www.website.com"/>
<meta property="fb:admins" content="Facebook_ID"/>

Как внедрить OG на сайт?

How to use the to make links & open them where you want!

Информация для соцсетей передается с помощью специальных тегов ОпенГраф. Они же, в свою очередь, прописываются в блоках html и head.

В теге html объявляем то, что на странице мы используем словарь OG.

Остальное прописываем в 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 для Твиттер. Каждая соцсеть будет брать параметры изображения из своего тега.

JavaScript

How to open control panel

JS Array
concat()
constructor
copyWithin()
entries()
every()
fill()
filter()
find()
findIndex()
forEach()
from()
includes()
indexOf()
isArray()
join()
keys()
length
lastIndexOf()
map()
pop()
prototype
push()
reduce()
reduceRight()
reverse()
shift()
slice()
some()
sort()
splice()
toString()
unshift()
valueOf()

JS Boolean
constructor
prototype
toString()
valueOf()

JS Classes
constructor()
extends
static
super

JS Date
constructor
getDate()
getDay()
getFullYear()
getHours()
getMilliseconds()
getMinutes()
getMonth()
getSeconds()
getTime()
getTimezoneOffset()
getUTCDate()
getUTCDay()
getUTCFullYear()
getUTCHours()
getUTCMilliseconds()
getUTCMinutes()
getUTCMonth()
getUTCSeconds()
now()
parse()
prototype
setDate()
setFullYear()
setHours()
setMilliseconds()
setMinutes()
setMonth()
setSeconds()
setTime()
setUTCDate()
setUTCFullYear()
setUTCHours()
setUTCMilliseconds()
setUTCMinutes()
setUTCMonth()
setUTCSeconds()
toDateString()
toISOString()
toJSON()
toLocaleDateString()
toLocaleTimeString()
toLocaleString()
toString()
toTimeString()
toUTCString()
UTC()
valueOf()

JS Error
name
message

JS Global
decodeURI()
decodeURIComponent()
encodeURI()
encodeURIComponent()
escape()
eval()
Infinity
isFinite()
isNaN()
NaN
Number()
parseFloat()
parseInt()
String()
undefined
unescape()

JS JSON
parse()
stringify()

JS Math
abs()
acos()
acosh()
asin()
asinh()
atan()
atan2()
atanh()
cbrt()
ceil()
clz32()
cos()
cosh()
E
exp()
expm1()
floor()
fround()
LN2
LN10
log()
log10()
log1p()
log2()
LOG2E
LOG10E
max()
min()
PI
pow()
random()
round()
sign()
sin()
sqrt()
SQRT1_2
SQRT2
tan()
tanh()
trunc()

JS Number
constructor
isFinite()
isInteger()
isNaN()
isSafeInteger()
MAX_VALUE
MIN_VALUE
NEGATIVE_INFINITY
NaN
POSITIVE_INFINITY
prototype
toExponential()
toFixed()
toLocaleString()
toPrecision()
toString()
valueOf()

JS OperatorsJS RegExp
constructor
compile()
exec()
g
global
i
ignoreCase
lastIndex
m
multiline
n+
n*
n?
n{X}
n{X,Y}
n{X,}
n$
^n
?=n
?!n
source
test()
toString()

(x|y)
.
\w
\W
\d
\D
\s
\S
\b
\B
\0
\n
\f
\r
\t
\v
\xxx
\xdd
\uxxxx

JS Statements
break
class
continue
debugger
do…while
for
for…in
for…of
function
if…else
return
switch
throw
try…catch
var
while

JS String
charAt()
charCodeAt()
concat()
constructor
endsWith()
fromCharCode()
includes()
indexOf()
lastIndexOf()
length
localeCompare()
match()
prototype
repeat()
replace()
search()
slice()
split()
startsWith()
substr()
substring()
toLocaleLowerCase()
toLocaleUpperCase()
toLowerCase()
toString()
toUpperCase()
trim()
valueOf()

Разные бесполезности

Блок поделиться яндекс. кнопки соцсетей для wordpress

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

Примеры таких метатегов:

— определяет имя автора страницы. Указывать бессмысленно, так как не используется.
— указывает поисковым роботам время, через которое требуется зайти на страницу снова. Поисковые системы вроде «Яндекс» и Google не учитывают этот параметр.
— обозначает возрастную категорию контента. Чтобы пометить страницу, на которой размещены изображения для взрослых, требуется пройти запутанную процедуру. Проще отметить «плохие» изображения, и сообщить об этом поисковым системам.
— указывает дату создания и срок актуальности страницы. Если страницы уже не нужны, просто удалите. Дату создания же лучше указать в XML sitemap.
— описывает авторские права. Посмотрите на нижний колонтитул сайта. Наверняка там размещена фраза вроде Copyright 20xx. Не стоит дублировать описание ещё в теги.
— содержит аннотацию к содержанию страницы и чаще используется на образовательных ресурсах.
— описывает права доступа к странице. Как правило, содержит значение . Изначально задумывалось, что если страница открыта (не защищена паролем), то предназначена для всего мира. Смиритесь и уберите со страницы.
— указывает, с помощью какой программы создана страница. Как и , это бесполезно.
— указывает, когда и как часто страница кэшируется в браузере. Лучше это определить в .
— указывает тип ресурса страницы, например, document. Не тратьте на это время, так как это работа DTD.

Эта шпаргалка поможет понять, что происходит в мире метатегов. Если считаете, что нужно что-то добавить или удалить — пишите в комментарии.

При подготовке использовались материалы:
«Which Meta Tags Should You Be Using in 2017?»,
«The Wonderful World of SEO Meta Tags»,
«How to Boost Social Media Engagement with Meta Tags».
Автор иллюстрации с буханкой — Boryaspec.

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

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

Пример настройки кода для представленной статьи:

Почему оптимизация блога не дала результатов

Бывает и такое — вы добавили разметку Open Graph и Twitter Cards, установили виджеты групп проекта в соц. сетях, добавили опцию авторизации через Фейсбук, ВК, Твиттер, но вашими статьями никто не делится. Возможно, причина в следующем:

Создаете неинтересный контент.
Неправильно определили целевую аудиторию сайта и ей неинтересен контент.
Слишком часто обновляете контент. Пользователи не успевают с ним ознакомиться и оценить.
Пиарите свой сайт слишком агрессивно. Это раздражает. Реклама «в лоб» теряет свою эффективность.
Публикуете контент в неподходящее время — когда все на работе, уже спят или еще спят.
Публикуете нетематический контент. В группе про пеший туризм рассказываете “как поменять свечи на мотоцикле”.
Общаетесь с аудиторией на разных языках. Подаете информацию на молодежном сленге для сообщества со средним возрастом посетителя 40—45 лет. Это тоже относится к неправильному определению целевой аудитории.
Не делаете посев контента в соцсетях самостоятельно.

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

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

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

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

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

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

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

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

Конференция «Мир. Труд. Мобайл»

27 мая в 10:00, Иннополис (Казань), До 7000 ₽

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 и как она поможет вашему сайту получать больше трафика

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

Все это хорошо, но может не сработать, если публикация с репостом будет непривлекательной:

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

Чтобы подобного не происходило, как раз нужна разметка Open Graph. Она отвечает за привлекательный вид репостов страниц сайта в соцсетях.

Например, так выглядит репост статьи с разметкой Open Graph в Фейсбуке:

А так выглядит репост этого же материала во ВКонтакте:

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

Репост в Фейсбук статьи без внедренной разметки:

А так пост будет выглядеть, если Фейсбук не может подтянуть картинку (не находит ее на странице):

В примере ниже — подтянулась картинка из шапки сайта, а в кратком описании — фрагмент текста для формы подписки на рассылку:

Что можно сделать с помощью Open Graph

С помощью разметки вы можете настроить корректное и привлекательное отображение публикаций в соцсетях при репосте материалов с вашего сайта:

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

Также Open Graph позволяет создать блок рекомендуемого контента в Google AdSense:

Где используется Open Graph

Микроразметка была создана Facebook и изначально использовалась только в этой соцсети. Сегодня поддерживается популярными соцсетями и мессенджерами: ВКонтакте, Твиттер, LinkedIn, Телеграм, Viber, Slack и др.

Главные мета теги:

Как правило, при заполнении мета тегов, учитываются следующие ограничения на число символов в каждом:
Заголовок страницы (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 = "Краткое описание страницы" />

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

Structured Properties

Some properties can have extra metadata attached to them.
These are specified in the same way as other metadata with and
, but the will have extra .

The property has some optional structured properties:

— Identical to .
— An alternate url to use if the webpage requires
HTTPS.
— A MIME type for this image.
— The number of pixels wide.
— The number of pixels high.
— A description of what is in the image (not a caption). If the page specifies an og:image it should specify .

A full image example:

The tag has the identical tags as . Here is an example:

The tag only has the first 3 properties available
(since size doesn’t make sense for sound):

Разметка видео

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

<html prefix="og: http://ogp.me/ns#
      video: http://ogp.me/ns/video#
      ya: http://webmaster.yandex.ru/vocabularies/">

Заметили? Появился новый указатель на словарь от Яндекса — это нужно для того, чтобы видео с сайта попало в поиск в соответствующий раздел. Теперь добавляем мета-теги:

<meta property="og:title" content="Open Graph для видео"/> 
<meta property="og:url" content="http://mysite.com/my-little-cat/"/> 
<meta property="og:video" content="http://mysite.com/video/my-little-cat/"/> 
<meta property="og:description" content="Мои маленькие котятки"/> 
<meta property="video:duration" content="327878"/>
<meta property="og:image"  content="http://mysite.com/img/my-little-cat.png"/>
<meta property="ya:ovs:upload_date" content="2013-06-05"/>
<meta property="ya:ovs:adult" content="false"/>
<meta property="og:type" content="video.other"/>
<meta property="og:video:type" content="webm"/>

Их тут очень много и некоторые необходимо разобрать подробнее:

Тег og:video указывает либо на сам файл, либо на плеер, с помощью которого он проигрывается.
Тег video:duration указывает продолжительность видео в секундах (поэтому такие большие значения).
Тег ya:ovs:adult указывает на принадлежность видео к категории “18+”. Если видео имеет такое ограничение, то пишем true, а если нет, то false.
Тег og:type показывает, к какому жанру относится это видео — кино, серия из сериала, музыкальный клип, шоу, прямая трансляция или что-то другое (как в нашем примере).
Тег og:video:type указывает на формат файла.

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

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

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

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

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

WP Facebook Open Graph protocol;
Open Graph.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Conclusion

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

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 has some indirect positive impact on your SEO credibility—all things that eventually lead to more profit.

The functionalities described here don’t cover everything you can do with Open Graph. Check out some of the more advanced OG integrations with Facebook and some new features from Twitter (like Lead Generation Cards).

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.

Types

The following types are used when defining attributes in Open Graph protocol.

Type	Description	Literals
	A Boolean represents a true or false value	true, false, 1, 0
	A DateTime represents a temporal value composed of a date (year, month, day) and an optional time component (hours, minutes)	ISO 8601
	A type consisting of bounded set of constant string values (enumeration members).	A string value that is a member of the enumeration
	A 64-bit signed floating point number	All literals that conform to the following formats: 1.234 -1.234 1.2e3 -1.2e3 7E-10
	A 32-bit signed integer. In many languages integers over 32-bits become floats, so we limit Open Graph protocol for easy multi-language use.	All literals that conform to the following formats: 1234 -123
	A sequence of Unicode characters	All literals composed of Unicode characters with no escape characters
	A sequence of Unicode characters that identify an Internet resource.	All valid URLs that utilize the https:// or https:// protocols

Мета-теги

Каким образом разместить эти атрибуты? Например, при помощи мета тегов для HTML сайта. При публикации ссылки на ресурс и извлекают связанную веб-страницу и считывают ее meta-теги, что позволяет отображать соответствующую информацию.

использует meta-теги, используя протокол Open Graph. Это система классификации веб-страниц, которая на данный момент охватывает meta-теги, определенные в HTML5. Полный список доступных тегов можно просмотреть на сайте Open Graph. Но в работе пригодится всего четыре тега:

<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">

Как , так и дают рекомендации относительно использования упомянутых выше тегов. Учтите, что ссылается на публикуемую веб-страницу при помощи термина «объект» (object):

Title (Заголовок).	Заголовок или название объекта.	Продуманный заголовок для связанного контента (максимально 70 символов).
Description (Описание).	Краткое описание или содержание объекта (2-4 предложения).	Описание, которое несет в себе всю необходимую информацию. Не следует использовать одинаковые заголовки и описания для нескольких страниц (длина до 200 символов).
Image (Картинка).	URL картинки объекта. Картинка должна быть как минимум 600 на 315 пикселей в размере, но лучше использовать 1200 на 630 и выше (объемом до 5Мб). Что касается соотношения сторон, то старайтесь укладываться в 1.91:1, чтобы избежать обрезки	Ссылка на картинку, прикрепленную к контенту. Не следует использовать случайные картинки типа логотипа сайта, фотографию автора или другие картинки, которые встречаются на других ресурсах. Картинка должна иметь минимум 280 пикселей в ширину и 150 – в высоту. Вес картинки не должен превышать 1 Мб.
URL	Канонический URL страницы. Ссылка должна быть прямой, без дополнительных параметров, переменных, данных идентификации пользователей и т. д.