Уважаемые пользователи seo-vebmaster.ucoz.net. Вы найдете у нас на портале - различные скрипты сайтов, уникальные, бесплатные шаблоны, модули, хаки и релизы популярных CMS . С Уважением Администрация seo-vebmaster.ucoz.net
  • Страница 1 из 1
  • 1
Скачать для фотошопа и сайта » Форум для Вебмастера » Форум по раскрутке сайта » Open Graph (Open Graph)
Open Graph
diamont1977
Дата: Понедельник, 01.02.2021, 22:44 | Сообщение # 1
Администраторы
Сообщений:
1542
Замечания:
0
0
Offline
Open Graph

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

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

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

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

В стандарте 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 изображения: первое имеет размер 300x300, для второго изображения размер не указан, третье — 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 для пространства имен всегда состоит из названия типа объекта и уточнения (<тип объекта:уточнение>). Это позволяет избежать путаницы с типами, которые задаются пользователем и содержат знак : (двоеточие).
Музыка
Видео
Другие
Типы объектов
Тип Описание Примеры значений
Boolean

Может принимать значения true или false, 1 или 0


Цитата
true, false, 1, 0
DateTime


Временная величина. Может содержать дату (год, месяц, день) и время (часы, минуты) согласно стандарту ISO 8601


Цитата
2015-07-15, 15:05
Enum


Состоит из ограниченного множества постоянных строковых значений


Цитата
male, female
Float


64-битное число с плавающей точкой


Цитата
1.234, -1.234, 1.2e3, -1.2e3, 7E-10
Integer


32-битное целое число. Может содержать все символы, которые соответствуют следующим форматам: 1234, -123


Цитата
5, 15, 180
String


Последовательность символов стандарта Unicode


webmaster
URL

Все действительные URL, которые доступны по HTTP- или HTTPS-протоколу


http://www.example.com

Пример использования

Цитата
Чтобы добавить информацию для формирования сниппетов, в 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>
Скачать для фотошопа и сайта » Форум для Вебмастера » Форум по раскрутке сайта » Open Graph (Open Graph)
  • Страница 1 из 1
  • 1
Поиск: