How do search engines use meta tags?

Part 2 of What are Meta Tags?

We now know what are meta tags (previous post) and that they are really only two that we care about (well most of us, there are some additional ones that should be in a webmasters tool kit). So how do search engines use meta tags?

Keywords meta tag:

It used to be that you could put the keywords you wanted to rank for into the keyword meta tag, and the more the better right? Then you could sit back and consider yourself done with your SEO efforts. This has not been true for a while. Google completely ignores this tag and has for years, and while yahoo and bing probably look at the tag, it is not clear that they give it much weight in determining how to rank your site. Regardless, do not put 30+ keywords into this tag, this is known as keyword stuffing and will only harm your page. Keep it to 10 at most. If you do use adsense or other context driven ads on your site, there is evidence that they use the tag to determine what ads to show.

Description meta tag:

Technically this meta tag doesn’t help your web page rank any better, but it is still important. Why? Because if this tag is set, google will often show it as the snippet underneath the title in the SERPs (search engine results pages) rather than grabbing some random chunk of text off your page. I’ve seen some funny snippets over the years, usually from sites that have no text, so you get a snippet that says “you need flash version xxx to view this site”. Is that going to entice you to click? You can think of your description meta tag as the “welcome” mat to your site. Put together a catchy description (no more than 160 characters as that is all that will show) that will invite your reader to click through to find out more.

What are meta tags?

I belong to a mastermind group that is following a Joel Comm video series. We get together every week and discuss the particular session we watched during that week. Some of his videos do assume a certain amount of knowledge especially when they veer off the prepared materials.

The discussion was concerning meta tags and how important (or unimportant) they are for SEO. I was glad I watched because I picked up one interesting tidbit about meta tags that I hadn’t known before .. but I’ll get to that in another post.

So what are meta tags?

First off, it’s useful to understand that what you see on a web page isn’t the whole story, there are certain HTML code elements that are not visible on the rendered page but still read by search engines. Meta tags fall into this category. Meta tags are metadata, essentially data about data (if that is confusing, I’m afraid the wikipedia entry won’t be much help). However in this specific example, the concept is a little easier to grasp, since on an HTML web page, meta tags help describe what the web page is about.

What can you say about a web page? Well a number of things, but you need to only pay attention to two tags “description” and “keywords”.

• Keywords is just that, a list of keywords that you think describe your page the best
• Description is a few sentences that describes what your page is about

Many website building tools and CMS (content management systems) will have some way for you to fill these tags in, without having to learn how to code them into HTML. If they don’t, consider moving on to one that does.

Next – how search engines use meta tags

The power of Thematic hooks

As I begin to wrap up my first child theme using the Thematic framework, I must admit that I’m beginning to really appreciate the power of theme hooks. At first I was modifying the css to get where I wanted to be, for example altering margins, using the background url directive to add my custom header image. But when I got to the point where I wanted to suppress the display of the blog title and description, that is when I first found out about Thematic add and remove actions.

Oh sure I could have just used “display: none” in the css blog title class/ids so that the blog title didn’t display over my custom image, but that’s kind of ugly. Using remove_action in my functions.php file is much more elegant.

function suppress_header_elements() {
remove_action('thematic_header','thematic_blogtitle',3);
remove_action('thematic_header','thematic_blogdescription',5);
}
add_action('init','suppress_header_elements');


And the bonus is that the blog title description value still populate my title and meta description tags as desired for SEO optimization.

Theme hooks is not a concept unique to Thematic but embedded in Wordpress itself. Using theme hooks in your child theme, the idea is that you can isolate your customizations in a single file in a functions.php file (it may be called something different such as custom_functions.php with other frameworks).

Although I had altered the css to add my image, I wanted to additionally add clickable button images as well that I already had defined in a css file. No problem, I just created a new function called add_buttons in my functions.php file, echo’ed out the HTML and then added the add_action line:

function add_buttons() {
echo ....
}
add_action('thematic_header', 'add_buttons');


It wasn’t completely smooth sailing as I ran into this error when I tried to use the admin (error text modified to remove site identifying info)

Warning: Cannot modify header information - headers already sent by (output started at /home/mysite/public_html/blog/wp-content/themes/childtheme/functions.php:43) in /home/mysite/public_html/mysite.com/blog/wp-includes/pluggable.php on line 865


Most of the information you get googling this error suggests there is extra spaces prior to the php start tag in the wpconfig.php file. That wasn’t the case here, but it was a good clue. Turns out I had an extra blank line after the closing php tag in my functions.php file. When I finally figured out to remove that, the errors went away.

Firefox and IE and tag conflicts

I have been doing some customization to the wordpress theme I have using for this blog.  The original theme was too mono-colored and the link color was hard to see.  And of course I wanted my own header.

Many blog themes put the title of your blog both as the page title tag and also as a H1 somewhere as text in your header.  This was fine with me but I wanted to have it display in a smaller font size to be more compatible with my custom header and not overrun my graphic.

So I went into the css of the blog theme and found the id tag (called “h1″) that specified the size in “em” and picked a smaller size.

It looked great on firefox, but on IE7 the size was unchanged.   Furthermore I had also changed the link color from a barely distinguishable grey to a dark red with a command to underline the link on hover.   Again worked great on Firefox 3, totally ignored on IE7.

With some help from my webdesigner friend from talksure, we figured out the problem.   For the blog title, the theme not only enclosed the text in a div tag specifying the id “h1″, but it also had additionally enclosed the text in h1 tags (confusing .. but they *are* different).   Of course the css had a larger size specified for the h1 tag. What was happenning was Firefox gave the div tags priority .. but IE7 gave the regular h1 tags priority.

A similiar problem explained the link color problem.

If you have conflicting tags, the behavior by IE and Firefox is likely to be different.

We think the reason that the title was enclosed in both a div tag and a h1 tag was to give the search engines a recognizable H1.  And it makes sense this would be the blog title.  However for now, the H1’s are removed so that my blog looks the same on all browsers.