How to Drive More Traffic to Your Blog Posts From Social Networks

social media how toDo you want people to click on your blog posts when others share them on Facebook, LinkedIn and Google+?

Is your blog optimized for the best visual display when people share your content?

Are your posts are accompanied by a nice picture with an accurate description so they stand out in social media streams?

Why Does This Matter?

When a link to your post is accompanied by an image and description, it’s more likely that people will click on that link to read the content behind it and share it.

There’s an element that lets you control how your post appears in a status update.

It’s called a “social snippet“. You can manage these social snippets and improve social shareability when you add a few tags to the HTML code on your website or blog.

In this article I’ll examine social snippets and show you how to control the images that accompany your posts when they appear in status updates on Facebook, LinkedIn and Google+.

Anatomy of a Social Snippet

Social snippets vary slightly depending on where they’re shared. It’s useful to examine how they look on each social platform.

Facebook Social Snippet

The Facebook social snippet is a combination of the page title, description and image.

facebook social snippet

Facebook status updates combine page titles, domains, meta descriptions and images.

LinkedIn Social Snippet

Like Facebook, LinkedIn status updates include a title, description and image. Here’s how the LinkedIn social snippet works.

linkedin social snippet

LinkedIn status updates are very similar, combining page titles, domains, meta descriptions and images.

Google+ Social Snippet

The Google+ social snippet also has a title, description and image.

google plus social snippet

Google+ status updates also combine titles and images, but they use the favicon rather than the URL and they do not show the meta description.

Google+ prefers to display square images. If there are several possible images to choose from on your page, Google+ is more likely to display the image that’s closest to square in dimensions.

How to Add the Tags to Manage Social Snippets

If links to your content don’t show an image, title or description when you publish them in your status updates on Facebook, LinkedIn or Google+, you can fix it by adding tags into the HTML code of your document.

Use one of the tagging methods below to add the appropriate tags so links to your content will show the right image in any status update.

Note: These are somewhat technical fixes, so if you’re not comfortable editing the HTML of your website, don’t hesitate to send this article along to your web developer.

#1: Use Title and Meta Description Tags

You’ll need to work with some of the title and meta description tags on your blog post. Social snippets in all social networks use these two page elements:

<title>…</title>
<meta name=”description” content=”…” />

These also control the snippets in search engine listings, so they’re important for SEO best practices. Make sure to use them with search in mind, as well as social.

#2: Use Schema.org Microformatting

Schema.org is a collaboration among the major search engines. They’ve created a standard set of tags for all kinds of things. To control your social snippets, you’ll only need these tags:

<body itemscope itemtype=”http://schema.org/Product”>
<h1 itemprop=”name”>Interesting Headline</h1>
<img itemprop=”image” src=”{image-url}” />
<p itemprop=”description”>Thought provoking description</p>
</body>

#3: Use “Open Graph Protocol” Tags

Facebook, Google+ and LinkedIn all use Open Graph standards for tagging content. Add these tags to set the image in status updates:

<meta property=”og:image” content=”/image.jpg” />

Open Graph tags can also be used to set the title and description.

<meta property=”og:title” content=”…” />
<meta property=”og:description” content=”…” />

#4: Use Image_SRC Meta Tags

For Facebook, you can use the image_src meta tag between the <head> and </head> tags to manage the images in social snippets.

<link rel=”image_src” href=”http://www.example.com/image.jpg” />

If you add more than one of these links for more than one image, the person who shares will have a choice of images to use in the snippet.

How Do I Manage All of These Tags? Where Do They Go?

Some of these tags go in the <head> of the HTML, and others go in the <body>. Here’s a quick guide showing how to put the tags into the right places so your posts look great when shared in social networks. Contact your web developer if you need assistance.

social snippets guide

The tags that drive social snippets appear in several places in the HTML.

Using WordPress? Try These Plugins

Every content management system (such as WordPress) will give you control over the title and meta description tags. For WordPress users, here are the plugins that will add the other tags for you:

  • All in One Schema.org Rich Snippets Plugin: This plugin gives you control over tags for social snippets, and may also make your search listings look better when you rank in Google.
  • WP Open Graph Plugin: Similar to the Schema.org plugin, this handy little tool will add all of the Open Graph meta tags.
  • Custom Image_Src Plugin:
 If your shared content still doesn’t look right in Facebook, try this one. By creating the image_src tag, this plugin will force Facebook to use image of your choice.

No need to touch the code, just install the plugin and manage the tags from within WordPress.

Still not working?

After making sure you have all of the code for these tags set up on your site, if you still don’t see the images in your social snippets, the old version of your page without your new tags may be stored in your browser. You may need to clear your browser cache.

You can also clear your Facebook cache using the Facebook URL Debugger.

Now, try sharing again and you should see your tags in action.

Why so many options?

There are lots of ways to tag content, and social networks do their best with the tags they’re given. Since they consider many page elements, a web designer has to consider many types of tags. There’s no single official set of tags.

It reminds me of the old programmer’s joke…

Q: What’s the best thing about technology standards?
A: There are so many to choose from!

Your Turn

