Facebook Open Graph Tags Implementation

What are Open Graph Tags?

Facebook Open Graph meta tags are designed to communicate information about your website to social networks when links to your website are shared. These tags allow you to craft custom titles, descriptions, and images to be used when your pages are shared on Facebook, LinkedIn, and Google+.

So, much like when Google or another search engine will visit your site and look for the relevant data (or tags) in order to properly display your website in search results, social networks do the same thing. The only difference is, social networks are looking for these specific Open Graph tags (or Twitter tags).

Here’s a sample of what these tags look like in standard HTML:

As mentioned above, Facebook have created a large amount of metadata for publishers to use including actions so that you can have people share how they are carrying out certain actions like listening, reading and watching.Below is the detailed list of supported tags in FACEBOOK OPEN GRAPH

og:type values:

article - Namespace URI: http://example.com/ns/article#

article:published_time - datetime - When the article was first published.
article:modified_time - datetime - When the article was last changed.
article:expiration_time - datetime - When the article is out of date after.
article:author - profile array - Writers of the article.
article:section - string - A high-level section name. E.g. Technology
article:tag - string array - Tag words associated with this article.

book - Namespace URI: http://example.com/ns/book#

book:author - profile array - Who wrote this book.
book:isbn - string - The ISBN
book:release_date - datetime - The date the book was released.
book:tag - string array - Tag words associated with this book.

profile - Namespace URI: http://example.com/ns/profile#

profile:first_name - string - A name normally given to an individual by a parent or self-chosen.
profile:last_name - string - A name inherited from a family or marriage and by which the individual is commonly known.
profile:username - string - A short unique string to identify them.
profile:gender - enum(male, female) - Their gender.

website - Namespace URI: http://example.com/ns/website#

Music

Namespace URI: http://example.com/ns/music#

og:type values:

music.song

music:duration - integer >=1 - The song's length in seconds.
music:album - music.album array - The album this song is from.
music:album:disc - integer >=1 - Which disc of the album this song is on.
music:album:track - integer >=1 - Which track this song is.
music:musician - profile array - The musician that made this song.

music.album

music:song - music.song - The song on this album.
music:song:disc - integer >=1 - The same as music:album:disc but in reverse.
music:song:track - integer >=1 - The same as music:album:track but in reverse.
music:musician - profile - The musician that made this song.
music:release_date - datetime - The date the album was released.

music.playlist

music:song - Identical to the ones on music.album
music:song:disc
music:song:track
music:creator - profile - The creator of this playlist.

music.radio_station

music:creator - profile - The creator of this station.

Video

Namespace URI: http://example.com/ns/video#

og:type values:

video.movie

video:actor - profile array - Actors in the movie.
video:actor:role - string - The role they played.
video:director - profile array - Directors of the movie.
video:writer - profile array - Writers of the movie.
video:duration - integer >=1 - The movie's length in seconds.
video:release_date - datetime - The date the movie was released.
video:tag - string array - Tag words associated with this movie.

video.episode

video:actor - Identical to video.movie
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series - video.tv_show - Which series this episode belongs to.

video.tv_show

A multi-episode TV show. The metadata is identical to video.movie.

video.other

A video that doesn't belong in any other category. The metadata is identical to video.movie.

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 example (line-break solely for display purposes):

The og:image property has some optional structured properties:

og:image:url - Identical to og:image.
og:image:secure_url - An alternate url to use if the webpage requires HTTPS.
og:image:type - A MIME type for this image.
og:image:width - The number of pixels wide.
og:image:height - The number of pixels high.
og:image:alt - A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.