Web Designers Suck at Semantic Markup!
Yeah, I’m talking about you.
I have been looking at quite a lot of source code from websites lately, and I’m struck by just how rampant bad semantic markup is on the web. I’m not talking about whether sidebar headers should be H3 or H4; I’m seeing whole sites with the same title (or none at all), non-existent H# tags, and meta-description tags. I’ve even seen some severely misguided (yet, oddly endearing) examples, like the guy who wrote <div id=”h1″>. From the Pearsonified Guide to Semantic Web Markup for blogs:
Unbelievably, nearly every WordPress, MovableType, or TypePad theme that I?ve come across in the past year fails a simple test for truly semantic (and Google-recommended) XHTML markup. Now, I?ll be the first to admit that these failures are by no means fatal flaws. At the same time, though, I find it extremely unsettling that an inferior markup structure is prevailing in the face of an absolutely correct way of doing things.
Now, I think there are some gray areas that allow for differences of opinion. I’m sure you could look at the source code of this site and find some choices you disagree with, but the basics are there?and the choices were made with an understanding of the consequences.
What Is Semantic Markup and Why Is It Important?
If you are new to this, you may be asking yourself what the heck is this guy talking about? In a nutshell, semantic markup means using markup (XHTML tags) to define the content it surrounds. For example, a paragraph of text is started with a <p> tag and concluded with a </p> tag.
There are a number of reasons why using proper markup is a good thing, but I am going to ignore most of them and focus solely on the value for on-site SEO. Just as designers use size, color, and layout to help users properly understand the importance of elements on a page, semantic markup is your way of expressing that same information to a search engine. For the purpose of this article, I am going to focus on the elements that will have the largest impact on traffic to your site:
- Meta Descriptions
- Header Tags (H1, H2, H3…)
1. Proper Use of Title Tags:
The title tag is probably the single most important on-site element in terms of search engine traffic. Keywords in the title tag are given quite a bit of weight with search engines. However, don’t go off stuffing them with any keyword you can think of. Title tags are also the heading text (and link) back to your website in the search engine results! Title tags should:
- Be concise ? remember there is a limit to what will be read and displayed by search engines
- Accurately describe the page ? search engine value will be amplified by matching content and title; plus misleading a user to click isn’t going to win you many customers
- Be compelling ? when you do show up in a search, your title is basically your ad copy to convince a user to click through to your site instead of one of the others
The most common mistakes I see in title tags are:
- No title at all
- Branding and nothing else ? when I search for “blue widgets” and see the result “acme company,” it doesn’t let me know if you are selling, reviewing, or doing something else with blue widgets
- The same title throughout the site ? often, site designers will write a decent title tag for the homepage of a site and then copy it throughout. Just like #2 above, the title may accurately describe the homepage, but not really any other pages
- Keyword stuffed ? any given page should only have one or two key concepts anyway; if you do manage to rank for any of your myriad of terms, you will be presenting a very ugly and not very compelling choice to the search user
2. Do I Even Need a Meta Description?
Not really, but you might want to anyway. The prevailing opinion is that the meta description doesn’t effect search rankings much (if at all). On top of that, Google and the other engines will automatically grab and use text from the page that they think is relevant to the search query. Sometimes they do this even if you have a description defined.
So, why bother? Well, the auto matching can do some funky things, and it takes no time to write a good description. (For more information about titles and meta descriptions, see our earlier post about PDF optimization and SEO)
3. Which Header Tag Goes Where?
Header tags go from H1 to H6, in order of importance, with the H1 being the most important. The H1 tag is supposed to signify the main idea of the page and, given this, there should only be one per page and it should be unique to the page.
The biggest mistake is simply not using H# tags. Aside from the various advantages for design and accessibility, the H# tags are a great way to signify extra importance for keywords to the search engines.
Another common mistake, and one that really gets under my skin, is using the site name or tagline as the the H1. I have had a few arguments with designers about this one, even WordPress suggests this as the correct thing to do. (This page is very wrong WordPress?please change it!)
Take this post as an example, and ask yourself what the main theme of the page is: Chicago Style SEO or semantic markup? Of course the term Chicago Style SEO is relevant to the page, but it is obviously not the main concept. The same goes for the blog tag line “Comprehensive Internet Marketing…” This is very relevant to what I am talking about, but this page is specifically about semantic markup.
Think about this in terms of search rankings. The objective is to get specific pages to rank for the ideas they contain. I may want to rank for “Internet marketing,” but it would be very ineffectual to push this for every page on my site.
The remainder of the H# tags can be used more than once and, I feel, there is a bit more interpretation as to the best method to use. Personally, I use H2 for the tag line and H3 for post subheaders and sidebar headers. I could see valid reasons for switching this around: maybe H2 for the subheaders, H3 for the tagline, and H4 for the sidebar headers? The important part is to use them logically and consistently.
Other Semantic Markup
Beyond the H# tags, there are quite a few other tags for semantic markup. Barry Wise has a pretty good list with descriptions of each. While these don’t have quite the impact as the ones I’ve already discussed, they all help search engines to signify and define your content. In the world of SEO, this is a major step toward higher, relevant rankings.