Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Successfully Implementing
Open Graph
By Steve Mortiboy
Social Media Networks
The Importance of Social Media
Web Traffic Sources
• Search Engines
• Social Media Networks
• Direct Referrals
• Natural Inbound Links
• Ads
• Directorie...
Web Traffic Trends
• According to Shareaholic the top 8 social networks
drove 31.24% of overall traffic to sites in 2014
•...
Mobile Web Trends
• According to StatCounter use of mobile devices to
access the internet has increased by 67% worldwide
o...
What Does This Mean For Me?
• Business owners need a presence on social media and
need to know how to market on social med...
Going Viral
The ALS Ice Bucket Challenge
• July to August 2014
• 2.4 million videos on Facebook
• 2.2 million Tweets
• 739...
The Evolution of Facebook -
2006
The Evolution of Facebook -
2015
The Evolution of Twitter - 2006
The Evolution of Twitter - 2015
Mobile-First Social Media
Images on Facebook
Images on Facebook
Images on Twitter
The Open Graph Protocol
• The Open Graph protocol was originally created at
Facebook
• It has been adopted by many social ...
Basic Open Graph Metadata
• og:title - The title of your object as it should appear on
social media
• og:image - An image ...
Optional Open Graph Metadata
• og:description - A one to two sentence description of your
object
• og:site_name - If your ...
Twitter Cards
With Twitter Cards, you can attach photos, videos and media
to Tweets that drive traffic to your website
Twi...
Example Twitter Card
Optional Twitter Metadata
• twitter:card – The card type which controls card display
• twitter:site – @username for the we...
Example Open Graph Metadata
<meta property="og:title" content="All in One SEO Social Meta Panel optimizes your social
shar...
Documentation on Open Graph
• Facebook Sharing Best Practices
https://developers.facebook.com/docs/sharing/best-practices
...
WordPress Plugins
• All in One SEO Pack
https://wordpress.org/plugins/all-in-one-seo-pack/
• Jetpack
https://wordpress.org...
Selecting a Plugin
• Does it let you to set site wide defaults such as og:type
for post types such as products or videos?
...
Setting Open Graph on a Post
Image Sizes for Social Networks
Facebook – 1200px by 630px
Twitter – 1024px by 512px
LinkedIn – 800px by 800px
Google+ – 8...
Poor Image Size
Optimal Image Size
Common Problems
• Duplicate Open Graph metadata is present on the page
• Open Graph metadata has already been crawled and
...
Troubleshooting Open Graph
• Check your source code for Open Graph
metadata by searching source code for og:
• Check your ...
Caching of Open Graph
Metadata
Most social networks crawl information about your site
and cache it for a specific period o...
Troubleshooting Caching Issues
• Facebook – Use their debug tool to Fetch New Scrape
information and check the information...
Troubleshooting Tools
• Facebook Debug Tool
https://developers.facebook.com/tools/debug/og/object/
• Twitter Card Validato...
Facebook Debug Tool
Facebook Debug Tool
Questions?
• Support
• Security
• Performance
• Development
• Design
• SEO
Successfully implementing open graph by steve mortiboy
Nächste SlideShare
Wird geladen in …5
×

Successfully implementing open graph by steve mortiboy

1.200 Aufrufe

Veröffentlicht am

This is the session from WordCamp Hampton Roads on October 17th, 2015

