A Marketer’s Guide to HTML Markup for SEO

Christian Vanek on SEO

Your writing is everything that Google should love — brilliant, informative, original, witty and wonderful.

So why aren’t you the first result for every search?  Why doesn’t Google love you?

Well, it may be that your content, although brilliant, isn’t marked up in HTML correctly, making it difficult for Google and other search engines to understand.

Here’s a quick guide to help you optimize the technical side of your website content to help increase Google’s understanding of your hard work and give you a well deserved boost in search rankings.


How Does HTML Code Affect Search Rank?

At their heart, search engines like Google are still just computer programs reading your website as text and html code.

While they separate the HTML code from the content on your website, they can’t see your article the way that you do.

This means pages that use non-standard or poorly constructed HTML are harder for the search engines to index with confidence.

If you make it easy for search engines to understand your content, they’ll reward you with higher search rank and also more accurately place your content in search results.

This leads to fewer bounces and more reward from the engine over time.

Guidelines for Good SEO Content Markup

Here are the “Big 5″ guidelines we use at our company to optimize our HTML for SEO. We recommend that you discuss these with your web designer.

Just remember, your web designer was likely hired for a different reason than their ability to write good SEO-optimized HTML, so they may not know all of these or how important they are.  Stand firm if you get any push back!

Great search engine optimization requires lot of detail work and this is a foundation that you need to be successful.

Rule #1. <H1…3> Tags are Your Best Friend

Header tags (H1, H2, H3… etc) are designed to show search engines the hierarchy of your content. Content in these tags is given higher weight than content in other locations of your document.

Strangely, most sites (even for big SEO firms, ironically) have a broken header tag hierarchy.  This makes it difficult for search engines like Google to understand what content on the page is the most important.

Here are the rules for header tag use:

  1. Make sure your keywords exists in your header tags. If you do nothing else from this article, do this!! Your most important keywords should appear in your H1 tag, then supporting keywords in H2,H3 and H4s.
  2. Don’t skip tag hierarchy.  If your site jumps from H1s directly to H3s without an intermediate H2 then you will get a little “ding” for that.
  3. If you have images inside your header tags, then make sure they have good alt-text.
  4. Don’t use an H1 tag to wrap your logo. It’s a common mistake and wastes the most powerful piece of tag markup in your arsenal.

Rule #2. Optimize Your Images

Your website likely has a lot of wonderful visuals. Perhaps you decorate your blog posts with original infographics, photos, or charts.


So, if you want credit for your masterpieces then you need to describe them to google with two tricks.

The first trick is to name them well. Use the filename and make it descriptive.  Google reads the filename and relies on it heavily when it indexes your web page and places your images up for image search (an underrated yet valuable source of traffic).

If all your images have filenames like “logo1.png” or “screenshot-4.png” then Google won’t know what they are or how they relate to the content on your site.

The second trick is to use alt text.

When HTML was first written, the authors of HTML needed a way to describe images to non-visual users to make content accessible.

So they invented an attribute you can add to an IMG (image) tag to describe it.  Search engines now use this to understand your image content and index it appropriately.

Every image on your site should have an ALT attribute with a good description of the visual content that supports both the image’s content and the content of your site.

Also, using alt text will make your content more accessible to visually impaired visitors, and you’re more likely to get rewarded by Google (and other search engines) who recognize your effort to write accessible content.  They love it!

Rule #3: No Broken HTML

So, Google reads HTML code and uses it to understand your content.

What do you think happens when that code is broken or doesn’t follow standards?

You likely read broken sites every day.  You don’t notice because your web browser will fix a huge number of mistakes.

However, Google and other search engines notice.  They, just like your web browser, will try to fix the HTML before it’s processed but will note that it was broken and drop your quality rating a little.

The other problem is that a search engine  may misunderstand your content when it fixes it. So, run your HTML through a HTML validator and ask your web designer to fix any broken code as soon as possible.

Rule #4: Code to Content Ratio – Keep Code Below 25%

Google wants to present results that will answer the question an end user has typed into the search bar.

They have learned that the best content seems to be from sites that have more content and less  code.

This is not only because these authors seem to be more focused on giving the readers good information over fancy design, but also because these sites tend to load faster than their design-heavy counterparts.

You should know what your code to content ratio is on every major entry page of your site.  Our general rule is that article content should be at least 25% of your page. The higher the percentage the better, but don’t ever let it drop below 25%.

On home and landing pages it can be a bit higher, but the lower it is, the better you’ll be indexed.

Rule #5: Link Text is Important.

Last, but only slightly less important than the header tag rule, is link text.

The text that you hyperlink matters… a lot.  Avoid linking text like “read more,” or “click here” (unforgivable).

That tells a search engine almost nothing about your content.

Instead link the titles of articles, or key phrases that describe both the page that you’ll land on and also the content on the current page.

Testing Your Site for Good SEO Practices

How do you know if your designer is following the guidelines already?

Up to this point we’ve relied on a number of small tools around the web.

Each was designed to test one of these factors but not all of them together.  When editing this article we realized that a new tool would be awesome.

So now the easiest way is to use the free tool we built for you!

It checks all of the “Big 5″ (and a few others) and gives you a report card!

Check it out:


(and please feel free to share it)

A Final Word

Once your site is optimized, don’t forget to check it regularly.

These rules are easily broken.  Especially if you are working with more than one designer or design firm.

So just remember to stop back periodically and double check your SEO optimization status.

Happy writing!