Meta Tags for public facing websites


I recently took an attempt at writing a web service that allowed me to get details about a web page similar to what you see when you paste a link in face book. In doing this I learned that there are quite a few meta tags a publicly facing site should have that go beyond the basic SEO tags we’ve been putting in for years.

The SEO tags are Title, Description, Keywords and Canonical.

Title is the title you see in the top of the browser window as well as the title search engines give to your page.

<title>My Page Title Goes Here</title>

Description
is not visible in the browser window but it used below the title of your page in search engines to describe your page.

<meta name=”description” content=”This is the best page in the world, you should visit it so you know what everyone else is talking about”>

Keywords keywords should contain a comma seperated list of the search terms you are targeting. They say the search engines no longer use this so you may want to save yourself some maintenance time and stop supporting this term.

<meta name=”keywords” content=”my keyword1, my keyword 2″/>

Canonical is a relatively new one that is for search engines. If you can access a page from multiple URL’s the canonical tag should be the most human readable version that you want the search engines to display.

If you support friendly urls

something like http://www.mywebsite.com/Articles/1/Title-Of-My-Story

is preferred over http://www.mywebsite.com/articles?id=1

In this case you would place the tag below in both versions of the page.

<link rel="canonical" href="http://www.mywebsite.com/Articles/1/Title-Of-My-Story">

Now the new stuff I’m seeing is used to describe your page to non search engines but things like Browsers, IPhones, Mashups and Facebook.

Shortcut_Icon used in favorites/bookmarks
sample from cnn.com
<link type=”image/x-icon” href=”http://i.cdn.turner.com/cnn/favicon.ico&#8221; rel=”shortcut icon”>

Apple Touch Icon points to hi-res icon for Apple iTouch Devices.
sample from stackoverlfow.com
<link href=”http://sstatic.net/stackoverflow/img/apple-touch-icon.png&#8221; rel=”apple-touch-icon”>

image_src is picked up by things like facebook and google news to show the image associated with your pages content.
sample from cnn.com article
<link rel=”image_src” href=”http://i.cdn.turner.com/cnn/.element/img/3.0/newsscanner/no_image_cnn_90x51.jpg“/>

Open Graph tags for facebook
If you care about what a link to your site looks like when someone puts a link up in facebook you can control it with open graph tags.
There is more info on open graph here on facebook.

Here’s a youtube video sample using open graph

    <meta property="og:url" content="http://www.youtube.com/watch?v=i4SkO3ypCXw" />
    <meta property="og:title" content="Drunken Master Trailer" />
    <meta property="og:description" content="Wong Fei Hong (Jackie Chan) is sent to train under his uncle, a wine guzzling master famous for crippling his students. Desperate to escape this brutal teach..." />
    <meta property="og:type" content="video" />
    <meta property="og:image" content="http://i2.ytimg.com/vi/i4SkO3ypCXw/default.jpg" />
    <meta property="og:video" content="http://www.youtube.com/e/i4SkO3ypCXw" />
    <meta property="og:video:type" content="application/x-shockwave-flash" />
    <meta property="og:site_name" content="YouTube" />

Advertisements

About Kevin Buckley
.Net web developer with a lot of experience in CMS. Currently working at Sitecore as Solutions Engineer.

One Response to Meta Tags for public facing websites

  1. Pingback: SEO Tips for 2011 « Web Content Management and Delivery

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: