From IndieWeb
(Redirected from OGP)
Jump to: navigation, search

The Open Graph protocol (OGP) is an open* standard developed by Facebook for annotating the primary subject of an HTML page via a set of custom <meta> tags in the document head for the purpose of Facebook showing link previews.

*OGP is licensed using the Open Web Foundation Agreement, Version 0.9. Though not as good as CC0+OWFa 1.0, it's still a considerably open license for a web standard written by one company.



Use microformats to markup the visible information on the page instead, which can be used for a link preview - the whole purpose of OGP.

Required Properties

The four required properties for every page are:

  • og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
  • og:type - The type of your object, e.g., "". Depending on the type you specify, other properties may also be required.
  • og:image - An image URL which should represent your object within the graph.
  • og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., "".



Rather than use existing meta tag "name" attribute, OGP uses the RDFa "property" attribute, as well as prefixes property names with "og:" to give the appearance of RDFa:

Instead of:

<meta name="description" content="invisible description of the page"/> 

OGP uses:

<meta property="og:description" content="invisible description of the page"/>

(actual meta name from web legacy and OGP property from their spec)

Text from the Open Graph Object Debugger if you use meta name="description":

Extraneous Property: Objects of this type do not allow properties named 'description'.

Mismatched Metadata: The parser's result for this metadata did not match the input metadata. Likely, this was caused by the data being ordered in an unexpected way, multiple values being given for a property only expecting a single value, or property values for a given property being mismatched. Here are the input properties that were not seen in the parsed result: 'og:description'

Depends on Invisible Metadata

Meta tags, no matter how well-intentioned, are another form of invisible metadata. They are subject to the same problems as meta keywords. (DRY violation, rotting, spamming, etc.).

The RDF-apologism of using a "property" attribute instead of a "name" attribute doesn't change this, nor does the "og:" syntactic vinegar prefix.

Disallows relative URLs

Apparently OGP doesn't allow relative URLs[1]. If you put relative paths into og meta tags:

<meta property="og:image" content="images/logo.png" />

The Open Graph Object Debugger will say it is not an image.

Does not support SVG images

If you include :

<meta property="og:image" content="" />

The Open Graph Object Debugger will say it is not an image.

Indieweb Examples

David Shanske

David Shanske is using Open Graph to get data for a link preview when liking/bookmarking/etc on his site when a site is not marked up with Microformats.

  • The title from :title
  • An excerpt of the URL from :description
  • The site name from :site_name (Many sites do not offer the site_name field.
  • Tags from article:tag, og:video:tag, etc.
  • Location when added.
  • A featured image from :image.

This is enough to generate a link preview in many cases.

gRegor Morrill

gRegor Morrill is using og:title, og:type, and og:image. I do not use og:description because I do not have summaries set up for each post. Facebook uses the meta description as a fallback.

  • Facebook complains that my og:image is too small/cannot be downloaded. It says they require the image to be 200x200. Despite that, it usually shows up when I share a link on Facebook.

Silo Examples


Twitter prefers Twitter Cards, but will fallback to using some OGP meta tags.


Apple’s News app (announced 2015-06-08) will prefer Open Graph tags over general meta tags or metadata.


Google's social hosting silo prefers microformats but will use OGP as a first fall-back. Daniel Goldsmith notes that G+ does not reliably pull in content from og:description.

See Also

Personal tools
Recent & Upcoming