SEO Explained: What are semantic tags?

When we do SEO analysis for people, we often suggest a move to more “semantic markup” or “semantic tags.” If you’re wondering what this means, we’ve got you covered.

The semantics of semantics

First, some definitions:

Semantic: Of or relating to meaning, especially meaning in language (thank you, dictionary.com!).
Tags, markup, HTML: These are all the same thing. Have you ever used your browser’s View Source feature (e.g., in Firefox, View ⇒ Page Source) to look at what a web page really is under the hood? You’ll see lots of stuff that looks like this: <b>Bold stuff</b>, <i>italicized stuff</i>, <span class="complex"><span class="initialcap">C</span>omplex <em>markup</em> schemes</span>. Everything inside the < ... > markers is a tag. We also call it markup because the purpose of the tags is to “mark up” plain old text to help us give it meaning. This comes from the definition of HTML: hypertext markup language. Make sense? Enough to move on, at least?

Search engines are looking for meaning

It’s not that search engines are existential; it’s just that when a search engine visits your site to catalog the content on it, it’s not simply creating a list of words that appear on your site. That’s part of it, of course, but the real reason is to try and figure out what the words on your site mean; the more meaning they can extract, the better they’ll do at associating your site with somebody’s search, without the user having to search for the exact words you use on your site..

Extracting meaning is very complicated, so the more help you can give Google, MSN, Yahoo, Ask, Looksmart, etc… the better off your site will be.

SEO & semantics

Ok, so what does all of this mean, at least for search engine optimization purposes? Good SEO is only possible when the HTML tags are semantic in nature. The HTML that builds your pages has to impart meaning, not just be a method of creating visual formatting. You see, there are lots of different tags, some more useful than others:

The title of a page is set by the <title> tag.
Headings are created by <h1>, <h2>, <h3>, <h4>, <h5>, <h6> (depending on their importance).
Words are emphasized with the <em> tag.

And the list goes on. Hit Google for a tag list if want the details.

The key point is that semantic tags must give your text meaning. Take, for example, the <em> tag I just referred to. Most browsers render this by putting the words inside this tag in italics. There’s also a tag specifically for “italics”: <i>. It’s shorter! Why not use that? Because of semantics. The <i> tag instructs the browser to italicize the text, but the <em> means something: “emphasize this” (as opposed to straight italics, which could be a book title, a motto, or something else entirely).

The fact that both tags look the same in a default browser configuration is a red herring—since <em> has actual meaning, search engines can more easily figure out what to do with the text; this generally leads to better ranking for the page’s topic. The difference in one tag isn’t much, but multiply that over thousands of tags across a handful of pages, and you can see why it’s beneficial.

Good semantics mean more accessible sites

The web isn’t just people using web browsers on PCs and Macs. Cell phones, PDAs, screen readers for the blind, and yes, even search engines are non-browser devices that are interested in the content on your site. New devices enter the market every day. In order to be “future-proof” and not require redesign when some new gadget comes out, your web site has to be semantic in nature, or else people with these gadgets will have a hard time getting around on your site, or worse, be completely locked out of it (incidentally, this is one of the reasons why there’s such a huge difference between high quality web sites built by professionals and the stuff you can hire the neighbor kid to do; unfortunately, it’s also one of the things people tend to overlook until it’s too late, inevitably to their detriment).

Things to do

Keep content separate from presentation when you’re writing for your site. Think Notepad rather than Word; the formatting comes later.
Remember that HTML is supposed to describe what your content means rather than what it looks like.
Try and keep your tag usage as minimal as possible. A good CSS artist can create beautiful designs with very few tags, and such pages almost always get better search visibility.

Things to avoid

Archaic tags like <font>. These are presentational in nature, and only obscure the meaning you’re trying to convey.
Embedding style into your markup, like <p style="color:blue">blue text</p>. This too provides noise that just gets in the way of the actual content itself. Keep stylesheets externally linked.
WYSIWYG (what you see is what you get) editors in products like Word, which generate absolutely horrid HTML. It might look okay on your screen, but you’re almost guaranteeing that it’ll be ugly on half of your visitors’ screens.

If all of this seems simple, then great! You’re ahead of the game. Get crackin’ retrofitting your site! Most of our clients are the kind of people that want to focus on being the best they can in their business, and not have to worry about the details of creating a truly top notch professional web presence. That’s why we’re here. All of our projects are built with 100% standards-compliant semantic HTML. We can be the web experts so you don’t have to be.