Пуленепробиваемая разметка open graph

Advanced Open Graph tags

The Open Graph tags above are the ones you really need to know (og:description not so much, but it is useful). There are other, more advanced, tags you can use to provide even more in-depth specifications.

• og:locale – defines the language, American English is the default
• og:site_name – if the page (object) you are sharing is part of a larger network
• og:audio or og:video – to add additional audio or video files to your object
• fb:app_id – for linking to a Facebook application (e.g., FB Comments) with the object

Check Open Graph tags

To make life easier, Facebook has created a tool called Sharing Debugger. It has two very helpful functionalities.

First, when you type in the link you want to check, it returns any errors and suggestions for OG tags, if there are any. You also can check what the og:image looks like, what your description is, and so on.

Second, it clears the Facebook cache. Imagine this: you post a link to Facebook, but then you see a mistake in the thumbnail, so you go back to your site and adjust the OG tags, and you post it again on Facebook.

Probably, nothing will happen. The thumbnail will stay the same. This is because of the cache. The Facebook Sharing Debugger will refresh the cache on your links after any adjustments, so remember to use it each time.

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»

Выжимка

• Schema.org — большой словарь, с помощью которого можно описать данные любого типа и передать поисковым роботам детальную информацию о продуктах, услугах и других сущностях.
• Микроразметка улучшает внешний вид сниппета в поисковой выдаче. Сниппет выглядит привлекательно и информативно → растет CTR.
• Продвигаетесь в Яндексе? Реализуйте микроразметку с помощью синтаксиса микроданных или RDFa.
• Если продвигаетесь только в Google — воспользуйтесь рекомендацией поисковика и размечайте данные в JSON-LD.
• В Google можно и проще. Маркер данных в Search Console поможет реализовать разметку в несколько кликов (без кода, плагинов или сторонних сервисов).
• Не пишите код вручную — используйте генераторы. Это сэкономит кучу времени и убережет от ошибок.
• Проверяйте ошибки с помощью валидаторов.

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

Object Types

In order for your object to be represented within the graph, you need to
specify its type. This is done using the property:

When the community agrees on the schema for a type, it is added to the list
of global types. All other objects in the type system are
CURIEs of the form

The global types are grouped into verticals. Each vertical has its
own namespace. The values for a namespace are always prefixed with
the namespace and then a period.
This is to reduce confusion with user-defined namespaced types which always
have colons in them.

Namespace URI: https://ogp.me/ns/music#

values:

• — >=1 — The song’s length in seconds.
• — —
  The album this song is from.
• — >=1 —
  Which disc of the album this song is on.
• — >=1 —
  Which track this song is.
• — —
  The musician that made this song.

• — — The song on this album.
• — >=1 —
  The same as but in reverse.
• — >=1 —
  The same as but in reverse.
• — —
  The musician that made this song.
• — —
  The date the album was released.

• — Identical to the ones on
• — — The creator of this playlist.

music:creator — profile — The creator of this station.

Namespace URI: https://ogp.me/ns/video#

values:

• — —
  Actors in the movie.
• — — The role they played.
• — —
  Directors of the movie.
• — —
  Writers of the movie.
• — >=1 —
  The movie’s length in seconds.
• — —
  The date the movie was released.
• — —
  Tag words associated with this movie.

• — Identical to
• — —
  Which series this episode belongs to.

A multi-episode TV show.
The metadata is identical to .

A video that doesn’t belong in any other category.
The metadata is identical to .

These are globally defined objects that just don’t fit into a vertical but
yet are broadly used and agreed upon.

values:

— Namespace URI:

• — —
  When the article was first published.
• — —
  When the article was last changed.
• — —
  When the article is out of date after.
• — —
  Writers of the article.
• — — A high-level section name. E.g. Technology
• — —
  Tag words associated with this article.

— Namespace URI:

• — — Who wrote this book.
• — —
  The ISBN
• — — The date the book was released.
• — —
  Tag words associated with this book.

— Namespace URI:

• — — A name normally given to an individual by a parent or self-chosen.
• — — A name inherited from a family or marriage and by which the individual is commonly known.
• — — A short unique string to identify them.
• — (male, female) — Their gender.

— Namespace URI:

No additional properties other than the basic ones.
Any non-marked up webpage should be treated as website.

Мета тег link rel canonical

Тег link rel=”canonical” – это способ сообщить поисковым системам, какую версию страницы вы считаете основной и хотели бы, чтобы её индексировали поисковые системы и находили люди.

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

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

Выбранный URL сканируется чаще остальных, и риск штрафа практически отсутствует, но такое положение дел далеко не оптимально.

Ещё одно преимущество заключается в том, что канонизация страницы упрощает отслеживание статистики, связанной с контентом.

Кроме всего прочего, Джон Мюллер также упоминает, что использование rel=canonical для дублированного контента помогает Google объединить все ваши линкбилдерские усилия и передать сигналы ссылок со всех версий страницы на предпочтительную.

Использование тега canonical

