Что такое разметка open graph и как ее внедрить без программиста

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.

Синтаксис разметки Open Graph

Полная документация по разметке Open Graph доступна в нескольких источниках:

  • ogp.me — англоязычная документация;
  • ruogp.me — документация на русском языке.

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.

Также есть руководства по применению Open Graph для отдельных соцсетей:

По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.

Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.

Обязательные свойства

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

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

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

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

Опциональные свойства

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

Вот так description отображается в публикациях в Фейсбуке:

А так — в Телеграме:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

Синтаксис разметки Open Graph

Полная документация по разметке Open Graph доступна в нескольких источниках:

  • ogp.me — англоязычная документация;
  • ruogp.me — документация на русском языке.

Более сжато и доступно информацию о микроразметке можно почитать в справке Яндекс.Вебмастера. Здесь изложена основная информация по разметке (кем разработана, где используется), а также документация по основным тегам, с помощью которых вы можете реализовать разметку на своем сайте.

Также есть руководства по применению Open Graph для отдельных соцсетей:

По сути, микроразметка — это набор мета-тегов, которые передают соцсетям нужную информацию и указывают, какой контент использовать при репосте и как его отображать.

Разметка Open Graph основана на синтаксисе RDFa (подробно о синтаксисах микроразметки мы писали). Для разметки прописываются дополнительные теги <meta> в разделе <head>. Внутри тега <meta> указываются атрибуты property и content. Атрибут property имеет обязательные и опциональные свойства. Рассмотрим их.

Обязательные свойства

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

Как быть с размерами картинок

У каждой соцсети есть свои требования к размеру картинок. По-хорошему, под каждую соцсеть нужно готовить отдельное изображение с подходящими размерами. Например, вы публикуете на сайте статью, которую планируете репостить в три соцсети: Твиттер, Фейсбук и ВКонтакте. Для каждой соцсети готовите отдельную картинку. Чтобы каждая соцсеть загрузила именно «свою» картинку, необходимо указать в разметке Open Graph следующие теги:

При репосте во ВКонтакте соцсеть учтет только тег vk:image, а остальные проигнорирует. Точно так же поступят и остальные соцсети.

Есть еще один вариант — задать один размер картинки для всех соцсетей. Для этого понадобятся теги og:image:width и og:image:height. Укажем с их помощью размер картинки для Фейсбука:

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

На скриншоте ниже в публикации для Фейсбук отобразилась полная картинка:

А при репосте во ВКонтакте картинка обрезалась под параметры соцсети:

Опциональные свойства

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

Вот так description отображается в публикациях в Фейсбуке:


А так — в Телеграме:

А в Телеграме корректно подтягивается содержимое тега og:site_name:

Больше информации об основных и дополнительных мета-тегах разметки — в официальной документации OpenGraph.

Так выглядит фрагмент кода страницы с внедренной разметкой Open Graph:

основные метаданные 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 Как найти и убрать циклические ссылки… Работа с условными тегами).

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.

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

Передача реферальных данных

При использовании HTTPS реферальные данные по умолчанию не передаются. Это улучшает защиту сайта, но мешает собирать веб-аналитику. С помощью метатега определяется политика передачи реферальных данных. Атрибут принимает различные значения. , например, указывает, что передаётся полная ссылка на страницу.

Исключение дублированного контента

Если при анализе сайта Google находит две версии одной страницы, каждая из которых имеет свой URL-адрес, будет применён штраф за дублирование контента (duplicate content). Используя , вы говорите поисковикам: «Эй, это наше художественное видение!». Таким образом, штрафных мер не будет.

Ссылка на AMP-версию страницы.

Ссылка на версию веб-страницы, которая переведена на другой язык. Язык текущей страницы указывается следующим образом:

С помощью также указывается RSS-версия страницы.

Аналогично на примере канала Atom.

Favicon

Ссылки на иконки веб-страницы в нескольких размерах. Проверить правильность описания иконок сайта или сгенерировать новое на основе готового изображения можно на специальных сайтах, таких как realfavicongenerator.net

Обратите внимание, что некоторые новые браузеры требуют иной способ указания этой опции. Например:

Windows Metro

Код для Metro, в отличие от предыдущих случаев, требуется сохранить в файл в корне сайта.

Предварительная загрузка

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


Браузер определяет в фоновом режиме IP-адрес указанного домена и, когда потребуется запросить что-либо с ресурса на этом домене, сэкономит время на выполнении .

