что это и как настроить – PR-CY Блог

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

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

О видах микроразметки и ее настройке для Яндекс и Google читайте в статье.

Кнопки «Поделиться в соцсетях» на сайте

Социальные кнопки вроде «Поделиться», «Лайкнуть», «Share», «Like» полезны, они есть почти на всех сайтах. Пользователям удобно отправлять крутые материалы себе в социальные сети, не копируя и вставляя ссылку, а веб-мастеры получают дополнительное распространение контента и увеличение трафика.

Кнопки для репостов в социальные сети

Такие кнопки обычно размещают в блоге. Думайте о пользователе: он скорее сохранит полезную статью, чем каталог товаров. Хотя и товарами могут делиться в соцсетях — к примеру, пользователи Pinterest отправляют позиции с красочными фотографиями, схемы или рецепты себе на доску, чтобы показать друзьям или вернуться к ним позже.

Поделиться пином с рецептом

Подробнее о том, как настроить кнопку «Pint it» и зачем вам Pinterest, в статье 
«Как бизнес-аккаунт в Pinterest влияет на ранжирование сайта»

Веб-мастеру недостаточно просто установить кнопку «Поделиться в соцсети» для того, чтобы пользователь делился контентом с красивым превью. Картинка или заголовок можгут отображаться не так, как задумано.

Распространённый сбой — превью содержит не тот графический контент. К примеру, новость в социальной сети сопровождается не тематическим фото обложки, а рисунком рекламного баннера, который также был на странице.

Неправильное отображение сниппета

Проблема устраняется просто — с помощью дополнительного стандарта микроразметки страницы Open Graph.

Протокол Open Graph от Facebook*

Open Graph разработан Facebook* для контроля текстово-графического анонса, который формируется при добавлении ссылки на ресурс в социальную сеть. С его помощью можно настроить изображение, которое должно появляться в превью, правильный заголовок, описание и ссылку.

Зачем нужен Open Graph

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

Разметку Open Graph поддерживают соцсети и мессенджеры ВКонтакте, Facebook*, Twitter, Pinterest, Одноклассники, Telegram, Skype и другие.

Разберемся, как настроить микроразметку для страницы.

Ключевые мета-теги Open Graph

Протокол Open Graph состоит из мета-тегов, их интегрируют в html-код страницы в .

Разберем основные теги:

• og:title – название материала;
• og:description – описание материала, заполнять не обязательно;
• og:image – ссылка на картинку, которая должна сопровождать материал;
• og:type – тип добавляемого материала, например, «article» – статья, «movie» – кино и т.д.;
• og:url – ссылка на саму веб-страницу, которая добавляется в социальную сеть.

<meta property="og:title" content="Заголовок">
    <meta property="og:image" content="<img =""="" src="https://site.ru...png" >"="">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://site.ru">
            <meta property="og:description" content="Описание ">

Пример рецепта с разметкой Open Graph

Есть и дополнительные теги для контактов, адреса, языка и других элементов, они перечислены на странице ogp. me. Иногда их использование тоже может быть оправдано: к примеру, если добавляемая страница содержит информацию о конкретном человеке, то можно дополнительно указать характеристики с помощью специального тега.

Настройка через json-ld:

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "Имя организации»",
"url" : "ссылка на сайт",
"sameAs" : [
"https://vk.com/адрес",
"https://www.pinterest.com/адрес",
"https://www.facebook.com/адрес",
"https://twitter.com/адрес"
]
}
</script>

Пример микроразметки страницы с помощью Open Graph

Пример практического использования протокола Open Graph — фрагмент html-кода, в котором использованы необходимые теги данной разметки. Подопытная страница – недавняя статья про статья про редиректы на PR-CY:

<meta property="og:title" content="Как настроить редирект самостоятельно">
    <meta property="og:image" content="<img =""="" src="https://s3-eu-central-1. amazonaws.com/news.pr-cy.ru/535312/7463.png" >"="">
    <meta property="og:type" content="article">
    <meta property="og:url" content="https://pr-cy.ru/news/p/7463-kak-nastroit-redirekt-samostoyatelno">
            <meta property="og:description" content="Самостоятельная быстрая настройка редиректа для Nginx и Apache, а также с помощью PHP, HTML, JavaScript и cPanel. Разбираем на примере переадресации с www-домена на домен без www и наоборот. ">

