The-Open-Graph-protocol

 The Open Graph protocol  ( OGP ) is an open* standard developed and controlled by Facebook for expressing the primary subject of an HTML page in custom  tags for the purpose of Facebook showing link previews; in practice only a couple are even sometimes necessary for that use-case, and you can use existing open standards instead.

* 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 and controlled by one company.

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

How To
To add Open Graph tags to a page, add only the tags you need, because Facebook will use other existing page markup and information in the absence of og: tags.

How to set title
You do not need  if the   tag of your page is just the name of your page.

If your  is more than that (e.g. includes site name, author, etc.), then you may use   to provide only the page name: 

How to set URL
You do not ever need.

Instead, use the existing rel=canonical standard to link to your canonical page URL. Facebook's own documentation states they support this.



Facebook treats the following as redirects before scraping: HTTP redirects,  links, and.

Screenshot from Open Graph Object Debugger:

How to set description
You do not need  if the first part of the text content of your page is a good description and summary.

If you want specific control over the link preview text content summary, you can use the much older, more widely supported meta description that Facebook also supports (we know from experience, see examples below):



If for some reason you need to provide a custom summary just for Facebook in particular (e.g. to encourage folks to leave Facebook), you may use  like this: 

How to set image
You do not need  if your page already has an image that is at least 600px wide.

Facebook will automatically show the first image that is at least 600px wide on your page, so if that works, no need to use. Otherwise if you want a specific preview image, you can do so: 

The image should be at least 1200 x 630, a minimum of 600 x 315, and up to 8mb in size. (Dev.FB best practices on images

More info: https://developers.facebook.com/docs/sharing/webmasters/#markup

Required Properties
OGP documentation claims that these four properties are required for every page:
 * 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., "video.movie". 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., "http://www.imdb.com/title/tt0117500/".

However, in practice they are all optional.

Facebook will show a link preview (including an image!) without any of these properties, but in certain cases using them may provide more control (see above "How to" section).

See also the Twitter Cards documentation which notes that Twitter re-uses (falls back to) various  meta properties which you can then use instead of Twitter’s own proprietary meta card properties.

Pseudo-RDFa
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: 

OGP uses: 

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

Text from the Open Graph Object Debugger if you use :

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. If you put relative paths into og meta tags:

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

Does not support SVG images
If you include :

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

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
is only using  currently. I was formerly using  and   but dropped those because Facebook uses   and   as fallbacks.
 * Facebook complains that my  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.

Aaron Parecki
includes Open Graph meta tags on post permalinks since 2018-01-05, including these properties:
 * og:url - the post's permalink
 * og:type - article or website
 * og:title - The article name, or a truncated version of a note
 * og:description - The explicit post summary if authored, otherwise an automatically generated summary based on the first few sentences of the post
 * og:image - The featured image, post's first photo, or map image if set. Otherwise is left out.
 * og:site_name - Always set to "Aaron Parecki"

opengraph-mf2.tanna.dev
One of the pipes run by which produces MF2-JSON for a given URL's Open Graph metadata.

Meetable
Meetable includes OGP on event permalinks since 2020-01-16 and Twitter-specific OGP since 2020-07-03
 * og:type
 * og:title
 * og:description
 * og:url
 * og:image
 * twitter:image
 * twitter:card
 * twitter:label1
 * twitter:data1

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

Google+
Google+, Google’s now defunct social hosting silo, preferred Schema.org but will use OGP as a first fall-back. notes that G+ does not reliably pull in content from og:description.

Apple
Apple’s News app (announced 2015-06-08) previously prefered Open Graph tags over general meta tags or schema.org metadata. It has since moved to a proprietary REST API for publishing.