Open Graph Data Makes Sites Shine on Social Networks

Open graph meta data allows your site to display rich objects when people share your content on their favorite social networks.

Open Graph Data Makes Sites Shine on Social Networks

Display Rich Objects on Social Networks

As an example, when you share a web address in a Facebook post, your Open Graph data will display (if you don't have Open Graph data, then the site will pull information directly from your site…which means you can't control it.) Adding this extra markup is yet another way to improve your SEO as well as provide a good experience for people that share your content.

Starting with the Basic Open Graph

There are four required tags for every page:

  • og:title
    • This is the title that you want displayed
    • There should be NO BRANDING in this tag
  • og:type
    • This describes what type of content your page represents
    • Different types of media will show up differently on various social media platforms.
    • Examples: website (default), music.song, video.movie
  • og:image
    • Provide an image URL that represents your content.
    • Facebook suggests an image of 1200×630 pixels
  • og:url
    • The canonical URL of your content that will be used as its permanent ID in the graph
    • Once set, this URL should not be changed.
    • Do not use session variables, user identifying parameters, or counters.

Here is an example of what the basic markup looks like in the head section of a web page:

<html>
<head>
<title>A Catchy Title Tag</title>
<meta property="og:title" content="A Catchy Title Tag" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.example.com/a-catchy-title/" />
<meta property="og:image" content="http://www.example.com/images/open-graph-pic.jpg" />
</head>

Once you're finished adding the above code, click here to check your progress with the Facebook Debugger Tool.

Share Your Location With Social Meta Tags

You can add Location Based Social Meta Tags; this will make specific local places show up nicely when people share your pages and posts. As we all know, local search is a vital component to many businesses and the ability to embed a location directly in what is being shared is an effective way to engaged with your customers. Facebook utilizes their own Open Graph tags, while Google+ uses the schema.org markup.

Facebook Location Example:

<meta property="og:latitude" content="37.416343"/>
<meta property="og:longitude" content="-122.153013"/>
<meta property="og:street-address" content="1601 S California Ave"/>
<meta property="og:locality" content="Palo Alto"/>
<meta property="og:region" content="CA"/>
<meta property="og:postal-code" content="94304"/>
<meta property="og:country-name" content="USA"/>

Once you install your open graph tags, be sure to verify them with the Facebook Open Graph Tool: http://developers.facebook.com/tools/lint

Google+ Location / Local Discoverability Tags

<meta property="place:location:latitude" content="13.062616"/>
<meta property="place:location:longitude" content="80.229508"/>
<meta property="business:contact_data:street_address" content="Street Name"/>
<meta property="business:contact_data:locality" content="City Name"/>
<meta property="business:contact_data:postal_code" content="ZIP Code"/>
<meta property="business:contact_data:country_name" content="Country"/>
<meta property="business:contact_data:email" content="contact@email.com"/>
<meta property="business:contact_data:phone_number" content="+91 1234567890"/>
<meta property="business:contact_data:website" content="http://www.website.com"/>

Optimized Social Meta Tags are Good for SEO

If you are already employing good SEO strategies, it will be relatively easy to incorporate the social meta tags and Open Graph meta data into your markup. According to KissMetrics: “Adding Open Graph tags to your website won’t directly affect your on-page SEO, but it will influence the performance of your links on social media, so that means it’s worth looking into.”

http://blog.kissmetrics.com/open-graph-meta-tags/

Sharing on social media can improve your search engine rankings. Any markup that enhances this type of sharing is going to help you rank well on search engines. Furthermore, anything that makes it easier for search engines to develop a reliable snapshot of your page’s content will most certainly benefit your search engine rankings.

Your best choice to start with is Open Graph; all of the major sites use this as a fallback, including Twitter. Obviously, the easier you make it for a network to display your data, the better - consider writing your code so that all of your social meta tags pull data from the same location.

In my personal opinion, this author predicted the future when he wrote this article in 2010.:

http://searchengineland.com/facebooks-open-graph-for-local-seo-52098

A Must Have Reference: (includes coding cheat sheet)

http://moz.com/blog/meta-data-templates-123

18 Important Meta Tags:

http://www.iacquire.com/blog/18-meta-tags-every-webpage-should-have-in-2013

Add Specific Product Markup to Help Drive Sales

Have you ever done a Google Search for a product, and the price, image and description show up directly in the search results?

