What is Open Graph Protocol (OGP)?

02/04/2022
Open Graph Protocol

Open graph tags are meta tags that help reflect data such as titles, descriptions, and images when sharing web pages on social media. It was created for the first time by Facebook.

They are used with <meta> tags inside the <head> tag in HTML language.

Basic OGP Meta Tags

You can use open graph tags in the simplest way by placing the following 4 meta tags in the source code of the page. These 4 meta tags are required on all pages for the build to work.

  • og:type Specifies the type of page. (Article, video, author…)
  • og:title Specifies the title of the page.
  • og:image Specifies the cover image that describes the page.
  • og:url Specifies the canonical URL that created the page.

Example

<meta property="og:type" content="article">
<meta property="og:title" content="Nikola Tesla Quotes - Words From Life">
<meta property="og:image" content="https://wordsfromlife.com/img/static/nikola-tesla.jpg">
<meta property="og:url" content="https://wordsfromlife.com/en/nikola-tesla-quotes">

Optional OGP Tags

The following meta tags are optional for the Open Graph Protocol but generally recommended.

  • og:audio It is used to specify the URL of the audio file to be shared.
  • og:video It is used to specify the URL of the video file to be shared.
  • og:description A description is used to describe the page, usually it pulls the same value as the meta description tag of the page.
  • og:determiner It is used for the word that will appear before the title of the page. Such as the prefixes “a”, “an” or “the” in English texts. It is blank by default.
  • og:locale Used to mark the local language of the page. Its default value is “en_US”.
  • og:locale:alternate It is used for the alternative locations of the page that are available. It can be used as an array for multiple alternate pages.
  • og:site_name Used to specify the name of the website.

Configured OGP Features

Open Graph meta tags consist of property and content elements, some property elements have extra data;

og:image Extra Data

  • og:image:url It is exactly the same as og:image in terms of usage, it does not need to be reused.
  • og:image:secure_url HTTPS is used for the image URL, it is no longer needed as the vast majority of websites are HTTPS.
  • og:image:type It is used to specify the file type of the image. (Example: image/png)
  • og:image:width It is used to specify the width of the image.
  • og:image:height It is used to specify the height of the image.
  • og:image:alt Used for short description text describing the image. It is used as alternative text.

Example

<meta property="og:image" content="https://wordsfromlife.com/img/static/nikola-tesla.jpg" /> 
<meta property="og:image:type" content="image/jpeg" /> 
<meta property="og:image:width" content="1280" /> 
<meta property="og:image:height" content="720" /> 
<meta property="og:image:alt" content="Nikola Tesla Quotes" />

og:video Extra Data

The og:video extra data is also valid with the same logic as og:image, except for its lower value, the same values ​​can be used.

<meta property="og:video" content="" /> 
<meta property="og:video:type" content="video/mp4" /> 
<meta property="og:video:width" content="" /> 
<meta property="og:video:height" content="" /> 

og:audio Extra Data

Only 3 properties are available for og:audio; The build works even if og:audio, og:audio, og:audio:secure_url, og:audio:type, og:audio:secure_url is not used.

<meta property="og:audio" content="" /> 
<meta property="og:audio:type" content="audio/mpeg" />

og:type Object Types

With og:type it is necessary to specify the type of the page, there are different values ​​according to the page types;

music.song

<meta property="og:type" content="music.song" /> 

Properties for type music.song;

  • music:duration The length of the song in seconds.
  • music:album The album of the song.
  • music:album:disc The disc number where the song is on the album.
  • music:album:track The number of which track the song is.
  • music:musician The musician of the song.

Example

<meta property="og:type" content="music.song" /> 
<meta property="music:duration" content="236" />
<meta property="music:album" content="http://open.spotify.com/album/7rq68qYz66mNdPfidhIEFa" />
<meta property="music:album:disc" content="1" />
<meta property="music:album:track" content="2" />
<meta property="music:musician" content="http://open.spotify.com/artist/1dfeR4HaWDbWqFHLkxsg1d" />

Source:

] }