Open Graph: An Explanation of Tags and Functions

Facebook released Open Graph in 2010 to better map external websites to its platform. To do this, the social media platform’s developers created an interesting technology called Open Graph or Open Graph protocol (OGP), which turns websites into objects, helping the platform’s users to share content from external sources within the network. This should be extremely useful for many website operators - after all, most of them want to increase awareness for their website.

After Facebook, other networks such as Twitter, LinkedIn, and Xing jumped on the bandwagon by implementing Open Graph. Nowadays, this protocol is considered an important tool for web design.

Website Builder
From idea to website in record time with AI
  • Intuitive website builder with AI assistance
  • Create captivating images and texts in seconds
  • Domain, SSL and email included

How Does Facebook’s Open Graph Work?

When a user shares a website on social media, it needs to be displayed on the platform in some way. The preview image and accompanying text should accurately reflect the website and encourage other users to visit it. Web designers use Open Graph to avoid simply displaying random content from the website as the preview.

Web designers can insert Open Graph tags into the website’s source code to control how the preview looks on the social media network. This also makes Open Graph useful for online marketing, since the protocol gives the content creators more control over how their shared content is displayed and better prepares the information for users.

The corresponding tags are placed in the header of the HTML document as meta-properties:

<meta property="og:title" content="Website title as it should appear on Facebook."/>

First, you define the tag’s type and then assign a value or content to it.

Fact

Twitter has introduced its own tags. However, if the Twitter bot does not find these tags while searching the page, it also uses Open Graph.

Before inserting the various meta-properties, you need to define the vocabulary in a prefix.

<html prefix="og: http://ogp.me/ns#">

This is followed by the head of the document.

The Most Important Open Graph Tags

There are many Open Graph tags that can be placed on a website, the most important of which are described below. These tags should be placed on any website that is intended to be shared on social networks.

Title

What title should be displayed on social networks when the website is shared there? The title tag can be used to specify a name. This title should not exceed 95 characters for Facebook. There is a line break after about 50 characters. This also influences how users respond to the displayed preview.

<meta property="og:title" content="Website title"/>

Either way, all web pages have their own title tags which affect how they are displayed, i.e. in web browsers or search engines. Technically, this title can be used again in the Open Graph tag, but the Facebook protocol also allows website operators to define an alternative one that is better suited to social media. For example, an adapted alternative version may be more suitable to the character length provided by Facebook than the standard tag used for search engines. An alternative title tag also allows the title to be better adapted for the social media target group.

Description

The description is also an integral part of every HTML document. Using the corresponding Open Graph tag, web designers can adapt the description of the content to social networks. Facebook specifies a length of approximately 300 characters. Depending on the title or URL, this length may be smaller, so you should limit yourself to a maximum of 200 characters to be on the safe side.

<meta property="og:description" content="Website description"/>
Tip

Unlike the HTML description, the Open Graph alternative is not relevant to SEO. Keywords are not important here.

Image

In addition to the title and description, the website preview also includes an image. Using the Open Graph tag, website operators can prevent Facebook and other social media platforms from simply using any randomly selected image from the page. Otherwise, things can go wrong - for example, the image from a banner ad might be used instead of an actual image from the page.

<meta property="og:image" content="http://www.example.org/images/preview.jpeg" />

It is recommended to design the image specifically for the preview so that it is clicked as much as possible. Therefore, you should consider the content of the image as well as its format. Combining text with images has proven to be effective. When doing this, you should centre the text as much as possible because Facebook may crop the image. The best format to use is 1200 x 627 pixels. If you use this size, Facebook will display the image over the title and description. When using a smaller format, the image may move next to the text as a thumbnail.

You can add additional information to the image tag to ensure the best possible display:

<meta property="og:image" content="http://www.example.org/images/preview.jpeg" />
<meta property="og:image:secure_url" content="https://www.example.org/images/preview.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A tropical waterfall" />
  • secure_url: This is a good alternative for when the website requires HTTPS.
  • type: The media type for an image is always “image”, but this line also specifies the format used. (The IANA has compiled a list of all available media types.)
  • width: This line tells the other website how wide the image is in pixels.
  • height: This line tells the other website how high the image is in pixels.
  • alt: The alt text from the HTML is displayed as a description of the image if the preview image cannot be displayed.

URL

The URL tag defines the web address of the website being shared. This may seem a bit redundant since the URL is already known. However, some website operators have multiple URLs for the same content. This can be used to improve tracking, for example. The Open Graph tag ensures that the correct website is always linked.

<meta property="og:url" content="http://www.example.org/articles/id3498/" />
Note

Facebook does not display the full URL in the preview. It only displays the domain name.

Type

The type indicates what the content actually is. For most websites, the types “website”, “blog” or “article” should work. However, there are other options:

  • website
  • article
  • blog
  • profile
  • book
  • video
    • video.movie
    • video.episode
    • video.tv_show
    • video.other
  • music
    • music.song
    • music.album
    • music.playlist
    • music.radio_station
Note

To be able to properly use the music type, Facebook must first approve the website operator. Their whitelist primarily comprises large companies such as Spotify.

