An Incomplete Guide to Open Graph metatags for Facebook
3 likes2,761 views
The document serves as a guide to Facebook Open Graph tags, detailing proper use for enhancing article sharing on the platform. It specifies essential tags like og:title, og:description, and og:image, along with best practices for size and character limits. Additionally, it warns users about potential changes in Facebook's metadata representation and the importance of keeping the tags updated according to evolving guidelines.
An Incomplete Guide to Open Graph metatags for Facebook
- 1. FACEBOOK OPEN GRAPH TAGS AN INCOMPLETE GUIDE Mat Morrison 2013-11-05
- 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. 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. 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. • • • • 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. • • • 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. 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. 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/