Отдельно можно настроить особенное отображение для соцсетей, к примеру, в аккаунте Twitter. Тогда к записи нужно добавить теги:

<meta property="twitter:card" content="summary_large_image">
    <meta property="twitter:url" content="https://pr-cy.ru/news/p/7463-kak-nastroit-redirekt-samostoyatelno">
    <meta property="twitter:title" content="Как настроить редирект самостоятельно">
            <meta property="twitter:description" content="Самостоятельная быстрая настройка редиректа для Nginx и Apache, а также с помощью PHP, HTML, JavaScript и cPanel.  Разбираем на примере переадресации с www-домена на домен без www и наоборот. ">
        <meta property="twitter:image" content="<img =""="" src="https://s3-eu-central-1.amazonaws.com/news.pr-cy.ru/535312/7463.png" >"="">
    <meta property="twitter:image:width" content="800">
    <meta property="twitter:image:height" content="400">
    <meta property="twitter:site" content="prcyru">

Сервисы для работы и плагины Open Graph

Для работы с Open Graph есть много сервисов — для автоматического создания кода для конкретной страницы, плагины в CMS и сервисы для проверки правильности заполнения.

Составить код разметки Open Graph автоматически

Автоматически сделать код можно через Генератор мета-тегов Open Graph. Заполните поля ссылками и нужным текстом и скопируйте готовый код для вставки на сайт.

Пример работы сервиса

Посмотреть, как конкуренты составили микроразметку, можно с помощью парсера мета-тегов Open Graph. Он проанализирует страницу на наличие Open Graph тегов:

Пример работы парсера

Если у владельца сайта нет особого желания разбираться с протоколом Open Graph, самостоятельно разбираясь в html-коде страницы, то на выручку ему могут прийти соответствующие плагины для популярных CMS:

• «Open Graph» или «Yoast SEO» для WordPress;
• «Phoca Open Graph» для Joomla;
• «Open Graph Meta» для Opencart.

Сервис проверки Open Graph

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

Фрагмент работы инструмента

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

Фрагмент анализа инструментом

Вам может быть интересно:
Как внедрить микроразметку информации Schema.Org на сайт, и что это дает?

*Компания Meta, которой принадлежит Instagram и Facebook, признана в России экстремистской организацией.

Open Graph — Вебмастер. Справка

Примечание. Раздел содержит информацию оригинального руководства.

Стандарт Open Graph разработан социальной сетью FacebookСервис, запрещенный на территории РФ.»}}»>. Он позволяет контролировать превью, которое формируется при публикации ссылки на сайт в социальных сетях, и передавать информацию другим интернет-сервисам.

Разметку Open Graph используют FacebookСервис, запрещенный на территории РФ.»}}»>, Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие сервисы. В Яндексе Open Graph используется для передачи данных в поиск Яндекса по видео.

Поиск по видео распознает не только основные, но и многие другие метатеги, например, разные типы видео (сериалы, клипы, фильмы и т. д.), ограничения по возрасту или стране просмотра. В зависимости от выбранного типа можно также указывать дополнительные свойства объекта: название фильма, номер эпизода сериала, дату выпуска телешоу и другие. Так как для поиска Яндекса по видео нужны метатеги, которых нет в документации от FacebookСервис, запрещенный на территории РФ.»}}»>, в сервисе используется свое расширение.

Кроме построения превью, стандарт Open Graph могут использовать разработчики приложений для публикации действий пользователей в FacebookСервис, запрещенный на территории РФ.»}}»>. В таких публикациях можно указывать действующее лицо (пользователя), объект, действие с этим объектом и название приложения, с помощью которого это действие было произведено.

1. Основные метатеги
2. Дополнительные метатеги
3. Структурированные метатеги
4. Массивы
5. Объекты
6. Пример использования

В стандарте Open Graph одна страница описывает только один объект — человека, компанию или продукт. Для этого объекта и указываются все данные. Чтобы передать информацию сервисам, необходимо в HTML-код (в элемент head) добавить следующие обязательные метатеги:

• og:title — название объекта.

• og:type — тип объекта, например, video.movie (фильм). Если у вас несколько объектов на странице, выберите один из них (главный). В зависимости от типа можно указать дополнительные свойства.

• og:image — URL изображения, описывающего объект.

• og:url — канонический URL объекта, который будет использован в качестве постоянного идентификатора.

