Do you use title tags and meta description tags? Of course you do because you already know meta tags can help boost your search engine rankings.
But did you know that meta tags actually affect your social media traffic? Sure, there is Google’s authorship tags, but what about Facebook and Twitter? In fact, they both have their own social media meta tags that can help you boost the amount of social traffic you’re getting.
Download this cheat sheet of social media meta tags to use open graph and cards.
They’re called Facebook Open Graph and Twitter Cards. Here’s how you can leverage both of them:
Facebook Open Graph
When you share an image on Facebook, what does it look like?
Well, it doesn’t always look like that. Facebook tries to read the code on your page, but it isn’t always able to pull your images. If you don’t use the Open Graph tags when you share a URL from your site on Facebook, this is what it may look like:
That’s what it used to look like with Quick Sprout before I implemented Open Graph tags on my site. After implementing Open Graph tags, I was able to increase my Facebook traffic by 174%, simply because now there was an image next to my Quick Sprout status updates.
Now that you are convinced that you should use Open Graph, here is how you set it up on your website.
If you use WordPress, just install this plugin and you are practically done.
If you aren’t using WordPress, you’ll need to generate meta tags for each page on your site manually. To make the instructions below easier to understand, I’m going to use the blog post 11 Creative Ways to Build Links as a live example.
This is where you put the title of your content. Think of this as being similar to your normal html title tag that a search engine would use. When creating your og:title, keep the character count to fewer than 95 characters.
Example: <meta property=”og:title” content=”11 Creative Ways to Build Links”/>
This is where you describe what type of content you are sharing. Is it a video, picture, blog post, etc.? Here is the full list you can pick from when defining your content type:
Products and Entertainment
Example: <meta property=”og:type” content=”article”/>
This is also similar to your html meta description tag because it is used to describe your content. You shouldn’t care if it is keyword rich, but instead you should come up with a compelling description that will result in more clicks. You have up to 297 characters for this tag.
Example: <meta property=”og:description” content=”Are you tired of building links the old school way? You know, the methods that require you to send out emails to thousands of webmasters begging for links. “/>
Remember I mentioned I was able to increase my Facebook traffic by 174%? It was because I used Open Graph to ensure that Facebook showed an image every time someone shared a URL from Quick Sprout.
By using an og:image tag, you’ll ensure that an image will be alongside the content you are sharing. This way it stands out against all of the other text-based status updates people see in their timelines.
Before I get into how you can use this tag, I’ll walk you through Facebook’s requirements. An image has to be at least 50px by 50px, but preferably bigger than 200px by 200px. Plus, the image can’t be more than 5 MB in size.
Example: <meta property=”og:image” content=”http://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”/>
In this tag, you should place the URL of the page you are sharing. This tag may seem irrelevant, but it’s important because sometimes you’ll have more than one URL for the same content. By using this tag, you’ll ensure that all shares go to one URL versus multiple URLs, which should help your Facebook Edgerank.
Example: <meta property=”og:url” content=”http://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/”/>
This tag tells Facebook the name of your website. You don’t really need this tag, but there is no harm in including it.
Example: <meta property=”og:site_name” content=”Quick Sprout”/>
If you have a fan page on Facebook and you want to get more data in Facebook Insights, then you have to use this tag. It tells Facebook you are the site owner, and it connects your Facebook fan page to your website.
Example: <meta property=”fb:admins” content=”500013011″/>
Now that you have your Facebook Open Graph meta tags in place, let’s move onto Twitter Cards.
Have you ever seen a tweet like this?
Well, these detailed tweets only show up when you utilize Twitter Cards. Wouldn’t you like to have that for your site? It will help it stand out from the crowd.
Here’s how you leverage Twitter Cards:
If you use the SEO for WordPress plugin by Yoast, just follow these steps. For everyone else, follow the steps below.
This meta tag describes the type of content you are sharing. You have three options with Twitter: photo (for images), player (for videos), and summary (for everything else). If you don’t define your card, Twitter will default to summary.
Example: <meta name=”twitter:card” content=”summary”>
This is the page you are sharing on Twitter. Similarly to how Facebook asks for a URL, Twitter does this as well because you may have the same piece of content on your site multiple times. This will ensure one URL gets all of the tweets. Otherwise, your tweets will be split across multiple urls.
Example: <meta name=”twitter:url” content=”http://www.quicksprout.com/2013/03/21/11-creative-ways-to-build-links/ “>
Similarly to your Facebook Open Graph title, this shouldn’t be stuffed with keywords. Make it compelling so people will want to click on it. Again, like with Facebook, you’ll want to limit the character count to 70.
Example: <meta name=”twitter:title” content=”11 Creative Ways to Build Links”>
This is similar to a meta description tag you would use for Google. But don’t stuff it with keywords. Your goal should be to create a compelling sentence that prompts people to click through to your website. Your description is limited to 200 characters.
Example: <meta name=”twitter:description” content=” Are you tired of building links the old school way? You know, the methods that require you to send out emails to thousands of webmasters begging for links. “>
To make your tweet stand out, you need an image. Your images have to be less than 1 MB in file size, and they can’t be smaller than 60px by 60px. Images larger than 120px by 120px will be resized.
Example: <meta name=”twitter:image” content=” http://www.quicksprout.com/wp-content/uploads/2013/03/linkbuilding.jpg”>
After you apply the Twitter Card meta tags to your site, you need to apply to Twitter’s Card program. Once you get accepted, URLs from your website will be shown in the card format.
Meta tags aren’t just for search engines. Social media sites are also leveraging them. Just like how you would optimize your meta tags for Google rankings and click-through rates, you need to do the same for Facebook and Twitter.
So, what do you think about Open Graph and Cards? I know I got a nice increase in traffic from Open Graph, but I would love to hear what you think.