You may also come across other types which you can look up on a list at schema.org. All the types presented in this article can be found on Open Graph’s official website.

Fact

Many types allow you to make additional specifications that are listed as separate meta-properties after the type has been defined. You will find an example of an article with additional specifications below. You can view the additional specifications for the other types on Open Graph’s website.

<meta property="og:type" content="article">
<meta property="article:published_time" content="2019-04-25">
<meta property="article:section" content="Multimedia">

In the example above, the code does more than just tell social networks that the object is an article. It also indicates when the article was published and which category it falls under.

An Overview of Open Graph Tags

There are even more Open Graph tags that can be placed in your website’s source code in addition to the most important ones described above. These allow you to further tailor your content to social networks.

Every Open Graph tag includes content that needs to be displayed in the right place on the social network – and it must be done in the correct format. For example, the tag og:title contains one or more words, i.e. a string. In addition, you can also use the following values:

  • Boolean: Represents a true or false value (true, false, 1, 0)
  • DateTime: A temporal value for a date (year, month, day or yyyy-mm-dd) and a time (hours, minutes, seconds or hh:mm:ss)
  • Enum: A set of constant values (e.g. male, female)
  • Float: A 64-bit signed floating-point number
  • Integer: A 32-bit signed integer
  • String: A sequence of Unicode characters
  • URL: A working URL that uses the HTTP or HTTPS protocol
  • Array: A set of values
Tag Description Content
og:title Website title String
og:determiner The grammatical article before the title Enum
og:description Website description String
og:site_name The name that should be displayed for the overall site String
og:url The canonical URL URL
og:locale Country and language String (language_TERRITORY)
og:locale:alternate Alternative country Array
og:type Type of content String
og:image Image source URL
og:image:secure_url Alternative secure URL (HTTPS) URL
og:image:type Image media type String
og:image:width Width in pixels Integer
og:image:height Height in pixels Integer
og:image:alt Alternative text for the image String
og:audio Audio file source URL
og:audio:secure_url Alternative secure URL (HTTPS) URL
og:audio:type Audio file media type String
og:audio:alt Alternative text for the audio file String
og:video Video source URL
og:video:secure_url Alternative secure URL (HTTPS) URL
og:video:type Video media type String
og:video:width Width of video in pixels Integer
og:video:height Height of video in pixels Integer

Open Graph tags for various object types:

Tag Description Content
music:duration Song duration in seconds Integer (>=1)
music:album Album the song is on Array (music.album)
music:album:disc Disc (CD, record) the song is on Integer (>=1)
music:album:track The song’s track number on the album Integer (>=1)
music:musician Musician’s name Array (profile)
music:song Name of the song on the album String (music.song)
music:song:disc Disc (CD, record) the song is on Integer (>=1)
music:song:track The song’s track number on the album Integer (>=1)
music:release_date Album’s release date DateTime
music:creator Creator of the playlist or radio station Array (profile)
video:actor Film actor Array (profile)
video:actor:role Actor’s role String
video:director Film director Array (profile)
video:writer Film screenwriter Array (profile)
video:duration Film duration in seconds Integer (>=1)
video:release_date Film’s release date DateTime
video:tag Keywords for the video Array (string)
video:series Series the episode is from String (video.tv_show)
article:published_time Date of the article’s publication DateTime
article:modified_time When the article was last modified DateTime
article:expiration_time Article’s expiration date DateTime
article:author Article’s author Array (profile)
article:section Article’s category String
article:tag Keywords for the article Array (string)
book:author Book’s author Array (profile)
book:isbn Book’s ISBN String
book:release_date Date of the book’s publication DateTime
book:tag Keywords for the book Array (string)
profile:first_name Person’s first name String
profile:last_name Person’s last name String
profile:username Person’s username String
profile:gender Person’s gender Enum

How to Use Open Graph: Example Code

The following example shows a very simple HTML document that has been prepared for social networks using Open Graph tags:

<!DOCTYPE html>
<html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>First Article</title>
<meta property="og:type" content="article">
<meta property="og:title" content="My first article">
<meta property="og:description" content="This is a very cool article.">
<meta property="og:site_name" content="Our Website">
<meta property="og:url" content="http://www.example.org/ogp_test.html">
<meta property="og:image" content="http://www.example.org/teddy.png">
<meta property="og:image:type" content="image/jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />
<meta property="og:image:alt" content="A teddy bear" />
<meta property="article:published_time" content="2019-04-25">
<meta property="article:author" content="Carl">
</head>
<body>
<h1>My First Article</h1>
<p>This is a test.</p>
</body>
</html>

In the Open Graph tags, the document type (i.e. article), title, description, URL, and a suitable image have been defined. Additional information has also been provided for both the article and the image.

You do not need to wait for your content to be shared to check whether the code is being correctly read by Facebook. Facebook provides a tool called the Sharing Debugger which checks the source code for problems and displays all the information collected. It also shows how the preview will be displayed on Facebook.

To use the debugger, all you need is a Facebook account. However, the website to be checked must already be available online.

Was this article helpful?
Page top