<meta property="og:title" content="Мэрилин Монро"/>
<meta property="og:description" content="Американская киноактриса и певица"/>
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/2/27/Marilyn_Monroe_-_publicity.JPG/210px-Marilyn_Monroe_-_publicity.JPG"/>
<meta property="og:type" content="profile"/>
<meta property="og:url" content= "https://ru. wikipedia.org/wiki/Мэрилин_Монро" />

• og:audio — URL звукового файла, который относится к описываемому объекту.

• og:description — краткое описание объекта.

• og:determiner — слово (артикль), которое должно быть перед названием объекта в предложении. Может быть указано как: a, an, the, «», auto. Если в значении будет указано auto, сервис, распознающий разметку, будет выбирать между значениями a и an. Если значение не указано, перед названием объекта артикль будет отсутствовать.

• og:locale — язык описания объекта в формате язык_страна. По умолчанию используется значение en_US.

• og:locale:alternate — массив дополнительных языков, на которых доступно описание объекта.

• og:site_name — название сайта, на котором размещена информация об объекте.

• og:video — URL видео файла, который относится к описываемому объекту.

<meta property="og:audio" content="http://example.com/bond/theme. mp3" />
<meta property="og:description" 
  content="Sean Connery found fame and fortune as the
           suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />

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

Например, og: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" />

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

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image" content="http://example.com/rock2.jpg" />

Укажите структурированные метатеги после основного метатега.

<meta property="og:image" content="http://example.com/rock.jpg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:image" content="http://example.com/rock2.jpg" />
<meta property="og:image" content="http://example.com/rock3.jpg" />
<meta property="og:image:height" content="1000" />

где разметка означает, что на странице размещены 3 изображения: первое имеет размер 300×300, для второго изображения размер не указан, третье — 1000 пикселей в высоту.

Чтобы передать данные об объекте, необходимо указать его тип с помощью метатега og:type:

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

В этом примере указан один из глобальных (общепризнанных) типов. Остальные типы указываются согласно синтаксису CURIE:

<head prefix="my_namespace: http://example.com/ns">
<meta property="og:type" content="my_namespace:my_type" />
</head>

Глобальные типы объектов группируются в вертикали. Каждая вертикаль имеет свое пространство имен. Значение метатега og:type для пространства имен всегда состоит из названия типа объекта и уточнения (<тип объекта:уточнение>). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).

Музыка

Значения метатега og:type:

music.song

• music:duration (integer >=1) — длительность песни в секундах.

• music:album (music.album, массив) — название альбома.

• music:album:disc (integer >=1) — номер диска.

• music:album:track (integer >=1) — номер трека.

• music:musician (profile, массив) — имя исполнителя.

<html prefix="og: http://ogp.me/ns#
              video: http://ogp.me/ns/music#
              ya: http://example.com/vocabularies/" >
<head>
<meta property="og:type" content="music.song"/>
<meta property="music:song" content="Favorite song"/>
<meta property="music:duration" content="185"/><!--Длительность песни в секундах-->
</head>
...
</html>

music.album

• music:song — music.song — название песни.

• music:song:disc (integer >=1) — номер диска (соответствует значению music:album:disc).

• music:song:track (integer >=1) — номер трека (соответствует значению music:album:track).

• music:musician (profile) — исполнитель песни.

• music:release_date (datetime) — дата выпуска альбома.

music.playlist

• music:song — соответствует значению music.song, которое указано в music.album.

• music:song:disc

• music:song:track

• music:creator — автор плейлиста.

music.radio_station

Видео

Значения свойства og:type:

video.movie

• video:actor (profile, массив) — актеры.

• video:actor:role (string) — роли, которые исполняют актеры.

• video:director (profile, массив) — режиссер.

• video:writer (profile, массив) — сценарист.

• video:duration (integer >=1) — длительность фильма в секундах.

• video:release_date (datetime) — дата выхода фильма в прокат.

• video:tag (string, массив) — теги (слова, фразы), связанные с фильмом.

<html prefix="og: http://ogp.me/ns#
              video: http://ogp. me/ns/video#
              ya: http://example.com/vocabularies/" >
<head>
<meta property="og:type" content="video.movie"/>
<meta property="video:tag" content="webmaster"/>
<meta property="video:duration" content="205"/><!--Длительность видео в секундах-->
</head>
...
</html>