Похож на , но, кроме запроса DNS, браузер предварительно устанавливает TCP и TLS соединение.

Указывает браузеру ресурс, который требуется сохранить в кэш. Однако загрузка выполняется с низким приоритетом и может быть проигнорирована. Это зависит от обстоятельств. Например, от качества сетевого соединения или для Firefox наличия достаточного для загрузки времени простоя браузера.

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

Браузер загружает указанную страницу, строит DOM, применяет CSS и выполняет JavaScript. Как если бы мы открыли её в скрытой вкладке. Но при использовании требуется уверенность, что указанная страница будет загружена, иначе перечисленные операции будут выполнены зря.

По сути, это аналог , но с гарантированной загрузкой. Уже описан в спецификации, но поддерживается пока не всеми браузерами. На момент публикации этой статьи есть поддержка в Firefox, Chrome, Safari, Opera и Android Browser. Проверить актуальность информации можно на сайте .

Что такое Open Graph на практике

  • og:title — название страницы (длина в Facebook — до 95 символов);
  • og:type — тип контента на сайте (статья, фильм, песня или профиль человека);
  • og:image — адрес изображения, используемого в качестве превью (на Facebook минимальный размер составляет 50 х 50px, максимальный вес 5 МБ);
  • og:url — адрес страницы.

Open Graph мета-теги

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

В дополнение к 4 обязательным мета-тегам Open Graph есть дополнительные:

  • og:site_name — название сайта, на котором расположен сайт;
  • og:description — краткое описание (максимальная длина Facebook — 297 символов);
  • og:locale — язык, используемый на сайте и его местонахождение;
  • og:locale:alternate — Другие языки, в которых доступна страница (для мультиязычных сайтов). Вы можете указать несколько дополнительных языков.

Геолокации: широта, долгота, высота над уровнем моря:

<meta property="place:location:latitude" content="37.416382/">
<meta property="business:contact_data:email" content="info@mail.ru/">

Типы контента

На Facebook широкий спектр дополнительных типов данных, которые мы можем назначить для страницы (вы должны поместить их в тег «og:type»). Типы контента сгруппированы по категориям:

  • Виды деятельности: activity, sport;
  • Бизнес: bar, company, restaurant, cafe, hotel;
  • Группы: sports_league, sports_team;
  • Организации: band, government, non_profit, school, university;
  • Люди: actor, athlete, author, director, musician, politician, public_figure;
  • Места: city, country, landmark, state_province;
  • Развлечения: album, book, drink, food, game, product, song, movie, tv_show;
  • Веб-сайты: blog, website, article.

Для некоторых типов контента есть уникальные дополнительные маркеры. Например, тип «article» может определить дату публикации — «article:published_time» или категорию статьи «article:section». Для того, чтобы использовать это нужно немного магии в микро-разметке:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2015-05-20T10:31:27+00:00" />
<meta property="article:section" content="Алгоритм Google" />

Для получения дополнительной информации о дополнительных маркерах для типов контента нужно покопать документацию Open Graph (на русском).

JSON-LD

Теперь о деталях. Поговорим о том, как выглядит синтаксис и какие правила в нем действуют.

JSON-LD в базовом виде выглядит так:

Эта конструкция — своего рода каркас, который всегда есть по умолчанию (как теги <html>, <head> и <body> в структуре любой html-страницы). Внутри каркаса размещается непосредственно код микроразметки, который содержит необходимые данные: сущность, свойства и их значения.

Вот как выглядит разметка

Как делать разметку JSON-LD

Ручная разметка в JSON-LD (да и в любом другом синтаксисе) — рутинная задача, отнимает много времени и всегда остается риск допустить ошибку. Упростить задачу можно с помощью генераторов JSON-LD, вот несколько популярных:

Проверка валидности разметки

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

Для проверки кода используйте валидаторы от поисковиков:

Куда вставлять JSON-LD?

Если код валиден (валидатор не нашел ошибок) — можете смело добавлять разметку на сайт. Для этого код нужно вставить между тегами <head> и </head> на целевой странице.

Популярные схемы микроразметки

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

Итак, какие же схемы микроразметки являются самыми популярными и могут помочь SEO? Если верить данным, предоставленным компаниейSimilarTech, то получается, что самыми популярными в мире являются схемы:

  • Offer Schema

  • WebPage Schema

  • AggregateRating Schema

  • Product Schema

  • Review Schema

  • Rating Schema

  • SearchAction Schema

  • MobileApplication Schema

  • WebSite Schema

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

Offer Schema