This information is coming from meta tags, and it can tremendously help the way your product appears on social networks. There are specific tags for products so merchants can control extra how their content appears when people share items on social networks.

If people love your product, then they are eager to share it on social media. Perhaps it’s a desire to feel like they found something first, or maybe it’s so they can help their friends find something valuable. Whatever the case is, if people want to share your products, you need to make it easy for them.

The code to add product markup to your website is very similar to other open graph data, with the exception of adding a few additional tags. In my opinion, Twitter is the leader at product sharing with their Twitter Product Cards.

Summary of Product Markup

Add Social Sharing to Your Marketing Campaign

Social Sharing is yet another way to your brand in front of new customers. When your clients love your product or service, they are going to be very inclined to share your content on social media channels, like Pinterest, Facebook, Twitter or Instagram. Optimizing your social meta tags makes this process much easier, and when they share the information, they are going to be delighted with the rich snippets they produce.

When Social Media Sharing Goes Bad

Of course, the converse is true; if people are unhappy with your products or services, then you are going to hear about it on your social media channels. You should have a standard procedure for dealing with complaints that will appear on your feeds.

Never get angry or hostile towards people leaving negative comments.

Come up with a policy on your website that clearly states what kind of comments will be deemed inappropriate; don’t delete negative comments unless they violate your policy (IE: They use profanity, etc.)

Use the negative comments as an opportunity to improve your services.

Keep in mind, like with any advertising campaign, it is always a good idea to avoid putting all of your eggs in one basket. The same applies for utilizing social sharing in a media campaign. Furthermore, if all of your tactics sound like commercials or advertisements, then you will quickly be deemed a spammer by your audience. The goal of your social media channels is to share your love of what you do with people that have a similar interest. If you are posting in hopes of only increasing your conversions, you should consider rethinking your approach.

Additional Resources About Social Meta Tags

Facebook

Learn more about Open Graph for Facebook:

https://developers.facebook.com/docs/opengraph/

Use your Facebook admin id to get insights / analytics about your post:

https://www.facebook.com/help/336893449723054

Test Your Facebook book code here:

https://developers.facebook.com/tools/debug

Facebook Context Cards - Alert friends when the time is right

http://mashable.com/2014/05/14/facebook-context-cards/

Insider Tips for Facebook:

  • http://graph.facebook.com/page-name

  • Several forums suggest that it’s best to create a square image that is rounded to the nearest 100 in pixels (IE: 500px not 515px).

  • Don’t use strange characters in the filename: letters and numbers

  • Keep open graph images on the same server as the site

  • Stick with jpg

Google+

Learn More About Google+ Snippets Here:

https://developers.google.com/+/web/snippet/

Test Your Google Code Here:

http://www.google.com/webmasters/tools/richsnippets

Pinterest

Learn More About Rich Pins:

https://developers.pinterest.com/rich_pins/

Test Your Pinterest Code Here:

http://developers.pinterest.com/rich_pins/validator/

Twitter

Learn More About Twitter Cards:

https://dev.twitter.com/docs/cards

Add Your Product Card:

https://dev.twitter.com/docs/cards/types/product-card

Add a Tweet This Button to Your Website

https://about.twitter.com/resources/buttons

Test Your Twitter Code Here:

https://dev.twitter.com/docs/cards/validation/validator

Twitter Lead Generation Cards (LGC’s)

You can now include a lead generation form directly in your Tweets. Your tweet will initially appear as before, with one exception: a link to “View Details”. Clicking View Details will expand a small form that is automatically populated with the user’s email address. It couldn’t be simpler!

The only issue with Lead Generation Cards is that these tweets can’t be composed in the regular interface; you must the Twitter Ads interface to create your LGC’s. Before getting started, you need to collect the following mandatory information:

  • Your Site’s Privacy Policy
  • An alternative URL where people can find out more information

This is not technically a social meta tag, but it is so closely related that I’m including it in the social meta tag optimization category. This is an exciting new way to interact more efficiently with the people that are engaged with your content. Happy Tweeting!

Twitter Summary Card

This allows you to display an image about your page/post directly in the tweet that someone has shared. This should not be a generic image (like a logo or wordmark), rather it should visually summarize what your content is about. I like to think of this as a Featured Image.

  • Minimum Width: 280px

  • Minimum Height: 150px

Read More About Twitter Summary Cards

https://dev.twitter.com/docs/cards/large-image-summary-card