video.episode

• video:actor — соответствует значению video.movie.

• video:actor:role

• video:director

• video:writer

• video:duration

• video:release_date

• video:tag

• video:series (video.tv_show) — серия.

video.tv_show

ТВ-шоу. Разметка соответствует значению video.movie.

video.other

Видео, которое не относится к перечисленным категориям. Разметка соответствует значению video.movie.

Другие

Далее описаны объекты, которые не включены в вертикали, но поддерживаются.

Значения метатега og:type:

article

• article:published_time (datetime) — дата публикации статьи.

• article:modified_time ( datetime) — дата последнего изменения статьи.

• article:expiration_time (datetime) — дата, после которой статья считается устаревшей.

• article:author (profile, массив) — автор статьи.

• article:section (string)— тема (раздел), к которой относится статья (например, Технологии).

• article:tag (string, массив) — теги (слова, фразы), связанные с этой статьей.

book

• book:author (profile, массив) — автор книги.

• book:isbn (string) — уникальный номер книги (ISBN).

• book:release_date (datetime) — дата публикации книги.

• book:tag (string, массив) — теги (слова, фразы), связанные с этой книгой.

profile

• profile:first_name (string) — имя.

• profile:last_name (string) — фамилия.

• profile:username (string) — ник (имя пользователя, под которым он зарегистрирован).

• profile:gender (enum) — пол (male, female).

website

Не имеет значений, кроме основных. Любая неразмеченная страница определяется как объект website.

Чтобы добавить информацию для формирования сниппетов, в HTML-коде страниц внутри элемента head укажите заголовок страницы и название сайта в свойствах og:title и og:site_name.

<head>
    <meta property="og:title" content="Файлы / Обновленный русификатор для Far Cry 4 / PlayGround. ru" />
</head>

<head>
    <meta property="og:site_name" content="Словари и энциклопедии на Академике" />
</head>

Чтобы ваш вопрос быстрее попал к нужному специалисту, уточните тему:

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

Робот Яндекса сможет проиндексировать информацию с сайта и без разметки, на показ страниц в поиске это не повлияет. Чтобы задать желаемое описание страницы в результатах поиска, используйте метатег description.

Подробное описание возможных ошибок см. в разделе Валидатор микроразметки.

Не удалось исправить ошибку

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

Протокол Open Graph

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

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

Чтобы превратить ваши веб-страницы в графические объекты, вам необходимо добавить основные метаданные в
твоя страница. Мы основывали первоначальную версию протокола на
RDFa, что означает, что вы поместите
дополнительные теги в вашей веб-страницы. Четыре обязательных
свойства для каждой страницы:

• og:title — Название вашего объекта, как оно должно отображаться на графике,
  например, «Скала».
• og:type — Тип вашего объекта, например, «video.movie». В зависимости от
  тип, который вы укажете, также могут потребоваться другие свойства.
• og:image — URL-адрес изображения, который должен представлять ваш объект в
  график.
• og:url — Канонический URL-адрес вашего объекта, который будет использоваться в качестве его
  постоянный идентификатор в графике, например, «https://www.imdb.com/title/tt0117500/».

В качестве примера ниже приведена разметка протокола Open Graph для The Rock on
IMDB:

 
<голова>


 movie" />


...

...

 

Дополнительные метаданные

Следующие свойства являются необязательными для любого объекта и обычно
рекомендуется:

• og:audio — URL-адрес аудиофайла, сопровождающего этот объект.
• og:description — Описание вашего объекта в одном-двух предложениях.
• og:determiner — Слово, которое стоит перед заголовком этого объекта
  в предложении. Перечисление (a, an, the, «», auto). Если авто
  выбран, потребитель ваших данных должен выбрать между «а» или «ан».
  По умолчанию «» (пусто).
• og:locale — локаль, в которой размечены эти теги.
  Формата language_TERRITORY . По умолчанию en_US .
• og:locale:alternate — Массив других локалей на этой странице
  доступен в.
• og:site_name — Если ваш объект является частью более крупного веб-сайта, имя которого
  должны отображаться для всего сайта. например, «IMDb».
• og:video — URL-адрес видеофайла, дополняющего этот объект.

Например (разрыв строки исключительно для отображения):

Схема RDF (в Turtle)
можно найти на ogp.me/ns.

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

