The least amount of HTML you need to know for effective SEO

Your first step in learning search engine optimization is to understand the basics of HTML. You don’t necessarily need to become a developer and start building your own sites from the ground up, but understanding how web markup works is essential to optimizing your site for search engines.

HTML is describing your data

You probably already know that the web uses HTML, and maybe you’ve heard the term CSS and JavaScript thrown around a lot to.  I’ll be talking about HTML in this article, the markup language for creating web pages.

When you create a new post or a page with a standard content management system (CMS) like WordPress, most likely you’re using an editor that takes care of the markup for you.

Try this out.  Create an article in WordPress, make some of your text bold and some italic and throw any other types of formatting you want.  If you preview or publish the post and then highlight your text, right-click and click on Inspect element, a small inspector window should pop up (Firefox and Chrome).

Chrome Web Inspector Screenshot

You’ll notice that your text now contains extra text you didn’t write, surrounded by inequality symbols ( < > ). For text you made bold you will likely see <strong>bold</strong>. For italicized text you may see <em>italic</em>.

HTML Tags

The text surrounded by greater than and less than signs are called HTML tags.  Your entire webpage is made up of content surrounded by tags.  The tags are merely there to describe your data and tell the web browser how to display it.

Below is an example of a very simple webpage. It’s important to note you would never use something this simple on a real site. It’s missing some important tags and meta information, but a browser will load this and display it correctly.

<html>
<head>
<title>Turtles are awesome</title>
</head>
<body>
<article>
   <h1>Turtles are the best for so many reasons!</h1>
   <p>Turtles are so cool and they know it. Here are a couple reasons they're awesome (in an unordered list):</p>
   <ul>
      <li>They're slow!</li>
      <li>They have shells!</li>
   </ul>
   <h2>Why being slow and having a shell is cool</h2>
   <p>A little know fact about being slow and having a shell.</p>
</article>
</body>
</html>

The title of the article ‘Turtles are the best!’ is surrounded by an <h1> heading tag. Generally an article or page will contain one <h1> tag which contains the title or main idea of the article. Your sub-heading tags should describe what the next section is about. The bulk of your text will be surrounded by paragraph <p> tags.

CSS also plays a part in telling your browser how to display your data. You can think of CSS (which stands for Cascading Style Sheets) as telling the browser how to style your data. We don’t need to be too concerned with CSS for just SEO because the search engines shouldn’t care too much how something is styled, although we can never be too sure. No search engine reveals exactly how they rank sites, otherwise everyone would just game the system.  All we have are guidelines to follow.

How search engines use HTML

So what does any of this have to do with SEO?  Well a whole lot. You must understand how to use proper tags to describe your data well.  Humans may not see all your HTML markup, but search engines do.

Google, Bing, and all search engines use computer programs called crawlers, that basically just visit site after site mining the content. The only way they know to interpret your site is to read the HTML markup and try to understand the content.

Lightbuld doodle drawing

You can help the search engine crawlers understand your content better by formatting the content on your site properly. If a crawler can understand what your content is about, then it can more easily determine what search queries your content is relevant for.

And that is the entire point of search engines. To return the most relevant content for the query passed into it.

I know this may seem basic, and maybe even common sense to many people, but you must keep this in mind when creating content for your site. Content is the cornerstone to getting ranked on search engines and getting more traffic. Your content needs to be formatted not just for humans, but for computers as well.

As this is a series about learning SEO and not HTML, I won’t go much deeper into HTML. I’m assuming you’re using some form of Content Management System with a ‘What you see is what you get’ editor. If you’re interested in a deeper understanding of HTML there are limitless resources online. Here’s one to get you started: W3 Web Standards Curriculum.

Ok, so we know our content on the web is formatted with HTML, which describes the content.  We know the HTML should be semantic-that is-it should also describe the meaning of the content. So where do we go from here?

Content Hierarchy

Simple. Just make sure when you’re editing your content that you create the correct on page content hierarchy.

What do I mean by that?

Well, take a look at other pages around the ‘net. If you’re writing an article (like this one maybe), your content should have proper markup to signify it’s importance.

Your content will usually have one heading (<h1> tag) for the title.  You should also be using <h2> tags for sub-headings, <h3> for sub-sub-headings, etc. Text should be emphasized as needed. Lists should be marked up with the proper ordered <ol> or unordered <ul> tags.

This all may seem basic to you if you’re already familiar with HTML or even content writing, but you’d be amazed at the number of small business sites I’ve seen that are filled with huge walls of text. People don’t want to read walls of text and web crawlers don’t either.

That’s it for this week. I’d suggest exploring HTML markup a bit more, try starting with the resource mentioned earlier.

Homework Assignment: Take a look in your browser history at some of your recent searches. Pull them back up and look at the first few sites on each query. Pay attention to how their content is formatted. Pay attention to Headings, sub-headings, and their general content hierarchy.

Notes:

In a default install of WordPress you may need to click the ‘Show/Hide Kitchen Sink’ button to get all of your formatting features(headings).

Wordpress screenshot
WordPress Show/Hide Kitchen Sink
WordPress screenshot
Paragraph/Heading formatting options in WordPress

 

Drupal CKEditor screenshot
Paragraph/Heading formatting options for Drupal with CKEditor