На русский язык “offer” переводится “предложение”. Фактически, суть Offer Schema состоит в предложении чего-то. Например, сайт предлагает купить такую-то книгу или фильм, арендовать квартиру, посмотреть сериал онлайн, отремонтировать машину и т.п. Одно из таких предложений Вы можете увидеть на расширенном сниппете ниже.

Пример сниппета

Offer Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing.

WebPage Schema

WebPage Schema, как можно догадаться, является схемой микроразметки для отдельной веб-страницы. В Schema.org предполагается, что эта схема может “захватывать” некоторые присущие странице свойства (например, breadcrumb — хлебные крошки). Даже если свойство не выделено в блоке микроразметки с помощью itemscope, но находится на странице, то поисковые боты все равно “поймут”, что оно относится к блоку. Отметим, однако, что лучше задавать свойства отдельно.

WebPage Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

AggregateRating Schema

AggregateRating Schema — это средний рейтинг сайта или веб-страницы, который вычисляется на основе различных оценок и отзывов, оставленных клиентами и пользователями. Отображается в виде звездочек; рядом указывается количество отзывов, на основе которых вычислен рейтинг. Из этого следует, что AggregateRating Schema всегда используется в паре с Review Schema. Смотри расширенный сниппет ниже.

Пример сниппета

AggregateRating Schema является дочерней сущностью Rating.

Product Schema

Product Schema — популярная схема, которая используется для отображения конкретного товара или услуги. Например, это может быть пара ботинок, билет на концерт, автомобиль, серия сериала или фильм и т.п. Смотри расширенный сниппет ниже.

пример сниппета

Product Schema является дочерней сущностью Thing.

Review Schema

Review Schema — это схема для информативного отображения отзывов на товар, услугу, фильм, альбом, магазин, ресторан и т.п. Смотри расширенный сниппет ниже.

пример сниппета

Review Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Rating Schema

Rating Schema позволяет отобразить рейтинг сайта или веб-страницы в цифровом выражении. Например, рейтинг такого-то ресторана — 3,5 звезды, а такого-то магазина — 4 звезды. В отличие от AggregateRating, Rating вычисляется только на основе оценок и без учета отзывов.

Rating Schema является дочерней сущностью Intangible, которая, в свою очередь, закреплена за самой общей сущностью Thing. Rating — родительская схема для AggregateRating Schema.

SearchAction Schema

SearchAction Schema позволяет совершить поиск по ресурсу прямо из выдачи. Топовые сайты в США делают акцент именно на этой схеме (по даннымSimilarTech). Смотри расширенный сниппет ниже.

пример сниппета

SearchAction Schema является дочерней сущностью Action, которая, в свою очередь, закреплена за самой общей сущностью Thing. SearchAction — родительская схема для FindAction Schema.

MobileApplication Schema

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

Mobile Application Schema является дочерней сущностью SoftwareApplication, которая, в свою очередь, является дочерней сущность CreativeWork, а та закреплена за Thing.

WebSite Schema

WebSite Schema — схема для отображения набора связанных веб-страниц или других элементов, которые размещены на едином веб-домене и имеют один URL.

WebSite Schema является дочерней сущностью CreativeWork, которая, в свою очередь, закреплена за самой общей сущностью Thing.

Reviews

http-equiv=»Content-Type» content=»text/html;charset=UTF-8″>lass=»plugin-reviews»>

Quick and dirty, this plugin does the job. Activate it and the tags will start showing up in the markup and sharing on facebook becomes more completed. So that is great, that it requires no skill to get where you want to go.

But then you start realizing that a bunch of other stuff no longer works on your site like Woocommerce notices, or you start seeing any add_actions that you added to templates doubling up.

This plugin calls the full apply_filters on the_content when it renders which makes everything within that stack fire twice causing anomalies which are very hard to track down.

In closing: This plugin will probably work great for you if you have a vanilla site without too much customization. If you have a complex site with things like Woocommerce it’s not a good fit.

This plugin works, simply and as stated, across several sites with different structures, and is much appreciated… Hoping it is kept up to date, as things seem to be poised for some rapid change, both WordPress and social media…

Absolutely useless for beginners/newbees like me ..

Simple, but powerfull.

Had issues when posting my posts on facebook with Sumome this simple plugin did the job was able to get and post the featured image on facebook versus any other random image.so simple plugin no need any configuration. Thank you

Currently most SEO plugins render og metas, but most of them are not easy to customize, this plugin is perfect for customizing.

Thanks very much.


С этим читают