Свойство og:image имеет некоторые необязательные структурированные свойства:

• og:image:url — идентично og:image .
• og:image:secure_url — Альтернативный URL для использования, если веб-страница требует
  HTTPS.
• og:image:type — Тип MIME для этого изображения.
• og:image:width — Количество пикселей в ширину.
• og:image:height — Количество пикселей в высоту.
• og:image:alt — Описание того, что находится на изображении (не подпись). Если на странице указано og:image, она должна указывать og:image:alt .

Пример полного изображения:

  jpg" />





 

ог:видео тег имеет те же теги, что и og:image . Вот пример:

Тег og:audio имеет только первые 3 доступных свойства
(поскольку размер не имеет значения для звука):

 
 example.com/sound.mp3" />

 

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

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

Например:

означает, что на этой странице 3 изображения, первое изображение 300x300 , среднее
один имеет неуказанные размеры, а последний имеет высоту 1000 пикселей.

Чтобы ваш объект был представлен на графике, вам необходимо
указать его тип. Это делается с помощью свойства og:type :

Когда сообщество согласовывает схему для типа, он добавляется в список
глобальных типов. Все остальные объекты в системе типов
КЮРИ формы

Глобальные типы сгруппированы по вертикалям. Каждая вертикаль имеет свою
собственное пространство имен. Значения og:type для пространства имен всегда имеют префикс
пространство имен, а затем точку.
Это делается для того, чтобы избежать путаницы с определяемыми пользователем типами в пространстве имен, которые всегда
иметь двоеточие в них.

Музыка

• URI пространства имен: https://ogp.me/ns/music#

og:type values:

music. song

• music:duration — integer >=1 — Продолжительность песни в секундах.
• music:album — массив music.album —
  Альбом, из которого эта песня.
• музыка:альбом:диск — целое число >=1 —
  На каком диске альбома эта песня.
• музыка:альбом:дорожка — целое число >=1 —
  Какой трек это песня.
• музыка:музыкант — массив профилей —
  Музыкант, написавший эту песню.

music.album

• music:song — music.song — Песня из этого альбома.
• музыка:песня:диск — целое число >=1 —
  То же, что и музыка:альбом:диск , но наоборот.
• музыка:песня:дорожка — целое число >=1 —
  То же, что и music:album:track , но наоборот.
• музыка:музыкант — профиль —
  Музыкант, написавший эту песню.
• музыка: выпуск_дата — дата и время —
  Дата выхода альбома.

music.playlist

• music:song — Идентичен музыкальному альбому
• музыка:песня:диск
• музыка:песня:дорожка
• music:creator — profile — Создатель этого плейлиста.

music.radio_station

• music:creator — profile — Создатель этой станции.

Видео

• URI пространства имен: https://ogp.me/ns/video#

og:type значения:

video.movie

• video:actor — массив профилей —
  Актеры в фильме.
• video:actor:role — string — Роль, которую они сыграли.
• видео: директор — массив профилей —
  Режиссеры фильма.
• видео:писатель — массив профилей —
  Сценаристы фильма.
• видео:длительность — целое >=1 —
  Продолжительность фильма в секундах.
• видео: выпуск_дата — дата и время —
  Дата выхода фильма.
• видео: тег — массив строк —
  Отметьте слова, связанные с этим фильмом.

video.episode

• video:actor — Идентичен video.movie
• видео:актер:роль
• видео:директор
• видео: писатель
• видео: продолжительность
• видео: выпуск_дата
• видео:тег
• видео: сериал — video.tv_show —
  К какому сериалу относится этот эпизод.

video.tv_show

Многосерийное телешоу.
Метаданные идентичны video.movie.

video.other

Видео, которое не относится ни к одной другой категории.
Метаданные идентичны video.movie.

Нет вертикали

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

og:type values:

article — URI пространства имен: https://ogp.me/ns/article#

• article:published_time — datetime —
  Когда статья была впервые опубликована.
• статья:modified_time — дата и время —
  Когда статья была изменена в последний раз.
• статья:expiration_time — дата и время —
  Когда статья устарела после.
• статья: автор — массив профилей —
  Авторы статьи.
• article:section — string — Высокоуровневое имя раздела. Например. Технология
• статья:тег — массив строк —
  Отметьте слова, связанные с этой статьей.

книга — URI пространства имен: https://ogp.me/ns/book#

