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

1. Successfully Implementing
Open Graph
By Steve Mortiboy

2. What is Open Graph?

3. Why do I need it?
Source: http://www.the-pixel.com/best-social-media-network-2018/

4. Web Traffic Sources
• Search Engines
• Social Media Networks
• Direct Referrals
• Natural Inbound Links
• Ads
• Directories
• Traditional Marketing

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. 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. 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. 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. Example Facebook Post

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. 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. 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. Example Twitter Card

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. Poor Image Size

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. Open Graph in All in One SEO

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. 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. 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. 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. 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. Questions?