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

by | Dec 4, 2008 | Uncategorized | 0 comments

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 <acronym=”What You See Is What You Get”>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 Drupal.

SEO Optimized Content Markup: Using HTML Tags

HTML is a markup language. That means it’s marking up your content in order to display it a certain way on the web. If you use Microsoft Word or 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 



 or 




 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 




 tag to make it bold, use a heading tag like 








, typically browsers and search engines can recognize headings 








 through 








, 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 




 tag I use is an 








 and then I use a few 








 tags and then go back to 








 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 




 (ordered list, or numbered list) or 




 (unordered or bulleted list) tags plus an 




  • 

    (it will either be a number or a bullet) for each item.
    

     
    

    Here is an example:
    

    

    SEO Optimized Content
    

      

    • Learn Some HTML Tags
      • 

    • It’s Not Hard
      • 

    • It will make a difference
      • 

    

    Use Semantic Markup
    

      

    1. Use heading Tags
      2. 

    2. Use Ordered and Unordered Lists
      3. 

    

    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. 

    2. Use Ordered and Unordered Lists
      3. 

    

    

    The last two important ones are pretty easy: italics AKA emphasis and bold AKA strong. The tags for these are 
    

    

     and 
    

    

    . Many people might use 
    

    

     and 
    

    

     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 
    

    This is important
    

    . 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 
    

    

     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: