Open Graph

Note. This section contains information from the original guide.

The Open Graph standard is developed by the Facebook social network. It allows you to manage the site preview when the link to the site is posted in social networks and pass the information to other Internet services.

Open Graph markup is used by Facebook, VK, Google+, Twitter, LinkedIn, Pinterest and other services. In Yandex, Open Graph is used to transfer data to the Yandex.Video service and to generate a snippet header.

The Yandex.Video service recognizes not only basic tags but also other meta tags, such as different types of video (series, music videos, movies, and so on), or age and country restrictions. Depending on the chosen type, you can specify additional properties of an object: movie title, the number of the episode, TV show release date, and so on. As Yandex.Video needs meta tags that are not present in Facebook documentation, the service uses an extension.

In addition to building previews and snippets, the Open Graph standard can be used by application developers to publish user activities on Facebook. In such publications, you can specify the user, object, actions with this object and the application used to complete this action.

  1. Basic meta tags
  2. Additional meta tags
  3. Structured meta tags
  4. Arrays
  5. Objects

Basic meta tags

In Open Graph standard, a page describes only one object — a person, a company or a product. All data is specified for this object. To pass information to services, add the following mandatory meta tags to the HTML code (the head element):

  • og:title — Object name.
  • og: type — Object type, for example: video.movie (movie). If you have multiple objects on the page, select one of them (the main one). Depending on the type, you can specify additional properties.
  • og:image — The URL of the image describing the object.
  • og:url — The object's canonical URL that will be used as a permanent ID.
<meta property="og:title" content="Marilyn Monroe"/>
<meta property="og:description" content="American movie actress and singer"/>
<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://en.wikipedia.org/wiki/Marilyn_Monroe" />

Additional meta tags

  • og:audio — URL of the audio file corresponding to the object.
  • description — Short object description.
  • og:determiner — A word (article) to be put before the object name in a sentence. Can be indicated as: a, an, the, "", auto. If the value is specified as auto, the service reading the markup will choose between a and an values. If no value is specified, there will be no article before the object name.
  • og:locale — The language of the object description set in the language_country format. The default value is en_US.
  • og:locale:alternate — An array of additional languages in which the object description is available.
  • og:site_name — The name of the site where the object information is placed.
  • og:video — The URL of the video file corresponding to the object.
<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" />

Structured meta tags

Some meta tags can have additional (optional) metadata. Such meta tags contain the additional : (colon) character.

For example, og:image may contain the following metadata:

  • og:image:url — The URL of the image describing the object (corresponds to og:image).
  • og:image:secure_url — Additional URL if the page is opened using the HTTPS protocol.
  • og:image:type — Image MIME type (image format by MIME standard).
  • og:image:width — Image width in pixels.
  • og:image:height — Image height in pixels.
<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 can contain the same metadata as og:image. For example:

<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 contains only some of the following metadata:

<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" />

Arrays

If the meta tag can contain multiple values, add additional meta elements to the page. If there are conflicts, the data in the first meta element (top down) will be taken into account.

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

Specify structured meta tags after the main meta tag.

<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" />

where the markup means that the page contains 3 images: the first one is 300 x 300, no size is specified for the second one, and the third one is 1000 pixels high.

Objects

To pass information about an object, you need to specify its type in the og:type meta tag:

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

In this example, one of the global (generally accepted) types is specified. Other types are specified using the CURIE syntax:

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

Global object types are grouped vertically. Each vertical line has its own namespace. The value of the og:type tag for the namespace always consists of the object type name and details (<object type:details>). This avoids confusion with the user-defined types containing the : (colon) character.

Object types

TypeDescriptionExamples of values
Boolean

Can take true or false, 1 or 0 value.

true, false, 1, 0

DateTime

Time value. May contain date (year, month, day) and time (hours, minutes) according to the ISO 8601 standard.

2015-07-15, 15:05

Enum

Consists of a limited set of permanent string values

male, female

Float

64-bit floating point number

1.234,-1.234,1.2e3,-1.2e3,7E-10

Integer

32-bit integer. Can contain any characters that satisfy the following formats: 1234,-123

5, 15, 180

String

A sequence of characters in the Unicode standard

webmaster

URL

All valid URLs accessible via the HTTP or HTTPS protocol

http://www.example.com