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

1. Successfully Implementing
Open Graph
By Steve Mortiboy

2. Social Media Networks

3. The Importance of Social Media

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

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. 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. 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. 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. The Evolution of Facebook -
2006

10. The Evolution of Facebook -
2015

11. The Evolution of Twitter - 2006

12. The Evolution of Twitter - 2015

13. Mobile-First Social Media

14. Images on Facebook

15. Images on Facebook

16. Images on Twitter

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

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. 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. 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. 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. 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. Setting Open Graph on a Post

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

30. Optimal Image Size

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. 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. 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. 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. 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. Facebook Debug Tool

37. Facebook Debug Tool

38. Questions?

40. • Support
• Security
• Performance
• Development
• Design
• SEO