• книга:автор — массив профилей — Кто написал эту книгу.
• книга: ISBN — строка —
  ISBN
• book:release_date — datetime — Дата выпуска книги.
• book:tag — массив строк —
  Отметьте слова, связанные с этой книгой.

профиль — URI пространства имен: https://ogp.me/ns/profile#

• профиль:first_name — строка — имя, обычно данное человеку родителем или выбранное им самим.
• profile:last_name — string — Имя, унаследованное от семьи или брака и под которым обычно известен человек.
• profile:username — строка — короткая уникальная строка для их идентификации.
• profile:gender — enum(мужской, женский) — Их пол.

веб-сайт — URI пространства имен: https://ogp.me/ns/website#

Никаких дополнительных свойств, кроме основных.
Любая неразмеченная веб-страница должна рассматриваться как og:type веб-сайт.

Следующие типы используются при определении атрибутов в протоколе Open Graph.

Тип	Описание	Литералы
Логический	Логическое значение представляет значение true или false	правда, ложь, 1, 0
ДатаВремя	DateTime представляет временное значение, состоящее из даты (год, месяц, день) и необязательный компонент времени (часы, минуты)	ИСО 8601
Перечисление	Тип, состоящий из ограниченного набора константных строковых значений (члены перечисления).	Строковое значение, входящее в перечисление
Поплавок	64-битное число с плавающей запятой со знаком	Все литералы, соответствующие следующим форматам: 1,234 -1,234 1.2e3 -1.2e3 7E-10
Целое число	32-битное целое число со знаком. Во многих языках целые числа более 32 бит становятся плавает, поэтому мы ограничиваем протокол Open Graph для удобства использования на нескольких языках.	Все литералы, соответствующие следующим форматам: 1234 -123
Строка	Последовательность символов Unicode	Все литералы, состоящие из символов Unicode без escape-символов
URL-адрес	Последовательность символов Unicode, идентифицирующая интернет-ресурс.	Все действительные URL-адреса, использующие протоколы https:// или https://

Вы можете обсудить протокол Open Graph в
группе в фейсбуке или на
список рассылки разработчиков.
В настоящее время он используется Facebook (см. их документацию),
Google (см. их документацию) и
микси.
Его публикуют IMDb, Microsoft, NHL, Posterous, Rotten Tomatoes,
TIME, Yelp и многие другие.

Сообщество с открытым исходным кодом разработало ряд анализаторов и
инструменты. Сообщите группе Facebook, если вы тоже создали что-то потрясающее!

• Отладчик объектов Facebook —
  Официальный парсер и отладчик Facebook
• Инструмент тестирования Google Rich Snippets — поддержка протокола Open Graph в определенных вертикалях и поисковых системах.
• PHP Validator and Markup Generator — средство проверки ввода OGP 2011 и генератор разметки в объектах PHP5
• PHP Потребитель —
  небольшая библиотека для доступа к данным Open Graph Protocol в PHP
• OpenGraphNode в PHP —
  простой парсер для PHP
• Пиопенграф —
  библиотека, написанная на Python для разбора протокола Open Graph
  информация с веб-сайтов
• Рубиновый OpenGraph —
  Ruby Gem, который анализирует веб-страницы и извлекает разметку протокола Open Graph

.

• OpenGraph для Java —
  небольшой класс Java, используемый для представления протокола Open Graph
• RDF::RDFa::Парсер —
  Парсер Perl RDFa, который понимает протокол Open Graph

Плагин

• WordPress —
  Официальный плагин Facebook для WordPress, который добавляет метаданные Open Graph на сайты на базе WordPress.
• Альтернативный плагин WordPress OGP —
  Простой легкий плагин WordPress, который добавляет метаданные Open Graph на сайты на базе WordPress.

Все, что вам нужно знать

Михал Пеканек

Преподаватель SEO и маркетинга в Ahrefs. Михал — маркетолог, ориентированный на SEO, с более чем 6-летним опытом работы и консультирования для компаний B2B SaaS.

СТАТИСТИКА СТАТЬЯ

• Ежемесячный трафик 5 205

• Связывание веб -сайтов 284

• твиты 76

9013 DINALOROLORALOR DINALOROLORALORIN0002 Показывает, сколько разных веб-сайтов ссылаются на этот фрагмент контента. Как правило, чем больше веб-сайтов ссылаются на вас, тем выше ваш рейтинг в Google.

