- The Connection Between Web Standards and Findability
- Expressing Meaning Through Semantic Markup
- Accessible Content Is Findable Content
- Clearing Search Engine Roadblocks with Progressive Enhancement
- Decreasing Code to Speed Up Indexing
- Making Content Re-Discoverable with Microformats
- Web Standards Make Content Findable
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Expressing Meaning Through Semantic Markup
Semantics define the meaning of a message. When you speak, you vary the inflection in your voice to emphasize important points or to shape the tone of the conversation. HTML markup works in much the same way. By choosing the right tags for your content, you can communicate the information hierarchy of your message to search engines, which struggle to discern meaning in text.
Semantic markup requires that you select a tag for what it means, not for the way it renders text in a browser by default. Here’s a common example: You need to place your company’s logo on a web page, so you decide to use an image tag like this:
<img src="images/logo.gif" alt="Soup Studios Pottery" />
Although this approach will show the logo on the page, it lacks meaning to search engines. A better approach would be to wrap your company’s name in <h1> tags and then use some clever CSS to replace the plain text with the logo image. An <h1> is at the top of the markup information hierarchy and therefore will create more keyword prominence from a search engine spider’s perspective. Using an image replacement technique devised by Dave Shea, the plain text can be placed on the page and then covered with the logo image. Here’s how you might go about achieving this effect:
<h1 id="logo" title="Soup Studios Pottery in Athens, GA">
<span></span>Soup Studios Pottery</h1>
#logo {width: 329px; height: 25px; position: relative;}
#logo span {
background: url(soup-studios-pottery.gif) no-repeat;
position: absolute;
width: 100%; height: 100%;}
The CSS used in this example sets the width and height of the <span> inside the <h1> and then displays an image within it to cover the plain text company name. The title attribute is added to the <h1> to provide further information when the user mouses over the image. Not only does this technique provide a more semantically meaningful representation of the company name that search engines will understand, but it creates a stronger keyword density because the company name appears three times in this short passage. This technique can help the page to rank higher when users search for these terms. Also, note that the name of the logo image in this example includes keywords from the company name, which is yet another way to communicate the meaning of the content.
The more semantically accurate your content is, the more success you’ll have at getting that content to the top of search results pages. You can learn more about semantic markup techniques in Molly Holzschlag’s article "Integrated Web Design: The Meaning of Semantics (Take 1)."