Meta Tags Everyone Should Use

  • follow us in feedly
Published May 21, 2013 by Brad Knutson
Meta Tags

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.

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.

    Meta Tags - Authorship

    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

The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.

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.

  • og:title

    <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.

  • og:type

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

    More often than not the type will be article or website, but you can find a complete list here.

  • og:image

    <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.

    Open Graph Image

  • og:url

    <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.

  • og:description

    <meta property="og:description" content="Description of your content goes here"/>

    The og:description tag 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.

  • fb:admins

    <meta property="fb:admins" content="USER_ID"/>

    The fb:admins is 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.

  • og:locale

    <meta property="og:locale" content="en_US"/>

    The locale these tags are marked up in. Of the format language_TERRITORY. Default is en_US.

  • og:site_name

    <meta property="og:site_name" content="Brad S. Knutson"/>

    The og:site_name tag 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 Cards

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.

  • twitter:card

    <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.

  • twitter:site

    <meta name="twitter:site" content="@Bradsknutson"/>

    The @username of the site owner.

  • twitter:creator

    <meta name="twitter:creator" content="@Bradsknutson"/>

    The @username of the content creator. Great for guest blogs to give credit to the content author.

  • twitter:url

    <meta name="twitter:url" content=”http://example.com/path/to/post/">

    The URL of the content.

  • twitter:title

    <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.

  • twitter:description

    <meta name="twitter:description" content="Description goes here">

    The twitter:description tag 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.

  • twitter:image

    <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!

The following two tabs change content below.
Founder at Inbounderish
Brad Knutson is a Web Developer in the Twin Cities area of Minnesota. He has experience working with WordPress and Drupal, and also has an interest in SEO and Inbound Marketing.

Keep Up-to-Date

Subscribe

Topics

See a complete list of topics discussed in blog posts here.

Check These Out

Get 2 Weeks Free! Sign Up Today! Premium Managed WordPress Hosting Genesis Framework for WordPress SEO is complex. Tools should be simple. Thesis Theme for WordPress:  Options Galore and a Helpful Support Community

4 thoughts on “Meta Tags Everyone Should Use

  1. Scophi

    Nice article. I’m glad someone posted about current meta tags. Most sites have old information and are still advocating the use of things like Keyword descriptors. Thx!

    Reply
  2. Nadine

    Very clear and concise! Thank you! I already had the Meta tags and twitter cards set up, but for some reason, recently some of my blog posts are not sharing the post image but the image I set to share if there is no post image. Do I need to put these tags here you have written in the head of my blogger html, or in each individual blog page html? If this does go into the head, how does the crawler know which one to choose! Very confused on that point!

    Nadine :)

    Reply
    1. Brad Knutson Post author

      Hey Nadine,

      Each social platform treats the images used to display shares a little differently, and they’ll actually choose the best one for their platform based on size. If you want to force the featured image from your post, then remove the “default” image meta tag and just make sure that you always have a featured image on the page!

      Thanks,
      Brad

Share Your Thoughts

Your email address will not be shown.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">