FACEBOOK OPEN GRAPH TAGS AN INCOMPLETE GUIDE Mat Morrison 2013-11-05

<meta name="description" content="George Thornton was presumably buried, and not stuffed with TNT and exploded on the beach. Also, watch this classic clip of an exploding whale."/>

<link rel="canonical" href="http://hypervocal.com/news/2013/oregon-engineer-blow-up-whale-dies/" />

<meta property="og:locale" content="en_US"/>

<meta property="og:type" content="article"/>

<meta property="og:title" content="Oregon Engineer Who Had Bright Idea to Blow Up Beached Whale Dies"/>

<meta property="og:description" content="George Thornton was presumably buried, and not stuffed with TNT and exploded on the beach. Also, watch this classic clip of an exploding whale."/>

<meta property="og:url" content="http://hypervocal.com/news/2013/oregon-engineer-blow-up-whale-dies/"/>

<meta property="og:site_name" content="HyperVocal"/>

<meta property="article:publisher" content="https://www.facebook.com/hypervocal"/>

<meta property="og:image" content="http://hypervocal.com/wp-content/uploads/2013/11/george-thornton.jpg"/>

2

3

4

1

2

3

4

1

IMPROVING FACEBOOK SHARING WITH OPEN GRAPH TAGS

<meta property="og:image" content="http://hypervocal.com/wp-content/uploads/2013/11/george-thornton.jpg"/>

1

NB: RULES CHANGE WITH FORM FACTOR (AND TIME)

•  Image must be larger than 600x315px •  Optimal size should be 1200x627px •  Image ratio: 1.91:1

•  Will be automatically resized/downsized in desktop & mobile News Feeds. •  Links to YouTube videos automatically downsized to 90x90 (always use an

image post to promote YouTube video when posting as Page Admin.) •  ALSO informs LinkedIn, Google+, Twitter sharing

<meta property="og:title" content="Oregon Engineer Who Had Bright Idea to Blow Up Beached Whale Dies"/> 2

NB: RULES CHANGE WITH FORM FACTOR (AND TIME)

•  OG:TITLE should be short (will truncate at ~95 characters) •  ALSO informs LinkedIn, Google+, Twitter sharing

<meta property="og:description" content="George Thornton was presumably buried, and not stuffed with TNT and exploded on the beach. Also, watch this classic clip of an exploding whale."/>

3

NB: RULES CHANGE WITH FORM FACTOR (AND TIME)

•  OG:DESCRIPTION controls short summary of content •  Can contain up to 300 characters; but may be truncated

(example to left shows 123). May not display (see mobile example, right)

•  Should include calls-to-action or trigger words where appropriate (“Watch”, “Want to know how…”, “Here’s how…”)

•  MAY ALSO inform LinkedIn, Google+, Twitter sharing

NB: RULES CHANGE WITH FORM FACTOR (AND TIME)

<meta property="article:publisher" content="https://www.facebook.com/hypervocal"/> 4

•  ARTICLE:PUBLISHER should include the Facebook page URL or ID of the publishing entity

•  Facebook uses this metadata to display “Like” & “Follow”-buttons on Newsfeed stories about shared articles

•  Does not affect other social sharing platforms

<meta property != !‘fb:admins’ !content!= !‘{list of admins’ IDs}’/> OR!<meta property != !‘fb:app’ !content = !‘{app ID}’/>!!!!<meta property != !‘og:locale’ !content = !‘en_GB’ />!<meta property != !‘og:type’ !content = !‘website’ />!<meta property != !‘og:title’ !content = !‘{Catchy Article Title}’ />!<meta property != !‘og:image’ !content = !‘{image 1200x627}’ />!<meta property != !‘og:url’ !content = !’{canonical page URL}’ />!<meta property != !‘og:site_name’ !content = !’{site name}’ />!<meta property != !‘og:description’ !content = !‘{max 300 characters (Facebook)}’ />!!!!<meta property != !‘article:publisher’!content = !‘{Facebook Page URL or ID}’ />!

TAGS TO CHECK ACCESS DOMAIN INSIGHTS FOR REPORTING

CONTROL APPEARANCE

RECRUIT ORGANIC FANS

REFERENCE LINKS As its service evolves, Facebook will occasionally change the way that it represents metadata included in the tags. As a result, articles published before the most recent changes to the newsfeed may well be out-of-date. Moreover, Facebook’s developer documentation is often flawed or missing (they do make a heroic effort to keep up.) Much useful material can be also found on Stack Overflow – but it can suffer from becoming outdated quickly.

https://developers.facebook.com/blog/post/2013/06/19/platform-updates--new-open-graph-tags-for-media-publishers-and-more/ https://developers.facebook.com/docs/reference/opengraph/object-type/website https://developers.facebook.com/docs/reference/opengraph/object-type/article/ https://developers.facebook.com/docs/insights/ http://stackoverflow.com/ http://ogp.me/