Everyone has seen
meta tags in use, whether they realize it or not. Meta tags are all around us, and they make the web more easily consumable for search engines, bots and programs. Google uses meta descriptions when it produces it’s search results (although they have the liberty to change them to better fit the search query), and also uses authorship markup to display authors. Twitter uses meta tags to display Twitter cards, like the one below.
— Brad Knutson (@BradSKnutson) May 21, 2013
Meta tags were used to show the post title, description and image.
Perhaps the most commonly mentioned meta tag is the meta keywords tag. This tag was once popular among SEOs and webmasters to give search engines an idea of what keywords the author is attempting to rank for. Google stated in 2009 that it no longer supported the use of the meta keywords tag. Just because Google doesn’t support it, doesn’t mean that all search engines ignore it. Still though, I wouldn’t waste your time with it.
Common Meta Tags
- Title tag
<title>Title text goes here - less than 70 characters</title>
Not exactly a meta tag, but extremely important none-the-less. The title tag is often regarded as the single most important factor when considering ranking factors for keywords. The title tag is said to be limited to 70 characters, but when your building a page, there is nothing stopping you from writing a longer title. Search engines will truncate your title, maybe even rewrite it (if it’s longer than 70 characters) to better fit a search query.
Ultimately, you should get write your title tags for human consumption, and strongly feature your targeted keywords. Keep them to under 70 characters, because we never want to leave anything up to search engines to figure out on their own.
- Meta Description Tag
<meta name="description" content="Description of the individual page goes here - less than 156 characters">
The meta description tag is used to describe the specific page it appears on. Meta descriptions should be unique for every page, and not duplicated across your site. The description should be a preview of the larger post. Search engines will often use your description in their search results, so you’ll want to make it description and intriguing. Social media sites like Twitter can use the description tag when rendering previews of your page, as shown in the Twitter card at the top of this post.
The description tag should be 156 characters or less. Like the title tag, you could make it longer, but we don’t want to leave any decisions up to search engines. Get your idea across in 156 characters or less.
- Rel Author Tag
<link rel="author" href="https://plus.google.com/u/0/103344059956204476766"/>
The rel=”author” tag lets Google know who the author of the content is. It one way to get your face to show up next to your posts in search results. The image below shows one result without authorship markup, and two with authorship markup.
There has been a lot written about the benefits of Google Authorship (run a quick Google search), but it’s generally accepted as a must-do for SEO purposes. To properly set your authorship tag, set the href to be the link to your Google+ profile.
- Rel Canonical Tag
<link rel="canonical" href="http://example.com/path/to/original/" />
The rel=”canonical” tag tells search engines where the original content lives. If you happen to be looking at a duplicate page, this tag will point the search engine to the original location.
There is a lot of debate about the use of the rel=”canonical” tag. Bing doesn’t even use it. Some suggest it should be used on every page, even original content pages, and others suggest it should only be on duplicate or moved pages. Google has stated that it doesn’t care if the tag is on every page, so I would strongly suggest putting it on every page.
Open Graph Meta Tags
See Open Graph Protocal (OGP) for more detailed information.
In layman’s terms, Open Graph markup is used so that social media sites, like Facebook, can parse your content and turn it into a rich object for display. It can include text, images and other media, and links. If your content can or will be shared on Facebook, you absolutely have to have the proper Open Graph tags.
<meta property="og:title" content="Title goes here"/>
The Open Graph title meta tag should be the title of your page as you want it to appear in a social graph. The title can be the same as the regular title tag, but I would suggest that you make it more appealing to social networks. Write this title tag more like a headline, or something that promotes sharing.
<meta property="og:type" content="article"/>
More often than not the type will be
website, but you can find a complete list here.
<meta property="og:image" content="http://example.com/path/to/image.jpg"/>
The Open Graph image tag sets the image that will be displayed in the social graph. It’s possible, and completely acceptable, to include multiple tags for multiple images. It will allow social platforms like Facebook and Twitter to allow the user posting your link to choose between a set of images, and select the one they want displayed. Here is a snippet from a recent blog post of mine showing the use of multiple Open Graph image tags.
<meta property='og:image' content='http://bradsknutson.com/wp-content/uploads/2013/05/tumblr-to-wordpress.jpg'/> <meta property='og:image' content='http://bradsknutson.com/wp-content/uploads/2013/05/tumblr-to-wordpress-transfer.png'/> <meta property='og:image' content='http://bradsknutson.com/wp-content/uploads/2013/05/tumblr-to-wordpress-install-tumblr-importer.png'/>
When I share the original URL, I get a choice between the different images.
<meta property="og:url" content="http://example.com/blog/post/"/>
As you may imagine, this tag is used for the URL of the page being shared.
<meta property="og:description" content="Description of your content goes here"/>
og:descriptiontag is used, like the meta description tag, to give a short preview of the post. One could certainly use the same description as the regular description tag, but I would advise against that. The Open Graph description tag is specifically used in the social graph, and you should tailor it to appeal to Facebook users to increase shares. Perhaps include a call-to-action, or eye-catching preview. The goal is to get likes and shares.
<meta property="fb:admins" content="USER_ID"/>
fb:adminsis specific to Facebook (obviously), and is important for getting access to Facebook Insights. Include the Facebook User ID for the user that you want to have access to this data.
<meta property="og:locale" content="en_US"/>
The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.
<meta property="og:site_name" content="Brad S. Knutson"/>
og:site_nametag is used to give your site a title. Unlike the title tag, this tag can be consistent across all pages on your site.
Because Open Graph is so popular, and has been so widely adopted, platforms other than Facebook have begun to use it as a fallback in case other meta tags are not present. Twitter Cards use a lot of the Open Graph tags if Twitter Card meta tags are not present.
Twitter Card meta tags are used to display rich snippets in Tweets that include approved links. I’ll go over the most common tags below, but you can see a complete list here.
For more information on Twitter Cards and how to set them up, read my recent blog post.
<meta name="twitter:card" content="summary">
This tag specifies the card type. Most commonly for websites the value will be summary, but other options are photo or player. Twitter uses summary as a default if no other card is specified.
<meta name="twitter:site" content="@Bradsknutson"/>
The @username of the site owner.
<meta name="twitter:creator" content="@Bradsknutson"/>
The @username of the content creator. Great for guest blogs to give credit to the content author.
<meta name="twitter:url" content=”http://example.com/path/to/post/">
The URL of the content.
<meta name="twitter:title" content="Title of the page goes here">
The title of the page goes here. Like the Open Graph title, tailor the title for social sharing.
<meta name="twitter:description" content="Description goes here">
twitter:descriptiontag is where the description of the page goes. This description will specifically show up on Twitter, so you’ll want to tailor it for Twitter users and encourage retweets and favorites.
<meta name="twitter:image" content="http://example.com/path/to/image.jpg">
This tag is for the image that you wish to be shown in the Twitter card. It’s advised that you choose a square image larger than 60 by 60 pixels. If your image is not a square, Twitter will resize it and crop it, so portions of your image may not be displayed.
There are many more meta tags out there, but these are the most important today. In the near future, this list could very well change.
Did I miss an important meta tag? Have a question or concern? Leave a comment below!