Страницы со схожим контентом на одну и ту же тему.
Дублированный контент, доступный по разным URL-адресам.
Разные версии одной и той же страницы, различающиеся по ID или другим URL-параметрам, не влияющим на контент.
Осторожно используйте мета-тег canonical на схожих страницах. Если две страницы, объединённые им, достаточно сильно отличаются в плане контента, поисковая система может просто проигнорировать ваш тег.

оптимизация сайта под социальные сети — Open Graph

Англ. Social media optimization — SMO — и есть оптимизация сайта под социальные сети. (не путать с микроразметкой shema.org)

Комплекс важных мер целиком направленных на привлечение на веб площадку посетителей из социальных медиа: страниц, групп или блогов социальных сетей и прочая…

Если говорить не распыляясь, то техническая составляющая задачи SMO (а по теме этого поста — Open Graph) направлены на то, чтобы:

1 — дать возможность посетителю как можно легче делиться понравившимся контентом (как добавить на сайт кнопки социальных сетей кнопку поделиться
Как установить на страницы сайта кнопки социальных сетей — подробная инструкция)…

2 — сделать так, чтобы анонс публикации был максимально приближен к задумке автора (выгода со всех сторон))

Структурированные метатеги

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

Например, og:image может содержать следующие метаданные:

• og:image:url — URL изображения, описывающего объект (соответствует og:image).
• og:image:secure_url — дополнительный URL, если страница открывается по протоколу HTTPS.
• og:image:type — MIME-тип изображения (формат изображения стандарта 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 содержит только некоторые метаданные из вышеперечисленных:

<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

og:title — заголовок страницы…

og:type — содержимое, контент…

og:url — адрес страницы…

og:site_name — имя сайта.

og:image — картинка страницы.

Пара дополнений относительно og:image.

Код отрабатывает таким образом, что, в качестве изображения поста, будет установлена первая картинка статьи — обычно это миниатюра (thumbnail) текущей записи. Размеры картинки должны быть более 200х на 200px, в противном случае Ф.Б её не распознает!

Что примечательно: если миниатюра записи отсутствует, то будет использовано любое первое изображение текущей записи. А вот коли в посте ни того, ни другого нет — будет выводиться дефолтное изображение, ссылку на которую требуется организовать в переменной $default_image. Обычно указывают путь к изображению логотипа сайта: 250 — 250px.

fb:admins — суда нужно прописать свой юзер ID ФБ. Как его узнать, читайте… Также можно эту строку закомментировать: использование её отработки необязательно.

Всё как бы хорошо! однако, если задуматься и задаться таким резонным вопросом: а если кто-то поделится архивом рубрики или метки моего сайта? или Главной страницей? какая миниатюра прикрепится к анонсу?..

В этом случае социальная сеть возьмёт самое первое изображение на странице; т.е. возьмёт фото (миниатюру) самой последней публикации из архива! — это не очень хорошо, так как публикации время от времени пополняются, а значит и изменяются миниатюры, и более того миниатюра некой статьи может не соответствовать прямой тематике Архива!… а следовательно, в соцсетях возникает каша из изображений…

Чтобы этого избежать, предлагаю, страницы архивов: Главной стр. архивов Рубрик, Тегов и авторов снабдить своим изображением (возможно, с помощью условных тегов, задавать своё изображение для каждого архива. Почитать подробнее о работе с условными тегами WP Как найти и убрать циклические ссылки… Работа с условными тегами).

Массивы

Если тег может иметь несколько значений, просто поставьте несколько таких тегов на вашей странице. Приоритет тегам отдается с верху вниз, при возникновении конфликтов.

Пишите структурированные свойства тегов после того, как вы объявите родительский тег. Когда один из родительских элементов обрабатывается, его структурированные свойства выполняются последовательно.

Пример:

На приведенном примере 3 изображения, отображаться они будут так: первое изображение имеет размер px, второе изображением не имеет указанных размеров и третье изображением имеет размеры px в высоту.

Basic Metadata

To turn your web pages into graph objects, you need to add basic metadata to
your page. We’ve based the initial version of the protocol on
RDFa which means that you’ll place
additional tags in the of your web page. The four required
properties for every page are:

• — The title of your object as it should appear within the graph,
  e.g., «The Rock».
• — The of your object, e.g., «video.movie». Depending on
  the type you specify, other properties may also be required.
• — An image URL which should represent your object within the
  graph.
• — The canonical URL of your object that will be used as its
  permanent ID in the graph, e.g., «https://www.imdb.com/title/tt0117500/».

As an example, the following is the Open Graph protocol markup for The Rock on
IMDB:

The following properties are optional for any object and are generally
recommended:

• — A URL to an audio file to accompany this object.
• — A one to two sentence description of your object.
• — The word that appears before this object’s title
  in a sentence. An of (a, an, the, «», auto). If is
  chosen, the consumer of your data should chose between «a» or «an».
  Default is «» (blank).
• — The locale these tags are marked up in.
  Of the format . Default is .
• — An of other locales this page is
  available in.
• — If your object is part of a larger web site, the name which
  should be displayed for the overall site. e.g., «IMDb».
• — A URL to a video file that complements this object.

For example (line-break solely for display purposes):

The RDF schema (in Turtle)
can be found at ogp.me/ns.

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

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

Facebook tags

og:title

As you might guess, this is how you define your content’s title. It serves a similar purpose as the traditional meta title tag in your code. In fact, if Facebook doesn’t find the og:title tag on your page, it uses the meta title instead.

Keep in mind that the text shown on a Facebook feed is in bold and extremely eye-catching. It must be compelling, just like a good post title.

There is no limit on the number of characters, but it’s best to stay between 60 and 90. If your title is longer than 100 characters, Facebook will truncate it to only 88!

Example:

<meta property=”og:title” content=”Your eye-catching title here” />

og:url

This is how you set the canonical URL for the page you are sharing. What this means is that you define one page that all your shares will go to. It’s useful if you happen to have more than one URL for the same content (for example, using parameters). Important note: URL provided is not shown on Facebook newsfeed, only domain is visible.

Example:

<meta property=”og:url” content=”http://www.yourdomain.com” />

og:type

This is how you describe the kind of object you are sharing: blog post, video, picture, or whatever. The list to choose from is long. Here are some examples:

Web based:

• website
• article
• blog

Entertainment:

• book
• game
• movie
• food

Place:

• city
• country

People:

• actor
• author
• politician

Business:

• company
• hotel
• restaurant

You can see the full list of types .

This tag is important if your page has a “Like” button and represents a real-life object (like a book or a movie). It determines if your content will appear in a user’s interest section of her profile in the event she “Likes” it.

In most cases, you will use the “website” value, since what you are sharing is a link to a website. In fact, if you don’t define a type, Facebook will read it as “website” by default.

Example:

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

og:description

This meta data descriptor is very similar to the meta description tag in HTML. This is where you describe your content, but instead of it showing on a search engine results page, it shows below the link title on Facebook.

Unlike a regular meta description tag, it won’t affect your SEO. (So, don’t spend too much time figuring out how to sneak in keywords.) However, it’s a good idea to make it compelling because you want people to click on it.

You are not limited to a character count, but it’s best to use around 200 letters. In some cases, depending on a link/title/domain, Facebook can display up to 300 characters, but I suggest treating anything above 200 as something extra.

Example:

<meta property=”og:description” content=”Your entertaining and descriptive copy here, if your meta description is good, use it.” />

og:image

This is the most interesting Open Graph tag for many marketers because a picture always helps content stand out. This is how you ensure that a particular thumbnail will be shown when your page is shared. It can be very helpful for your conversion rates.

Make sure you set the og:image you choose, otherwise Facebook will show something stupid like an unwanted ad banner scraped from the page, or nothing at all (as below). We definitely don’t want that!

It’s important to remember that if your page is static and you don’t use any sort of content management system (CMS) (like, e.g., WordPress), you need to change the og:image manually for each of your pages. If your website is controlled with a CMS and you installed the relevant plugin, the og:image tags are assigned automatically for each page. Look for the list of plugins further down.

The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don’t exceed the 5MB size limit.

If you use an image that is smaller than 400 pixels x 209 pixels, it will render as a much smaller thumbnail. It’s nowhere nearly as eye-catching.

Keep in mind that the picture you use as an Open Graph image can be different from what you have on your page. Why wouldn’t you leverage that opportunity to stand out even more? For example, if your title is good, but the picture you are using is not very exciting (not an infographic or a good looking person, etc.), consider using an image with a good line or two of copy instead (see example below).

One thing you need to remember if you do this: lace your text, or the most significant part of it, in the middle of the image. This matters because Facebook trims the sides of thumbnails.

Example:

<meta property=”og:image” content=”http://www.yourdomain.com/image-name.jpg” />

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

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

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

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

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

Немного про размер изображений

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

Разработчики Facebook в рекомендациях указывают, что размер изображения должен быть пропорционален 1,91:1, чтобы избежать для него обрезания. И минимальным размером считают 1200×630 пикселов.

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

Посему зачастую размер изображения делают равным 968×504 пикселов. Получается хорошо и универсально. Но конечный выбор размера изображения остаётся за Вами.

Взаимодействие с поисковыми системами

Иногда требуется запретить или разрешить роботам поисковых систем обрабатывать ту или иную страницу. Метатег определяет политику обработки страницы поисковыми роботами. Вот несколько примеров:

• — разрешено индексировать текст и ссылки на странице, аналогично ;
• — не индексировать текст страницы;
• — не переходить по ссылкам на странице;
• — запрещено индексировать текст и переходить по ссылкам на странице, аналогично ;
• — не показывать ссылку на сохраненную копию на странице результатов поиска.

Как и предыдущий тег, определяет политику обработки страницы поисковым роботом, но только для Google:

Проверяет веб-сайт на наличие доступа к панели веб-мастера Google (Google Webmaster Tools):

Отключает :

Запрещает браузеру Google Chrome переводить веб-страницу:

Подробности работы с Google описаны в .

Яндекс

Определяет политику обработки страницы роботом Яндекс:

Проверяет веб-сайт на наличие доступа к сервису Яндекс.Вебмастер:

Подробности работы с Яндекс описаны на странице помощи для веб-мастеров.