Veröffentlicht in: Internet
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Successfully implementing open graph by steve mortiboy

  1. 1. Successfully Implementing Open Graph By Steve Mortiboy
  2. 2. Social Media Networks
  3. 3. The Importance of Social Media
  4. 4. Web Traffic Sources • Search Engines • Social Media Networks • Direct Referrals • Natural Inbound Links • Ads • Directories • Traditional Marketing
  5. 5. Web Traffic Trends • According to Shareaholic the top 8 social networks drove 31.24% of overall traffic to sites in 2014 • This is an increase of 9% over the previous year • Facebook, Pinterest and Twitter are the top 3 social networks for web traffic • Facebook is the biggest referrer with 24% of traffic Source: https://blog.shareaholic.com/social-media-traffic-trends-01-2015/
  6. 6. Mobile Web Trends • According to StatCounter use of mobile devices to access the internet has increased by 67% worldwide over the last 12 months • Web access from mobile devices grew to 28.5% of device traffic in 2014 • This is an increase of 11% over the previous year Source: http://gs.statcounter.com/press/mobile-internet-usage-soars-by-67-perc
  7. 7. What Does This Mean For Me? • Business owners need a presence on social media and need to know how to market on social media • Business owners need to integrate their websites with their social media to push and pull content • Website owners need to provide tools to help visitors share content with their friends on social media • Content shared on social media needs to look good in order to attract attention in a noisy environment
  8. 8. Going Viral The ALS Ice Bucket Challenge • July to August 2014 • 2.4 million videos on Facebook • 2.2 million Tweets • 739,000 new donors to the ALS Association • Over $100 million in donations • Started with a challenge on Facebook
  9. 9. The Evolution of Facebook - 2006
  10. 10. The Evolution of Facebook - 2015
  11. 11. The Evolution of Twitter - 2006
  12. 12. The Evolution of Twitter - 2015
  13. 13. Mobile-First Social Media
  14. 14. Images on Facebook
  15. 15. Images on Facebook
  16. 16. Images on Twitter
  17. 17. The Open Graph Protocol • The Open Graph protocol was originally created at Facebook • It has been adopted by many social networks • It enables any web page to become a rich object in a social graph • Website owners can influence how their content appears on social networks • More information can be found at http://ogp.me/
  18. 18. Basic Open Graph Metadata • og:title - The title of your object as it should appear on social media • og:image - An image URL which should represent your object • og:url - The canonical URL of your object that will be used as its permanent link • og:type - The type of your object
  19. 19. Optional Open Graph Metadata • og:description - A one to two sentence description of your object • og:site_name - If your object is part of a larger web site, the name which should be displayed for the overall site • og:locale - The locale these tags are marked up in. The default is en_US • og:audio - A URL to an audio file to accompany this object • og:video - A URL to a video file that complements this object
  20. 20. Twitter Cards With Twitter Cards, you can attach photos, videos and media to Tweets that drive traffic to your website Twitter Card Types: • Summary Card: Title, description, thumbnail, and Twitter account attribution • Summary Card with Large Image: Similar to a Summary Card, but with a prominently featured image • App Card: A Card to detail a mobile app with direct download • Player Card: A Card to provide video/audio/media
  21. 21. Example Twitter Card
  22. 22. Optional Twitter Metadata • twitter:card – The card type which controls card display • twitter:site – @username for the website owner used in the card footer • twitter:creator – @username for the content creator/author • twitter:title – The title of content (max 70 characters) • twitter:description – The description of content (maximum 200 characters) • twitter:image – The URL of the image to use in the card. This image must be less than 1MB in size
  23. 23. Example Open Graph Metadata <meta property="og:title" content="All in One SEO Social Meta Panel optimizes your social shares | Semper Plugins" /> <meta property="og:type" content="article" /> <meta property="og:url" content="http://semperplugins.com/blog/aioseop-social-meta/" /> <meta property="og:image" content="http://semperplugins.com/wp-content/uploads/ogp.png" /> <meta property="og:site_name" content="WordPress Plugins" /> <meta property="og:description" content="All in One SEO Pack Pro WordPress SEO plugin helps you manage your Open Graph and Twitter Card meta data for social media shares." /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@aioseopack" /> <meta name="twitter:domain" content="semperplugins.com" /> <meta name="twitter:description" content="All in One SEO Pack Pro WordPress SEO plugin helps you manage your Open Graph and Twitter Card meta data for social media shares." />
  24. 24. Documentation on Open Graph • Facebook Sharing Best Practices https://developers.facebook.com/docs/sharing/best-practices • Twitter Cards Guide https://dev.twitter.com/cards/overview • Google+ Documentation https://developers.google.com/+/web/snippet/?hl=en • Pinterest Rich Pins Guide https://developers.pinterest.com/docs/getting-started/introduction/
  25. 25. WordPress Plugins • All in One SEO Pack https://wordpress.org/plugins/all-in-one-seo-pack/ • Jetpack https://wordpress.org/plugins/jetpack/ • Facebook https://wordpress.org/plugins/facebook/ • WP Facebook Open Graph Protocol https://wordpress.org/plugins/wp-facebook-open-graph-protocol/
  26. 26. Selecting a Plugin • Does it let you to set site wide defaults such as og:type for post types such as products or videos? • Does it let you select which image is used when content is shared? • Does it let you set specific Open Graph metadata for individual content including posts, pages and custom post types? • Does it help you debug typical problems?
  27. 27. Setting Open Graph on a Post
  28. 28. Image Sizes for Social Networks Facebook – 1200px by 630px Twitter – 1024px by 512px LinkedIn – 800px by 800px Google+ – 800px by 1200px Pinterest – 735px by 1102px Instagram – 1200px by 1200px Image files should be less than 1MB in size
  29. 29. Poor Image Size
  30. 30. Optimal Image Size
  31. 31. Common Problems • Duplicate Open Graph metadata is present on the page • Open Graph metadata has already been crawled and cached • Image does not meet file size and dimensions criteria • Sharing plugins don’t use my Open Graph metadata • Facebook rejected my Open Graph Type • Facebook rejected by Profile ID
  32. 32. Troubleshooting Open Graph • Check your source code for Open Graph metadata by searching source code for og: • Check your source code for duplicate Open Graph metadata by searching source code for og: • Use the free debug tool provided by Facebook to Fetch New Scrape information • Check the information scraped by Facebook to the Open Graph metadata in the source code of your site • Make sure your image meets the dimensions and file size specified by the social network
  33. 33. Caching of Open Graph Metadata Most social networks crawl information about your site and cache it for a specific period of time, typically seven days. Some social networks provide information on how you can force them to purge this cached information and request that they recrawl your content.
  34. 34. Troubleshooting Caching Issues • Facebook – Use their debug tool to Fetch New Scrape information and check the information they show against the Open Graph metadata in the source code of your site • Twitter – Follow their instructions in their documentation at https://dev.twitter.com/cards/troubleshooting#refreshing
  35. 35. Troubleshooting Tools • Facebook Debug Tool https://developers.facebook.com/tools/debug/og/object/ • Twitter Card Validator https://dev.twitter.com/docs/cards/validation/validator • Pinterest Rich Pins Validator https://developers.pinterest.com/docs/rich-pins/validator/
  36. 36. Facebook Debug Tool
  37. 37. Facebook Debug Tool
  38. 38. Questions?
  39. 39. • Support • Security • Performance • Development • Design • SEO

×