Twitter Photo Cards

If your post is pretty much a photo, then you can use a Twitter Photo Card. This way, when people share your page/post, a “front and center” picture will show up. Currently animated gif’s are not supported and file size must be below 1MB.

Here are some quick facts:

  • Web: maximum height of 375px, maximum width of 435px

  • Mobile (non-retina displays): maximum height of 375px, maximum width of 280px

  • Mobile (retina displays): maximum height of 750px, maximum width of 560px

Read More About Twitter Photo Cards:

https://dev.twitter.com/docs/cards/types/photo-card

Twitter Gallery Cards

When you want to share multiple pictures at once.

Read More About Twitter Gallery Cards:

https://dev.twitter.com/docs/cards/types/gallery-card

Social Meta Tag Checklist

  • Check for Open Graph / Twitter Card / Schema.org
  • Add default Open Graph tags to page
  • Add basic Twitter card to page
  • Make sure image sizes are correct per platform
  • Fine Tune Settings for Social Success

Minimum Social Media Tag Template

<!-- Place this data between the <head> tags of your website -->

<!-- Twitter Card data -->

<meta name="twitter:card" value="summary">

<!-- Open Graph data -->

<meta property="og:title" content="Title Here" />

<meta property="og:type" content="article/website/" />

<meta property="og:url" content="http://www.example.com/" />

<meta property="og:image" content="http://example.com/image.jpg" />

<meta property="og:description" content="Description Here" />

Standard Social Media Tag Template

<!-- Place this data between the <head> tags of your website -->

<!-- Twitter Card data -->

<meta name="twitter:card" content="summary">

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Page Title less than 70 characters">

<meta name="twitter:description" content="Page description less than 200 characters">

<-- Twitter Summary card images must be at least 200x200px -->

<meta name="twitter:image" content="http://www.example.com/image.jpg">

<-- Twitter summary card with multiple image gallery. Images must be less than 1MB in size -->

<meta name="twitter:image0" content="http://www.example.com/image.jpg">

<meta name="twitter:image1" content="http://www.example.com/image.jpg">

<meta name="twitter:image2" content="http://www.example.com/image.jpg">

<!-- Open Graph data -->

<meta property="og:title" content="Title Here" />

<meta property="og:type" content="article/website" />

<meta property="og:url" content="http://www.example.com/" />

<meta property="og:image" content="http://example.com/image.jpg" />

<meta property="og:description" content="Description Here" />

<meta property="og:site_name" content="Site Name, i.e. MoreVisibility" />

<meta property="fb:admins" content="Facebook numeric ID" />

Full Social Media Tag Template: Article or Blog

<!-- Update your html tag to include the itemscope and itemtype attributes. -->

<html itemscope itemtype="http://schema.org/Article OR http://schema.org/Blog">

<!-- Place this data between the <head> tags of your website -->

<!-- Google Publisher Markup. This should not be used at the post level-->

<link rel="publisher" href=”https://plus.google.com/[Google+_Page_Profile]"/>

<!-- Schema.org markup for Google+ -->

<meta itemprop="name" content="The Name or Title Here">

<meta itemprop="description" content="This is the page description">

<meta itemprop="image" content="http://www.example.com/image.jpg">

<!-- Twitter Card data -->

<meta name="twitter:card" content="summary_large_image">

<meta name="twitter:site" content="@publisher_handle">

<meta name="twitter:title" content="Page Title">

<meta name="twitter:description" content="Page description less than 200 characters">

<!-- Twitter summary card with large image must be at least 280x150px -->

<meta name="twitter:image:src" content="http://www.example.com/image.html">

<!-- Open Graph data -->

<meta property="og:title" content="Title Here" />

<meta property="og:type" content="article" />

<meta property="og:url" content="http://www.example.com/" />

<meta property="og:image" content="http://example.com/image.jpg" />

<meta property="og:description" content="Description Here" />

<meta property="og:site_name" content="Site Name, i.e. MoreVisibility" />

<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />

<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />

<meta property="article:section" content="Article Section, i.e. SEO Blog/SEM Blog/Analytics Blog/ Social Media Blog" />

<meta property="article:tag" content="Article Tag" />

<meta property="fb:admins" content="Facebook numberic ID" />

WordPress Plugins for Social Meta Tag Optimization

http://wordpress.org/plugins/wpsso/

← Back to the Blog