Using the right tags can dramatically impact how your content appears in social media streams when it’s shared—which, in turn, can affect the number of clicks and shares your content receives.

Remember, every great post needs a compelling image and great content is important. Follow these options to make sure your content is ready for showtime.

What do you think? Have you used any of these tagging methods to manage how your content appears in social media streams? What changes in engagement have you noticed? Share your thoughts and observations in the comments below.

Tags: , , , , , , , , ,

About the Author, Andy Crestodina

Andy Crestodina is the Strategic Director of Orbit Media, a web design company in Chicago. Other posts by »




More Info
  • http://profiles.google.com/trappermark Mark Traphagen

    Nice guide. Just one small correction. Google+ dropped descriptions from its post link snippets many months ago. It now displays just an image and title.

  • Andy Crestodina

    Nice catch! Thanks for pointing that out, Mark. There was a gap between the writing and the posting on this one.

    …let me say something to the readers of this comment: Mark is one of the most active, generous and informed pros on G+!

  • http://www.seomasterexpert.com/ Swapan Kumar

    Nice Guide!! Thanks for sharing social snippet!! Insightful post!!

  • http://rhogroupee.com/ Rosemary ONeill

    Thanks Andy! You have a knack for breaking tricky things down so the rest of us can “get it.”

  • http://profiles.google.com/trappermark Mark Traphagen

    Wow, Andy, thanks for the very kind words. I don’t want my one correction to overshadow how valuable and useful I think this post is. I’ve bookmarked it to share with others whenever this topic comes up.

  • http://www.EntrepreneurOnFire.com/ John Lee Dumas

    Wow, great step-by-step resource Andy! The visuals in the “adding tags” section are especially helpful to really break down the code. Thanks for this!

  • Mere Morsel

    Thanks for the clarity, I will add this to my ‘gospel’ of ultra useful must haves.

  • Andy Crestodina

    Glad this is useful! But I should give credit to Cindy, my editor for this post. She was the one who really made sure we got down to the complete breakdown of the code. The earlier versions of this weren’t quite as practical…

  • Andy Crestodina

    Thank you, Rosemary! Nice to see you here in the comments. Hope things are going well for you. Let me know if I can help with anything!

  • http://sproutsocial.com/features/social-media-engagement Sarah @ Sprout Social

    Great resource, Andy! If content isn’t easy to share, it won’t be. Thanks for the step-by-step overview and exact tags to use. This is a great breakdown for non web developers.

  • Terri Main

    This is all great, but what about Blogger? I can access the code to the blog itself. I know that, but can I access each individual page. It doesn’t help much if I just put the description on the blog and not on the individual post.

    Good, though, for webpages. I might consider that when I promote webpages on social networks.

  • donegalcottages

    I should have read these comments, especially one by Mark Traphagen, before trying to figure out why G+ would not display meta description.

  • Pingback: Learn to Drive Traffic from Social Networks

  • http://writespeaksell.com jeannettepaladino

    I’m surprised that you didn’t include Yoast’s highly regarded WordPress SEO plugin, which enables you to include meta tags and snippet descriptions with built-in SEO features.

  • Edward

    Is this better than using Facebook’s new feature they (finally) added where you can upload a custom image as a thumbnail in the snippet?

  • Vivek G Maudgalya

    Very useful post. I had came across so many related posts but this is one I which is most convincing. Thanks for sharing.

  • DebbieO

    Great Tips. Thanks for sharing

  • http://www.thelyonsgrouptx.com/ Shellye Jackson Lyons

    Excellent Post. Thanks so much for sharing. I love all the blogs to help me keep up with the trends!

  • El Michelle

    This is very helpful! I wish I could use these tips :/ I don’t have a web designer and all of this looks like French to me!

  • Hilda Rodgers

    Great post! One thing… why don’t you use images more on this site for those who want to pin your posts? I like to keep social media tips for future reference and share with my followers, but frequently the only picture is your little logo guy. {I realize this particular post has pictures… but the content reminded me that many don’t}. Something to consider… so your content can be shared more. Thanks!

  • Dumont

    Andy,

    Thanks so much for this useful guide. It answers several questions that have had me stumped!

  • http://www.jamesmarquezblog.com/ James Marquez

    Thanks for your post Andy. These instructions fit exactly what I was looking for. My blog will be a better place because of you. Thanks!

  • Lliam Scholtz

    Thanks Andy. Facebook allows you to edit your snippets title, description and image by simply clicking on each. Nice little trick to know so thought I’d share it :)

  • http://www.23andconfused.com/ Joey Kimsey

    Thanks for the article! I just downloaded All In One Schema.org Rich Snippets to help out with this on my blog!

  • Pingback: J. Luke Chitwood | 10 Commandments of Social Sharing and Website Traffic







Check out the Social Media Marketing Podcast!
Join our Social Media Marketing Networking Club
Download the free Social Media Marketing Industry Report
Get Your FREE Copy of the 2014 Social Media Marketing Industry Report
Wondering how your peers are using social media? Get this free report (50 pages, 80+ charts) and never miss another great article from Social Media Examiner.