Использование html метатегов (мета теги)
Содержание:
- Публикация видео с использованием Open Graph
- Title
- Проблемы с повторяющимися тегами Open Graph
- Результаты тестирования
- Introduction
- Implementations
- JavaScript
- Аналитика социальных сетей
- Structured Properties
- Настройки блога для Open Graph.
- Дополнительные атрибуты Open Graph
- Подытожим: все еще есть над чем работать
- Создаем метатеги страниц для социальных сетей. Советы от профессионала
- Types
- Как общаться с технической поддержкой о мета-тегах
- Типы
- Совмещаем теги
- Introduction
- Open Graph Meta Tags Conclusion
- Основные Метаданные
- Как внедрять Open Graph
- Социальная сеть ВКонтакте не берет краткое описание (description)
- Информация о странице
Публикация видео с использованием Open Graph
Видеостоки, онлайн-хранилища и ресурсы с большим количеством видеоконтента могут использовать протокол микроразметки Open Graph для улучшения ранжирования контента на платформе Яндекс.Видео. В разметке Open Graph доступны специальные метатеги, с помощью которых можно детально охарактеризовать ролик и передать Яндекс необходимую информацию о нем:
- og: title — краткое название ролика, что не должно превышать 1000 символов.
- og: description — описание ролика, объемом от 150 до 1000 символов.
- og: url — URL страницы на которой размещено видео.
- og: video — путь к видеоплееру или файлу.
- og: image — ссылка на картинку, которая будет использована в качестве заставки видео.
- og: type — категория, или тема к которой будет отнесено видео.
- og:video:type — все кодеки, доступные для данного формата ролика.
- ya:ovs: upload_date — дата и время загрузки.
- ya:ovs:adult — используется для роликов, входящих в категорию контента «для взрослых». Если это так, укажите «true», если нет — «false».
- video:duration — продолжительность видеоролика (указывается в секундах с округлением до целого числа).
Title
HTML пример
Что он делает?
Тег <title> указывает на название страницы.
Действительно ли он необходим?
Да, это даже не подлежит обсуждению, поскольку он сообщает поисковым системам, как называется страница.
Этот тег пригодится, если вы хотите настроить свой заголовок специально для результатов поиска. Итак, допустим, вы написали кликбейт заголовок, чтобы посетители, которые его увидели, захотели узнать, о чем идет речь. Что-то вроде:
How to Earn a Six-figure Salary with Nothing More Than Your Laptop, Passport, and Your Best Friend
(Как заработать шестизначную зарплату, не имея ничего, кроме ноутбука, паспорта и лучшего друга)
Длина этой заголовочной строки составляет 98 символов, и Google никоим образом не сможет отобразить ее полностью. Вместо того, чтобы переписать заголовок для вашего сайта, вы можете использовать тег заголовка, чтобы дать Google заголовок, который больше соответствует его стандартам, например:
Это 56 символов, теперь заголовок вписывается в лимиты Google, и работает так же хорошо, как оригинал.
Проблемы с повторяющимися тегами Open Graph
Если вы используете некие плагины на сайте Joomla 3 то велика вероятность того что они вставляют собственные метаданные протокола Open Graph в head документа, даже если они не имеют никакого отношения к данному протоколу.
В частности мне удалось выяснить, что плагин для создания превьюшек изображений mAvik Thumbnails по умолчанию добавляет тег og:image в head документа, а в качестве значения берется самое первое изображение из тела статьи, причем его уменьшенная копия. В этом вы можете убедиться, посмотрев на скриншот результатов проверки микроразметки в валидаторе Яндекса (скриншот выше). Причем добавлять этот самый тег его об этом вроде никто и не просит, но, тем не менее, он это делает.
И все бы ничего, но так уж получается, что этот самый тег стоит первый в очереди и некоторые социальные сети которые не дают возможность выбора изображений берут для создания поста (когда вы жмете кнопку поделиться) именно его, а это в большинстве случаев как минимум не красиво.
Конечно это не ошибка разработчика плагина, ведь возможно кому то это будет полезно, но я все же предпочитаю от этого избавиться. Так вот, чтобы убрать повторяющийся метатег og:image, необходимо всего лишь внести небольшие изменения в настройки плагина mAvik Thumbnails. Для этого на вкладке «Контекст» необходимо поставить переключатель «Добавлять мета-тег og:image» в положение «Не добавлять», после чего дублирующийся метатег og:image будет удален:
На этом разметка страницы (в частности материала Joomla) при помощи протокола Open Graph закончена, как видите, тут нет ничего сложного и не нужно использовать какие либо дополнительные плагины, которые еще неизвестно что могут добавить в код страницы.
Результаты тестирования
Чтобы показать вам, как работают методы, которые описаны в статье, я создал тестовый блог. На блоге сделал несколько постов с 3-мя изображениями в каждом, добавил кнопки «Мне нравится». Протестировал работу кнопок до Open Graph и после.
Тест №1. Результат работы кнопки «Мне нравится» на блоге без тегов Open Graph и плагина All in One SEO Pack.
Тест №2. Результат работы кнопки «Мне нравится» на блоге после установки плагина Facebook Open Graph Meta.
Тест №3. Результат работы кнопки «Мне нравится» на блоге после настройки тегов Open Graph вручную.
Результаты говорят сами за себя. Желаю успешной настройки тегов Open Graph Facebook на вашем блоге. Применяйте шаринг профессионально и по максимуму.
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.
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.
JavaScript
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()
Аналитика социальных сетей
Этой ошибкой указывает, что, если вы собираетесь использовать их аналитический инструмент Domain Insights, то нужно будет предоставить уникальный ID, привязанный к вашему аккаунту. Мета-тег должен выглядеть следующим образом:
<meta property="fb:app_id" content="your_app_id" />
У имеется нечто похожее — Twitter Card Analytics. рекомендует использовать следующий мета-тега, который должен содержать ваш логин в , привязанный к публикуемой веб-странице:
<meta name="twitter:site" content="@website-username">
Если вы не планируете пользоваться этими инструментами аналитики, то можно опустить эти мета теги для сайта, и это никак не скажется на отображении публикуемой веб-страницы в хронике или ленте .
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):
Настройки блога для Open Graph.
Нужно заметить, что большую роль играет тема, или шаблон блога, которая установлена на WordPress. Многие бесплатные шаблоны нуждаются в более расширенных настройках. Требуется установка дополнительных мета тегов в редактор — Заголовок (header.php).
В более современных, профессиональных платных шаблонах, достаточно будет добавить уточняющие настройки в специальные разделы или используемые SEO-плагины.
Неотъемлемым атрибутом таких анонсов, конечно же, является картинка, которая не только дополняет его, но и служит инструментом привлечения внимания к ним аудитории с соц.сетей.
В некоторых случаях, если на сайте постоянно используется видео-контент, вместо картинок можно генерировать в анонс видео-файлы.
Чтобы с самого начала не запутаться в настройках, необходимо придерживаться определенных условий.
Первое — в обязательном порядке, при редактировании любого поста на блоге, использовать опцию «Миниатюра записи» или в новой редакции WordPress — «Изображение записи«. Находится она в Консоли WordPress, справа-внизу от редактора записи или страницы.
Можно, исходя из особенностей некоторых социальных порталов, использовать пропорции — соотношения ширины к высоте, как 2:1. Это нужно для того, чтобы в ленте новостей соц.сетей рисунок не обрезался. В любом случае — нюансы существуют на каждом социальном портале.
Кстати, чем больше запретов в этом файле, тем больше проблем Вы будете создавать для своего блога. Это проверенный факт. Если Вы уже подключили к сайту SSL-сертификат, вид файла robots.txt должен выглядеть вот таким образом:
User-agent: * Disallow: /wp-admin/ Disallow: /*/feed Host: https://ваш-домен.ru Sitemap: https://ваш-домен.ru/sitemap.xml User-agent: Googlebot-Image Allow: /wp-content/uploads/ User-agent: YandexImages Allow: /wp-content/uploads/ User-agent: Twitterbot Allow: /wp-content/uploads/
Если же, до сих пор используете http подключение, в четвертой и пятой строке оставляем старую редакцию:
Host: ваш-домен.ru Sitemap: http://ваш-домен.ru/sitemap.xml
Не забудьте подставить в файл имя своего домена.
Более подробно о подключении сертификата SSL, читайте на основном блоге: «Установка SSL-сертификата SSL Let’s Encrypt от Comodo на WordPress».
Дополнительные атрибуты Open Graph
Разберем следующие виды атрибутов, которые не обязательны и зависят от спецификации вашего объекта.
- og:audio — URL звукового файла, который относится к описываемому объекту;
- og:determiner — слово, которое должно быть перед названием объекта в предложении. Оно может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать;
- og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US;
- og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта;
- og:site_name — название сайта, на котором размещена информация об объекте;
- og:video — URL видео файла, который относится к описываемому объекту.
Лучше покажу примеры оформления микроразметки Open Graph у популярных сайтов:
Пример Open Graph СМИ Republic
Всем советую многое подчеркнуть из того, как публикуют СМИ ссылки на новости в группах и пабликах.
Подытожим: все еще есть над чем работать
Понимание того, как выглядит средняя веб-страница, дает представление о текущих тенденциях. И тут же возникают вопросы.
Почему вебмастера редко прописывают alt для изображений? Почему заголовки h1 есть только на 60% страниц? Почему title и description заполняют далеко не все? Почему не спешат внедрять микроразметку JSON-LD? А ведь это базовое SEO…
Хочется сказать, что все это неважно — все-таки анализировались страницы из ТОП-20 Google. То есть Google считает их в общей массе авторитетными — даже без «альтов»
Но не забываем, что SEO — это комплекс факторов. Мы рассмотрели лишь малый технический аспект. Даже если взять только оптимизацию сайта, то там более 60 разных работ. А еще ссылки, упоминания, локализация, поведенческие факторы…
Создаем метатеги страниц для социальных сетей. Советы от профессионала
Смысл использования метатегов для социальных сетей заключается в контроле отображения вашего контента в новостных лентах. Вы должны управлять тегами сами, а не позволять Facebook, Twitter и другим социальным платформам генерировать title, description и изображение самостоятельно.
Общие рекомендации:
Адаптируйте или переработайте неиспользованные идеи тайтлов, сделав их заголовками постов в социальных медиа.
Настройте изображение и содержание контента в соответствии с уникальными интересам аудитории каждой социальной сети.
В твиттере используйте сразу две разметки – Open Graph и Twitter Card. Twitter по умолчанию предлагает разметку Open Graph, но если судить по нашему опыту, вы получаете больший контроль над результатом, используя две разметки одновременно.
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 |
Как общаться с технической поддержкой о мета-тегах
Чтобы не тратить зря время, не упоминайте расширение ПРОДЗЕН и термины «красная рожица», «грустная мордочка», «значок робота» и т.п.
Сотрудники ТП не могут комментировать то, как работает расширение, не знают и не должны знать, что оно показывает и т.п. Поэтому упомянув расширение, вы гарантированно получите отказ его обсуждать, иногда даже с советом его не использовать.
Не ссылайтесь только лишь на наличие самого мета-тега.
Если статья новая и не получает показов — так и напишите.
Если публикация опубликована больше суток назад, успешно набирала просмотры, а потом внезапно получила мета-тег, посмотрите график конкретной статьи в метрике — там будет видно, что в какой-то момент резко прекратились просмотры. Приведите скриншот этого графика.
Т.е. основным в вашем письме должно быть то, что возникли проблемы с публикацией. Про мета-тег можно вообще не упоминать, или упоминать в качестве дополнения.
К сожалению, это может не помочь. Если менеджеры, помогающие участникам программы Нирвана, ещё готовы разбираться с проблемами, то сотрудники обычной поддержки очень часто начинают писать стандартные отписки, не сильно вникая в их смысл.
Иногда можно подождать, пока ваше обращение будет отмечено как завершённое и написать ещё раз — если повезёт, вам ответит сотрудник, настроенный как-то помочь вам.
Так же можно обратиться за помощью в официальные группы Дзена в ВК или в телеграме.
Если ничего добиться не удастся, то остаётся только грустить вместе с грустным роботом.
Типы
Следующие типы используются при определении атрибутов в протоколе Open Graph.
Тип | Описание | Литерал |
---|---|---|
Представляет логическое значение true или false | true, false, 1, 0 | |
DateTime представляет собой временное значение, состоящее из даты (Год, месяц, день) и дополнительного компонента времени (часов, минут) | ISO 8601 | |
Типа, состоящий из ограниченного множества постоянных строковых значений (перечисление членов). | Строковое значение, которое является членом перечисления | |
64-разрядное число с плавающей точкой | Все литералы, которые соответствуют следующим форматам: 1.234 -1.234 1.2e3 -1.2e3 7E-10 |
|
32-разрядное целое число с плавающей запятой. Во многих языках целое число, по сравнению с 32-бит, становятся числом с плавающей запятой, поэтому мы ограничиваем протокол Open Graph для удобного использования нескольких языков. | Все литералы, которые соответствуют следующим форматам: 1234 -123 |
|
Последовательность Unicode символов | Все литералы состоят из символов Unicode без каких-либо символов Escape-Последовательности | |
Последовательность Unicode символов, которые идентифицируют Интернет-ресурс. | Все допустимые URL-адреса, которые используют протокол http:// или https:// |
Совмещаем теги
Ничего страшного, если вы задействуете лишние мета теги для сайта интернет магазина. Избыток информации еще никому не вредил, разве что это может негативно сказаться на весе HTML-документа. Но для нашей цели и исключительно ради краткости мы можем руководствоваться тем, что позволяет заменять мета-теги 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"> <meta name="twitter:card" content="summary_large_image">
Универсальные рекомендации для использования картинок: старайтесь, чтобы размер картинок был не менее 1200 на 630 пикселей при соотношении сторон 1.91:1, но при этом не забывайте про ограничение в 1Мб.
Introduction
The Open Graph protocol enables any web page to become a
rich object in a social graph. For instance, this is used on Facebook to allow
any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined
together, there isn’t a single technology which provides enough information to
richly represent any web page within the social graph. The Open Graph protocol
builds on these existing technologies and gives developers one thing to
implement. Developer simplicity is a key goal of the Open Graph protocol which
has informed many of the technical design decisions.
Open Graph 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.
Основные Метаданные
Что бы превратить вашу web-страницу в графические объекты, вам нужно добавить базовые метаданные к вашей странице. Мы основываемся на первоначальной версии протокола
RDFa это означает что вы будите размещать дополнительные теги в вашей web-странице. Четыре основных свойства для каждой страницы:
- — Название вашего объекта, как он должен отображаться в графе, например фильм, «The Rock».
- — , например, «video.movie». В зависимости от типа, можно задать другие свойства которые могут быть необходимы.
- — URL-адрес изображения, который должен определить Ваш объект в графе для изображения.
-
— Канонический URL-адрес объекта, который будет использоваться в качестве его
постоянного ID в графе, например, «http://www.imdb.com/title/tt0117500/».
В качестве примера ниже приводится разметка протокола Open Graph для фильма «The Rock» на
IMDB:
Следующие свойства являются необязательными для любого объекта и, как правило, рекомендуется:
- — URL-адрес звукового файла, который сопутствует этому объекту.
- — Одно-два предложения описания вашего объекта.
- — Слово, которое появляется перед названием этого объекта в предложении. Тип (a, an, the, «», auto). Если выбрано , потребитель данных должен выбирать между «a» или «an». По умолчанию — » » (пусто).
-
— Тег локации.
Формат . По умолчанию . - — Тип других локалей на этой странице.
- — Если ваш объект является частью большого web-сайта, название, должно отображаться на всех страницах сайта. Например, «IMDb».
- — URL-адрес видео-файла, который сопутствует этому объекту.
Например (line-break исключительно в демонстрационных целях):
Схему RDF (в Turtle)
можно найти на ogp.me/ns.
Как внедрять Open Graph
Вручную
Чтобы добавить разметку вручную в исходном коде страниц сайта, укажите следующую строку в самом начале html-страницы:
Это префикс, который указывает на то, что в коде страницы будет использоваться протокол Open Graph. После этого разместите нужные метатеги между тегами <head> и </head>.
С помощью плагинов
Практически для всех популярных CMS есть уже готовые плагины, которые позволяют добавлять разметку быстро и удобно (без необходимости разбираться в коде и синтаксисе разметки).
По ссылкам ниже можно найти плагины для вашей CMS:
- WordPress.
- Joomla.
- Битрикс.
- Opencart.
- Drupal.
- .
А если у вас, например, сайт на Tilda, вам не нужно искать плагин или внедрять разметку вручную. В конструкторе по умолчанию встроена оптимизация под соцсети.
Пример внедрения Open Graph на WordPress
Используем из самых популярных плагинов для Вордпресса — All in One SEO Pack.
Установите плагин (если он у вас еще не установлен), перейдите в раздел «Управление модулями». Найдите модуль «Социальные мета» и активируйте его.
После активации перейдите в модуль «Социальные мета» в меню плагина:
Укажите настройки:
- главной страницы;
- изображений;
- типов данных;
- укажите отдельные настройки для Twitter.
Это общие настройки, которые будут применяться ко всем страницам. Если вы хотите настроить разметку отдельно для какой-нибудь статьи, перейдите на вкладку «Социальные настройки».
Здесь есть поля, которые соответствуют основным мета-тегам OpenGraph (заголовок, описание, изображение и т.д.). Заполните их и сохраните. Также здесь можно воспользоваться отладчиком от Facebook для проверки корректности разметки.
Вот вид размеченной ссылки в ленте Facebook:
Примерно по такому же принципу работают другие плагины.
Социальная сеть ВКонтакте не берет краткое описание (description)
После того как Open Graph будет внедрен наверняка каждый заметит одну неприятную особенность при публикации записей в социальную сеть ВКонтакте. Дело в том, что именно эта сеть при формировании превьюшки (сниппета) упорно не желает брать в краткое описание статьи указанное в поле description. Все остальные соц. сети это делают, а вот ВКонтакте отказывается.
Чтоб понять причину подобного явления я решил задать вопрос в службу поддержки, на что получил вполне доходчивый ответ:
Получается ВКонтакте намеренно перестал брать краткое описание в свой сниппет еще с осени 2016 года. Жаль конечно, но что поделаешь. Так что если вы заметили подобную проблему знайте что это не ваша вина, а некие запреты со стороны социальной сети.
В заключение хочу отметить, что кроме протокола Open Graph существует множество других форматов микроразметки, в частности Schema.org, о которой мы говорили в статье «Микроразметка Schema.org для материалов Joomla 3».
Информация о странице
Директива указывает имя веб-приложения, представленного в документе.
Если страницу создано не веб-приложение, то метатег можно не использовать.
Эта директива содержим имя автора страницы
Можно указать только одно имя.
Этот метатег содержит описание страницы
Метатег может использоваться различными поисковыми системами при индексировании вашей веб-страницы для улучшения поиска. Обычно описание, содержащееся в метатеге, представляет собой краткое резюме, которое отображается в главном заголовке страницы/сайта в результатах выдачи поисковой системы. Обычно использует только первые 20-25 слов вашего описания.
Данный метатаег содержит название программного обеспечения, используемого для создания документа, используется только для страниц с автоматической разметкой.
Эта директива устанавливает ключевые слова для поисковых систем (разделенные запятой):
Метатег иногда используется поисковыми системами, чтобы знать поисковый запрос, на который относиться к вашей веб-странице.
Разумно не добавлять слишком много слов, так как большинство поисковых систем, которые используют этот метатег для индексирования, будут индексировать только где-то первые 20 слов. Убедитесь, что вы вставляете самые важные ключевые слова.