Using Metadata To Optimize Your Content For Social Networks

A quick look at metatags designed to help optimize your content for sharing on social networks.

For most web designers, the Title and Description tag are what we often think of when we hear the word "metadata." But meta tags have come along away since the early days of the internet, and there are plenty of ways we can use them to optimize our content for more than just search engines. Here are several meta tags you can use right now to optimize your content for sharing on social networks.

Open Graph Tags

Open Graph Protocol

Facebook developed the Open Graph Protocol to allow web designers to easily integrate their content into the social graph. When you link to a website or article on Facebook, often you'll see an preview of that link that displays information extracted from the site such as title, a short description, and an image (sometimes giving you multiple images to choose from). Open Graph Tags give you the ability to control how that information is displayed by allowing you to tell Facebook exactly what information to pull from your site. There are dozens of Open Graph Tags available to use. Here is an example of how you might use Open Graph Tags to optimize a blog article:

<meta property="og:type" content="article"/>
<meta property="og:url" content="http://www.example.com"/>
<meta property="og:title" content="Article Title"/>
<meta property="og:description" content="Description of article." />
<meta property="og:image" content="http://www.example.com/image.jpg"/>

It is also worth mentioning that Pinterest currently supports Open Graph formats to create what they refer to as "Rich Pins." So if you're currently implementing the "Pin" button in your website, pay extra attention to the Open Graph Tags you decide to utilize as they will affect the way your content displays on more than one of your targeted social channels

Twitter Card Tags

Twitter has also created meta tags designed to optimize your content for tweets, which like Open Graph Tags, give you the option to associate such information as title, description, and image to your websites. As of the publish date of this article, there are currently 7 Twitter Cards available, each with their own collection of meta tags. Below is an example of the tags that make up what Twitter calls the "Summary Card with Large Image":

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@twitterAccount" />
<meta name="twitter:author" content="@twitterAccount" />
<meta name="twitter:title" content="Article Title" />
<meta name="twitter:description" content="Description of article." />
<meta name="twitter:image:src" content="http://www.example.com/image.jpg" />

Author & Publisher Tags

Google Authorship Tags

In addition to social networks, there are two tags you should also be utilizing that will affect your credibility in the eyes of Google. You've probably seen a Google search result that features an image and a byline associated with the article being displayed. You can achieve the same results for your website using the following two tags. If you do not already have a Google+ profile page, you will need to create one in order to pull this off.

<link rel="publisher" href="https://plus.google.com/publisher-name"/>
<link rel="author" href="https://plus.google.com/author-name"/>

Final Thoughts

After you've added the social media meta tags mentioned above to your site, you can verify that you've implemented them correctly and get a preview of what your link will like using each social network's debugging tool (see further reading below).

comments powered by Disqus