Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Successfully Implementing Open Graph

292 views

Published on

The presentation by Steve Mortiboy at WordCamp Raleigh 2019 on April 7th

Published in: Internet
  • Be the first to comment

  • Be the first to like this

Successfully Implementing Open Graph

  1. 1. Successfully Implementing Open Graph By Steve Mortiboy
  2. 2. What is Open Graph?
  3. 3. Why do I need it? Source: http://www.the-pixel.com/best-social-media-network-2018/
  4. 4. Web Traffic Sources • Search Engines • Social Media Networks • Direct Referrals • Natural Inbound Links • Ads • Directories • Traditional Marketing
  5. 5. The Open Graph Protocol • The Open Graph protocol was originally created at Facebook back in 2010 • 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/
  6. 6. Basic OG meta • og:title - The title of your object as it should appear on social media • og:description - A one to two sentence description of your object • 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 • fb:app_id – Needed if you want to use Facebook Insights
  7. 7. Optional OG meta • og:type - The type 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 • og:audio - A URL to an audio file to accompany this object • og:video - A URL to a video file that complements this object
  8. 8. Example OG meta <meta property="og:title" content="How Social Media Impacts Your SEO" /> <meta property="og:type" content="article" /> <meta property="og:url" content="https://semperplugins.com/how-social-media-impacts-seo/" /> <meta property="og:image" content="https://semperplugins.com/wp- content/uploads/2016/11/how-social-media-impacts-seo.jpg" /> <meta property="og:image:width" content="1200" /> <meta property="og:image:height" content="630" /> <meta property="og:site_name" content="WordPress Plugins" /> <meta property="fb:app_id" content="123456789012345" /> <meta property="og:description" content="Even though there is no direct link between social media marketing and SEO, it does have a major influence on the latter. Get one step ahead of the competition!" />
  9. 9. Example Facebook Post
  10. 10. Basic Twitter meta • 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 5MB in size
  11. 11. Optional Twitter meta • twitter:site:id - Same as twitter:site, but the user’s Twitter ID. Either twitter:site or twitter:site:id is required. • twitter:creator:id - Twitter user ID of content creator. Used with summary, summary_large_image cards
  12. 12. Example Twitter meta <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@aioseopack" /> <meta name="twitter:creator" content="@wpsmort" /> <meta name="twitter:domain" content="semperplugins.com" /> <meta name="twitter:title" content="How Social Media Impacts Your SEO" /> <meta name="twitter:description" content="Even though there is no direct link between social media marketing and SEO, it does have a major influence on the latter. Get one step ahead of the competition!" /> <meta name="twitter:image" content="https://semperplugins.com/wp- content/uploads/2016/11/how-social-media-impacts-seo.jpg" />
  13. 13. Example Twitter Card
  14. 14. Images Facebook – Min 1080px / Ideally 1200px by 630px Twitter – Min 300px by 157px / Max 4096px by 4096px LinkedIn – Min 1200px by 627px Pinterest – 735px by 1102px Instagram – 1080px by 1080px Image files should be less than 5MB in size
  15. 15. Poor Image Size
  16. 16. Selecting a Plugin for Open Graph • 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?
  17. 17. Open Graph in All in One SEO
  18. 18. 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 my App ID
  19. 19. Troubleshooting • 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
  20. 20. A Word About Caching 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.
  21. 21. Troubleshooting Tools • Facebook Debug Tool https://developers.facebook.com/tools/debug/ https://developers.facebook.com/tools/debug/sharing/ • Twitter Card Validator https://cards-dev.twitter.com/validator • Pinterest Rich Pins Validator https://developers.pinterest.com/docs/rich-pins/validator/
  22. 22. Further Reading • Facebook Sharing Best Practices https://developers.facebook.com/docs/sharing/web https://developers.facebook.com/docs/sharing/webmasters https://developers.facebook.com/docs/sharing/best-practices • Twitter Cards Guide https://developer.twitter.com/en/docs/tweets/optimize-with-cards/ overview/abouts-cards • Pinterest Rich Pins Guide https://developers.pinterest.com/docs/rich-pins/overview/ LinkedIn Sharing Guide https://www.linkedin.com/help/linkedin/answer/46687/ making-your-website-shareable-on-linkedin?lang=en
  23. 23. Questions?

×