A Meta Tag Best Practices Reference / Resource

1st post here. Odd seeing that i own quite a few SP books. Either way, looking fwd to joining the community. Here’s a quick statement/q?

Is there a thorough post somewhere that will give me a run down of <meta> tag best practices?? After looking at some headers recently that had some pretty detailed meta tagging, I feel like i’ve been totally neglecting that end of it - or were they going overboard?? I didn’t bookmark the page sadly. Anyone have such a resource? I was looking @ a few Google Dev pages and they had nothing too extensive.

Anyhow, thanks in adv.

cheers.

A lot of meta usage is overboard if you ask me. Sometimes meta elements are used for Facebook purposes. Other times it is used so the author can stick information in the document. The important uses of meta are to indicate a character set and provide a description for the document.

HTML4:

<meta http-equiv="content-type" content="text/html;charset=utf-8">

XHTML1.0:

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

HTML5:

<meta charset="utf-8">

The charset declaration should be made right at the top of the document after the opening head element. Browsers will use whatever is sent in the HTML header as the character set, ignoring the meta, but this provides information for anyone looking at the HTML.

Another important use of meta is to specify a description for the page which is generally used by search engines in results pages.

<meta name="description" content="This is where you put the description of the page you want to use." >

Also for providing keywords which may people no longer use as search engines ignore them for ranking purposes.

<meta name=”keywords” content="hamburgers, hot dogs, mayo, hot, sun, food, poisoning" >

Another annoying use for meta is to instruct the browser to refresh (or redirect) the page after a period of time, which browsers can be configured to ignore.

Reloads the page after 300 seconds:

<meta http-equiv="refresh" content="300">

Redirects to another website after 5 seconds:

<meta http-equiv="refresh" content="5;url=http://www.sitepoint.com/">

Specifying author information:

<meta name="author" content="cheesedude">

For search engine robots:

<meta name="robots" content="nofollow">

And apparently for defining the viewport size for mobile devices:

I suppose a best practice would be to set the charset and description and not use more than you have to.

Thanks for that. And I was generally on with the above - but always good to drive that home and burn it to memory.

But I just recalled where I saw this meta mess i was inquiring about:

<meta property=“og:site_name” content=“some company name”/> <— what’s this for?

<meta property=“og:title” <– I saw this as well.

and what is this itemprop attribute all about? not been able to wrap my head around it…

“og” stands for “open graph”. It’s often (if not in entirety) associated with Facebook.

As for “itemprop”:

http://developers.whatwg.org/microdata.html#names:-the-itemprop-attribute

And if you want to go overboard with the meta element, here is a list of recognized values for meta, or meta extensions:

http://wiki.whatwg.org/wiki/MetaExtensions

Geographic position to which the page is related.

<meta name=“geo.position” content=“48.02682000000001;7.809769999999958”>

And a whole lot more. The geo.position one looks interesting. It does not look like the meta extensions are used much by search engines, if at all. If not, I can’t see much point in using them now.

Got it. Thanks for this. Looks like I’ll be fine keeping it pretty simple then. Seems like the description attribute might be my best bet to focus on - according to Google as well. This is good practice though. Want to nail my header / meta game down pat.

All the http-equiv meta tags are (as the name implies ) HTML equivalents to HTTP commands that are better handled as HTTP headers rather than embedded in the HTML. You should only use them when you don’t have access to set them on the server.

Hi Henri! It’s great to see you over here. :slight_smile:

Thanks Hawk. Super happy to be out here. Just added to the hours of reading / learning i’ll be doing :wink: Genuinely excited.

Speaking of, i was under the impression that you had spread your wings and flown out of here… Did I read that wrong?

She left SP but not the forums. She’s still keeping a eagle/hawk eye on us :stuck_out_tongue:

@cheesedude; I don’t see how the meta position can be of any use. I know that we all want to geo-target our users… but I can’t think why a page needs to have a location.

The idea behind it might be that the content of the page is related to a certain location. Like the site of a shop. So if you search for a hairdresser on your mobile, the search engine might rank the page of that hairdresser’s site higher because he’s located near you. Or something like that :slight_smile:

Of course! When nothing makes sense, then think of rankings! :lol:

For more info on the itemprop-stuff, go to Schema.org as well.