Показывает приблизительный месячный поисковый трафик к этой статье по данным Ahrefs. Фактический поисковый трафик (по данным Google Analytics) обычно в 3-5 раз больше.

Сколько раз этой статьей поделились в Твиттере.

Поделитесь этой статьей

Получите лучший маркетинговый контент недели

Подписка по электронной почте

Подписка

Содержание

Вам интересно, как сделать ваш контент более интерактивным, доступным для совместного использования и заметным в социальных сетях?

Метатеги Open Graph — это решение.

Вот как один из наших постов выглядит после публикации на Facebook с метатегами Open Graph:

А вот как он выглядит  без :

Из этого руководства вы узнаете:

9001 Метатеги Open Graph теги
• Почему теги Open Graph важны
• Какие теги Open Graph использовать
• Как настроить теги Open Graph
• Как тестировать и отлаживать теги Open Graph
• Как проводить аудит тегов Open Graph

0 Что такое Open Метатеги графика?

Метатеги Open Graph — это фрагменты кода, управляющие отображением URL-адресов при публикации в социальных сетях.

Они являются частью протокола Facebook Open Graph, а также используются другими сайтами социальных сетей, включая LinkedIn и Twitter (если отсутствуют Twitter Cards).

Вы можете найти их в разделе  веб-страницы. Любые теги с og: перед названием свойства являются тегами Open Graph.

Вот несколько примеров из нашего руководства, как стать экспертом в области SEO:

Вот как эти теги выглядят на Facebook:

Почему теги Open Graph важны?

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

На это есть три причины:

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

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

Вот результаты поиска в Facebook по запросу «альтернативные поисковые системы»:

Выдает популярные статьи, которыми люди уже поделились на Facebook. Каждый заголовок и изображение взяты из тегов Open Graph.

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

Примечание.

 Теги Open Graph также помогают создать фрагмент, когда кто-то отправляет вам ссылку через прямые сообщения с помощью приложений, поддерживающих протокол Open Graph — естественно, Facebook Messenger и WhatsApp, а также iMessage и Slack.

Какие теги Open Graph следует использовать?

Facebook перечисляет 17 тегов OG в своей официальной документации, а также десятки типов объектов. Мы не будем обсуждать все это. Всего четыре необходимы Facebook, чтобы понять основы вашей страницы, и есть еще пара других, которые иногда помогают.

Давайте рассмотрим это.

og:title

Название вашей страницы.

Синтаксис

Передовой опыт

• Добавьте его на все страницы, которыми можно поделиться.
• Сосредоточьтесь на точности, ценности и кликабельности.
• Сделайте его коротким, чтобы предотвратить переполнение. Официальных указаний по этому поводу нет, но 40 символов для мобильных устройств и 60 символов для настольных компьютеров – это примерно то, что нужно.
• Использовать необработанный заголовок. Не включайте брендинг (например, название вашего сайта).

og:url

 URL контента.

Синтаксис

Рекомендации

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

og:image

URL-адрес изображения для социального фрагмента.

Обратите внимание, что это, возможно, самый важный тег Open Graph , потому что он занимает больше всего места в социальной ленте.

Синтаксис

Передовой опыт

• Используйте собственные изображения для страниц, которыми можно поделиться (например, главная страница, статьи и т. д.)
• Используйте свой логотип или любое другое фирменное изображение для остальных страниц.
• Используйте изображения с 1. 9Соотношение 1 : 1 и минимальные рекомендуемые размеры 1200 x 630 для оптимальной четкости на всех устройствах.

og:type

Тип объекта, которым вы делитесь. (например, статья, веб-сайт и т. д.)

Синтаксис

Передовой опыт

• Используйте статью для статей и веб-сайт для остальных страниц .
• При необходимости опишите типы объектов дополнительно (необязательно).

ог:описание

Краткое описание содержимого.

Синтаксис

Передовой опыт

• Дополните заголовок, чтобы фрагмент был максимально привлекательным и привлекательным.
• Скопируйте сюда свое метаописание, если это имеет смысл.
• Говорите коротко и ясно. Facebook рекомендует 2-4 предложения, но это часто сокращается.

og:locale

Определяет язык содержимого.

Синтаксис

Передовой опыт

• Используйте только для контента, написанного не на американском английском (en_US). Facebook предполагает, что контент без этого тега написан на этом языке.

