Open Graph

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. Yandex uses Open Graph to pass data to Yandex video search.

In addition to basic meta tags, Yandex video search recognizes many more, such as different types of video (TV 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. Yandex video search requires meta tags that are not described in the Facebook * documentation, so the service uses its own extension.

Aside from building previews, 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.

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 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 meta tag for a namespace always consists of an object type and a subtype (<object type:subtype>). This avoids confusion with the user-defined types containing the : (colon) character.

Object types

Usage example

To add information for snippet generation, specify the page header in the head element of the page HTML code. Specify the site header in the og:title and og:site_name properties.

<head>
    <meta property="og:title" content="Files / Updated Russifier for Far Cry 4 / PlayGround.ru" />
</head>

<head>
    <meta property="og:site_name" content="Dictionaries and encyclopedias on Akademika" />
</head>

* Service banned in the Russian Federation.