Creating An SEO Strategy, Part 3: Code - Your Markup

Gregory Heller Profile Photo
Gregory Heller

on

December 4, 2008

Creating An SEO Strategy, Part 3: Code - Your Markup

in
In Part II of Creating An SEO Strategy, Ron focused on content and keywords. But there is more to content than just the keywords. The markup and code underneath can make your content even more attractive to search engines and help your visitors find what they are looking for faster. The "Code" component of an SEO strategy will be split into two articles; this first is about the HTML Markup that you may use, or your WYSIWYG editor may help you write. The second, Part 4 in the series will cover the underlying code of your website, and in this case, we'll focus on some SEO tips and resources for OpenOffice to create documents you know you can highlight a word and click the B button to make it bold (or "strong"). On the web there are special tags used to tell the browser to display text as bold (or as a page heading, a list item, or link). Search engines assume that if you used a certain tag that there is an inherent meaning in it. A word that is bold using the <strong> or <b> tags must be more important or have more emphasis than a word that is not bold. Properly coding your site helps the search engines attach this second level of meaning to your copy. Therefore, there are a number of tags you should familiarize yourself with in order to help your copy deliver its message. Many Content Management Systems have WYSIWYG editors which make formatting your content with HTML tags much easier, but it is good to have a basic understanding of them.

Use Semantic Markup

As stated above, HTML tags have meaning, semantic markup just means "adding meaning to your content with tags." For example, instead of formatting a headline with the <b> tag to make it bold, use a heading tag like <h2>, typically browsers and search engines can recognize headings <h1> through <h6>, and usually they expect them to appear in a logical order. Well you could look at the code of this article, and see that the first <H> tag I use is an <h2> and then I use a few <h3> tags and then go back to <h2> for my next major heading. What I'm doing here is telling a search engine "Hey! The stuff between these tags is important, give it more weight in searching." Web browsers will display each heading level differently, and since our site (and many)uses CSS, additional styling can be applied to further distinguish them which makes the content easier for a human to understand. Similarly, instead of using numbers or asterisks for lists, use and <ol> (ordered list, or numbered list) or <ul> (unordered or bulleted list) tags plus an <li> (it will either be a number or a bullet) for each item. Here is an example:
<h2>SEO Optimized Content</h2>
<ul>
<li>Learn Some HTML Tags
<li>It's Not Hard
<li>It will make a difference
</ul>
<h3>Use Semantic Markup</h3>
<ol>
<li>Use heading Tags
<li>Use Ordered and Unordered Lists
</ol>
Which looks like this:

SEO Optimized Content

  • Learn Some HTML Tags
  • It's Not Hard
  • It will make a difference

Use Semantic Markup

  1. Use heading Tags
  2. Use Ordered and Unordered Lists
The last two important ones are pretty easy: italics AKA emphasis and bold AKA strong. The tags for these are <em> and <strong>. Many people might use <b> and <i> but these tags, while they still work and are valid HTML4, are not valid XHTML. For more about Web Accessibility, read this post from Bevan. It is important to note that most tags I have mentioned above consists of two parts, the opening tag and the closing one, for exmaple <strong>This is important</strong>. All tags that effect font style need to be closed, link tags discussed below need to be closed, but image tags do not. If you start out with learning just these few tags, you will be in good shape. Many Rich Text or WSIWYG editors will do most of this hard work for you. But it is important that you know what is going on in the background so you don't take short cuts like resorting to changing font size and using bold to make a section header, and instead use the appropriate <H> tag. There are many resources out there to learn more, among them, you might want to look at WYMeditor.org which is a "What You See Is What You MEAN" editor that helps write valid XHTML semantic markup.

Create meaningful links in markup

Here are a few quick tips to make your links more meaningful to search engines, and visitors:

Share it!