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

• Directories

• Traditional Marketing

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/

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

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

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

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 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/

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

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

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

Example Twitter Card

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

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." />

Documentation on Open Graph

• Facebook Sharing Best Practiceshttps://developers.facebook.com/docs/sharing/best-practices

• Twitter Cards Guidehttps://dev.twitter.com/cards/overview

• Google+ Documentationhttps://developers.google.com/+/web/snippet/?hl=en

• Pinterest Rich Pins Guidehttps://developers.pinterest.com/docs/getting-started/introduction/

WordPress Plugins

• All in One SEO Packhttps://wordpress.org/plugins/all-in-one-seo-pack/

• Jetpackhttps://wordpress.org/plugins/jetpack/

• Facebookhttps://wordpress.org/plugins/facebook/

• WP Facebook Open Graph Protocolhttps://wordpress.org/plugins/wp-facebook-open-graph-protocol/

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?

Setting Open Graph on a Post

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

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

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

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

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.

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

Troubleshooting Tools

• Facebook Debug Toolhttps://developers.facebook.com/tools/debug/og/object/

• Twitter Card Validatorhttps://dev.twitter.com/docs/cards/validation/validator

• Pinterest Rich Pins Validatorhttps://developers.pinterest.com/docs/rich-pins/validator/

Facebook Debug Tool

Facebook Debug Tool

Questions?

• Support

• Security

• Performance

• Development

• Design

• SEO