Open Graph Tags (HTML)

3 min readJan 24, 2022

What is Open Graph Tags?

They are special tags that used by social media. These tags specify or control how your content appears when shared on social media such as Facebook.

Without Open Graph tags, the Facebook crawler uses internal heuristic techniques to best predict titles, descriptions, and previews of your content.

Open Graph tags are meta tags that go into the HTML <head> tag of your webpage. The most popular ones are title, description and image.

Example of Markup

An example of how to markup an article, news, story or blog posts are as follows:

Here is an example of content formatted with Open Graph tags for optimal display on Facebook:

Image from https://developers.facebook.com/docs/sharing/webmasters/

Basic Tags

Here are the most basic meta tags you should use for any type of content.

• og:url

The canonical URL. For your page, this URL should be an unfurnished URL without session variables. The parameter specifies the user or counter. The likes and shares for this URL will be aggregated within this URL. For example, the mobile domain URL should point to the desktop version of the URL in canonical URL format to collect likes and shares. Share on pages that appear in different versions.

• og:title

The title of your article without any branding such as your website name.

• og:description

A brief description of the content, usually between 2 and 4 sentences. This description appears below the Facebook post title.

• og:image

The URL of the image that appears when someone shares content on Facebook.

• og:type

Media type of your content. This tag affects the way your content is displayed in the News Feed. If you do not specify a type, the default type is that websiteeach URL should be a single object. Therefore, ‘og:typemultiple’ values cannot be used.

• fb:app_id

To use Facebook Insights, You need to add an app ID to your page. Insights allows you to view analytics data on your site traffic from Facebook. Find your app ID in your app dashboard.

Optional Tags

The following properties are optional for any object and are generally recommended:

og:audio - A URL to an audio file to accompany this object.
og:description - A one to two sentence description of your object.
og:determiner - The word that appears before this object’s title in a sentence. An enum of (a, an, the, "", auto). If auto is chosen, the consumer of your data should chose between "a" or "an". Default is "" (blank).
og:locale - The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
og:locale:alternate - An array of other locales this page is available in.
og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site. e.g., "IMDb".
og:video - A URL to a video file that complements this object.

For a complete list of standard object properties: Object Properties Reference