A few weeks ago I outlined some guidelines for using semantic markup and semantic SEO coding for search engine optimization purposes. I explained a little about what semantic coding is, but perhaps I didn’t fully explain why one might want to use semantic coding for seo purposes. In this post I’d like to explain not only what semantic markup is, but why it would be useful and why you should be using it as a best practice in coding web designs.
Semantic is defined as “of or relating to meaning in language,” and we use this term in HTML coding and web design to mean that the code you use should describe the content it contains. So rather than using obsolete code like this:
<font color=black size=+1>My Page Title</font>
you would want to use it’s semantic coding equivalent, which is
<h1>My Page Title</h1>
For the purposes of SEO, or Search Engine Optimization, semantic coding improves how easily search engine crawlers can discern the meaning of your web page. When a search engine spider like Google’s Googlebot visits your web page to index it, it generally extracts the text from the code so it knows which parts of your web page are readable to humans. Googlebot doesn’t want to index or display any code or text from your website that isn’t visible to humans — it doesn’t record how many <div> tags you used, and it doesn’t keep track of that fancy table rowspan and colspan layout you’re so proud of. But what it does do, and what many other search engines are starting to do, is attempt to apply more weight, or importance, to certain text on your web page.
For example, we already know the Google algorythm applies a higher importance to the text contained within the <title> tag on your web page. We are also aware of a higher weighted ranking for the semantic <h1> tag, the tag which is supposed to be used once on a page, just like the title, to contain the most important description of the content on the page. This gives us two very important on-page SEO factors we can use to manipulate our rank in search results using semantic coding. Other heading tags <h2>, <h3>, etc., probably also get indexed with a different weight in the Google index, as does bold text which was coded using the semantic <strong> tag.
There are plenty of other semantic markup codes you can be using which may not neccessarily give your terms a higher importance in the google index, but they definitely will help Google, Yahoo, and MSN understand your content in their index better.
If you are creating a list of, let’s say, all the semantic HTML codes you could use on a page, it’s better to put that list inside of unordered list tags, <ul>, than to simply list them one after the other using <br> tags to put each one on a new line. Search engines will now know you have defined a list of related content on your web page, and this is certainly better than just letting them think you have a bunch of unrelated text on the page. The text you are using has now been given a specific meaning within your semantic code.
Accessibility: Semantic code assists screen readers which describe the page using audio for the visually impaired.
Download Speed: Using lightweight semantic code rather than bloated nested table and <div> structures can actually speed up download and page rendering times, which is regaining lost importance due to mobile browsing.
Code Seperation: It should be your best practice to use semantic code to markup your HTML, and then use Cascading Style Sheets (CSS) to actually apply the design and style to the elements. These keeps the code seperate from the graphic design of the web page, which greatly improves how easy it is to change or update the look and feel of your web page.
To better understand how a machine might view the content on your page when it applies semantic coding rules to it, check out the W3C’s Semantic Data Extractor. You can enter your URL into this tool and it will display only the text on the web page which uses semantic markup to describe it.