An Incomplete Guide to Open Graph metatags for Facebook

2,000 views
1,801 views

Published on

Knocked this together as a training tool; but it's going to be out of date as fast as the last one I made...

Published in: Business, Technology
2 Comments
2 Likes
Statistics
Notes
No Downloads
Views
Total views
2,000
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
2
Likes
2
Embeds 0
No embeds

No notes for slide

An Incomplete Guide to Open Graph metatags for Facebook

  1. 1. FACEBOOK OPEN GRAPH TAGS AN INCOMPLETE GUIDE Mat Morrison 2013-11-05
  2. 2. <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"/> 2 <meta property="og:title" content="Oregon Engineer Who Had Bright Idea to Blow Up Beached Whale Dies"/> 3 1 <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-whaledies/"/> 2 3 4 <meta property="og:site_name" content="HyperVocal"/> 4 <meta property="article:publisher" content="https://www.facebook.com/hypervocal"/> 1 <meta property="og:image" content="http://hypervocal.com/wp-content/uploads/2013/11/georgethornton.jpg"/> IMPROVING FACEBOOK SHARING WITH OPEN GRAPH TAGS
  3. 3. 1 <meta property="og:image" content="http://hypervocal.com/wp-content/uploads/2013/11/georgethornton.jpg"/> •  •  •  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 •  NB: RULES CHANGE WITH FORM FACTOR (AND TIME)
  4. 4. 2 <meta property="og:title" content="Oregon Engineer Who Had Bright Idea to Blow Up Beached Whale Dies"/> •  •  OG:TITLE should be short (will truncate at ~95 characters) ALSO informs LinkedIn, Google+, Twitter sharing NB: RULES CHANGE WITH FORM FACTOR (AND TIME)
  5. 5. •  •  •  •  3 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 <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."/> NB: RULES CHANGE WITH FORM FACTOR (AND TIME)
  6. 6. •  •  •  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="article:publisher" content="https://www.facebook.com/hypervocal"/> NB: RULES CHANGE WITH FORM FACTOR (AND TIME)
  7. 7. TAGS TO CHECK ACCESS DOMAIN INSIGHTS FOR REPORTING <meta property <meta property ! ! CONTROL APPEARANCE ! <meta property <meta property <meta property <meta property <meta property <meta property <meta property ! ! RECRUIT ORGANIC FANS ! <meta property != !‘fb:admins’ != !‘fb:app’ !content!= !content = !‘{list of admins’ IDs}’/> OR! !‘{app ID}’/>! != != != != != != != !content !content !content !content !content !content !content !‘en_GB’ />! !‘website’ />! !‘{Catchy Article Title}’ />! !‘{image 1200x627}’ />! !’{canonical page URL}’ />! !’{site name}’ />! !‘{max 300 characters (Facebook)}’ />! !‘og:locale’ !‘og:type’ !‘og:title’ !‘og:image’ !‘og:url’ !‘og:site_name’ !‘og:description’ = = = = = = = != !‘article:publisher’ !content = !‘{Facebook Page URL or ID}’ />!
  8. 8. 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/

×