Is your website optimized for search? Find out with our free website evaluation.

Blog

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:

  1. Titles
  2. Meta Descriptions
  3. 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:

  1. Be concise ? remember there is a limit to what will be read and displayed by search engines
  2. 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
  3. 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:

  1. No title at all
  2. 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
  3. 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
  4. 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.

Ben Robinson has spent the better portion of the last 10 years doing freelance graphic design, web design, and internet marketing in the Chicago area. You can find his full profile here, or find him on or Twitter.

9 Comments

Ryan

All good advice I would consider pretty much standard, but there are many out there who don’t know it so no harm in repeating. However you “suck” at semantic id and class naming 😉

Some examples: #content_box, #left_box, #side_wrapper, #side_top… box, left, side, top are all presentational references and don’t relate to the content they are associated with. You should aim for semantic naming such as #secondary_content, #contact_details, #adverts etc that describe their contents rather than the presentation.

-
Ryan

Assuming this site was marked up by yourself, if not then ignore that in relation to you. 🙂

-

Ryan,
Good catch and thanks for the advice. I take full responsibility for this site’s semantic naming suckiness.

Out of curiosity, are there practical advantages to semantic naming vs presentational? My natural instinct would be to lean toward presentational to help with coding and updating and all that…

-
Ryan

I’d say the main advantages is if you have a sidebar with an id of #rightbar and then in the css you decide to float it left, you also have to change the naming of the id in the HTML. But lets say the content actually comes secondary to the main content in the HTML, you could name it #secondaryContent and then styling can be handled entirely through the CSS without any further editing required in the HTML.

The aim is to keep your markup flexible by describing the content regardless of how the site may look. Think about the HTML as if there was no such thing as presentational style, how would you name each element in a way that makes sense?

As you can probably guess on complex or low cost sites this can become time consuming and complex, so I’d keep it as something to think about for future sites and implement as and where you can.

Andy Clarke of http://www.stuffandnonsense.co.uk/ and http://forabeautifulweb.com/ has spoken and written about semantic markup and labeling (probably not the right term, identifying maybe?) in the past. You may like to check out his book http://transcendingcss.com/ he’s very much into semantic markup.

I completely support what you’re saying in the article though… and I seem to have missed out bits of your article on my first read through (while at work which may explain it), so sorry if my commented came across as a bit odd.

I’m interested in what you say about not requiring a meta description, I’ve always included one and never really thought about whether it’s really used by search engines. I think I’ll leave it off my next site and see how things go in Google.

-

Again, thanks for the advice. You should write an article about how internet marketers suck at semantic naming. 😛

Gonna take a gander at those articles and definitely keep this in mind next time I am coding a site.

As for the meta descriptions, I would actually keep using them. Even though Google may choose to ignore them from time to time, without them, you run the risk of a search engine grabbing the completely wrong bit of text to auto insert.

It is similar to what you said about the semantic naming – it is a good habit to get into on an ongoing future basis, but if you have hundreds of past pages to tag, it may not be worth the time.

-

Nice post, and I’m glad I’m not the only one who feels this way 🙂

Not only is semantic markup useful, it just helps make the code make sense. Hopefully more designers will pick up on this and start using it more often.

Oh, and thanks for linking to my list, keep up the good work!

-

Meta description can be useful, since it is the description shown on Googles search pages!

Headers are importnat, but I feel they should always be mixed with good CSS coding to ensure good looks with good SEO.

-
craig

@Ryan Re: Semantic ID and Class naming; I’ve heard this argument so many times before, but I really think it’s a non-issue. Use a descriptive name that works for you. If the column is currently on the right, name it “rightCol” if you want. Makes sense to anyone who is working with the code. If the client suddenly decides the columns need to be flipped, do a simple “find and replace” and POOF, now they are leftCol. How easy is that?!

-
We have gone from having almost all our keywords ranking somewhere above 75+, to having five keywords in the top 10, and 10 keywords in the top 20, we have seen some real progress. Related Posts:Google Tag Manager Guides: How to track PDFs in Analytics…How the Panama Papers Can Be Traced Back to a WordPress…The Rise of... continue reading

Chris Strupp, Marketing Manager – Chicago Flyhouse