Как настроить теги Open Graph

Выберите платформу своего веб-сайта из списка ниже или следуйте инструкциям руководства.

• WordPress
• Shopify
• Wix
• Squarespace

Установка тегов Open Graph в WordPress

Установите SEO-плагин Yoast. Перейдите в редактор сообщения или страницы, затем прокрутите вниз. Вы должны увидеть окно Yoast SEO. Перейдите на вкладку «Социальные сети», затем «Facebook».

Заполните это, чтобы установить теги og:title , og:description и og:image .

Нет необходимости устанавливать og:url вручную. Yoast сделает это за вас. Он также добавляет другие полезные теги OG, такие как размеры изображения.

Примечание.

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

Вы найдете возможность сделать это в настройках Yoast.

Yoast > Social > Facebook

Убедитесь, что переключатель установлен в положение «Включено», затем загрузите соответствующее изображение. Здесь лучше всего работают изображения брендов.

Настройка тегов Open Graph в Shopify

Большинство тем Shopify извлекают теги OG из переменных, таких как тег title для og:title и избранное изображение для og:image .

Единственный тег, который вы можете настроить через пользовательский интерфейс Shopify, — это общесайтовый тег og:image .

Перейдите в Интернет-магазин > Темы > Настроить > Настройки темы > Настроить > Социальные сети > выберите подходящее изображение .

Если вы хотите увидеть, как это настроено, перейдите в Интернет-магазин > Темы > Действия > Редактировать код > Фрагменты > social-meta-tags.liquid  на полосе прокрутки. При необходимости вы можете отредактировать код.

Настройка тегов Open Graph в Wix

Wix извлекает общие теги OG из других переменных, таких как мета-заголовок и описание страницы.

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

Вы также можете установить собственный образ OG для всего сайта. Перейти к Настройки > Поделиться в социальных сетях в главном меню.

В целом, Wix упрощает добавление тегов OG, поскольку нет необходимости что-либо жестко кодировать.

Настройка тегов Open Graph в Squarespace

Squarespace использует заголовок страницы и метаописание для og:title  и og:description .

Вы можете установить пользовательский og:image на постраничной основе.

Просто перейдите на Настройки страницы > Социальное изображение > Загрузить .

Если вам нужно добавить другие теги OG и настроить параметры по умолчанию, перейдите к Параметры страницы > Дополнительно > Вставка кода заголовка страницы . Прочтите следующий раздел о добавлении тегов вручную и скопируйте туда код.

Настройка тегов Open Graph вручную

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

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

Как тестировать и отлаживать теги Open Graph

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

Для этого используйте следующие инструменты:

• Facebook Sharing Debugger
• Twitter Card Validator
• LinkedIn Post Inspector

Все они работают одинаково. Они извлекают теги со страницы и показывают, как она выглядит при совместном использовании.

Тестирование также помогает предотвратить проблемы, связанные с неправильным отображением или извлечением тегов OG.

Вот как выглядит FB Sharing Debugger в действии:

Самое главное — это то, как выглядит фрагмент. Если вы пропустите или неправильно настроите менее важные теги, ничего страшного. Вы можете игнорировать предупреждения о неважных тегах, таких как fb:app_id

Если что-то выглядит не так, и вы обновляете теги, используйте кнопку «Очистить снова», чтобы получить свежие данные. Если вы не видите изменений после сканирования, используйте пакетный инвалидатор, чтобы очистить кеш, и повторите попытку.

Повторите этот процесс с помощью Twitter Card Validator и LinkedIn Post Inspector, чтобы убедиться, что ваш контент выглядит правильно во всех сетях.

Примечание.

 Я обнаружил, что только Twitterbot следует директивам robots.txt. Поисковые роботы Facebook и LinkedIn могут очищать и отображать контент, даже если вы запретите сканирование. Это было удивительно, но даже ради Твиттера убедитесь, что все URL-адреса, которыми вы делитесь, могут быть просканированы.

Как проводить аудит тегов Open Graph

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

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

Нажмите на отмеченное предупреждение, чтобы просмотреть объяснение и рекомендации по его устранению.

Нажмите «Просмотреть затронутые URL-адреса», и вы увидите проблемы, затрагивающие каждый URL-адрес, а также соответствующие показатели.

This entry was posted in Популярное