Optimizing HTML Markup for Better SEO

By: Daniel Imbellino
Updated: April 15, 2014

If you are a web designer and you are new to search engine optimization, you should start your journey here. Creating a quality webpage and quality content is one thing, but getting your content and your site as a whole to a growing internet audience is another. What would be the point of building a website if no one could find your content? Here we are going to show you some strategies that will help make your webpage’s, and the content on those pages, more search engine and user friendly. You could call the strategies we’re going to show you, “on page SEO”, since they are geared towards optimizing HTML markup and content directly on your webpages.

Semantic Markup For Better SEO:

For starters, what is semantic markup? First we need to define what "semantic" means before we can make sense of using this term when marking up our webpage's content. Semantic basically means "of or related to meaning", especially as indicated in languages. In the case of implementing semantics into HTML code, we are essentially using pieces of markup (tags) that are directly descriptive of their content, essentially meaning their is a direct relationship between the markup itself and the content it portrays.

In HTML an element (tag) acts as a place holder for some sort of data. The more information we can provide about a particular piece of content contained within our elements the better. Google takes markup in webpage's very seriously, it is a major factor when evaluating our content, and not without cause. Every webpage in existence consists of markup, whether this be some form of HTML, or even a custom language written in XML for example. While HTML has come a long way, even with the advent of HTML5 which sought to address better sematics in markup, HTML itself remains largely unflexible at best. HTML has its limits, with certain tags being used to represent certain things, it hardly seems customizable. So what can we do to make it more flexible? The answer, with CSS ID's and Classes.

While standard HTML elements remain "static" in the sense that they do not change (such as a paragragh tag that is non descriptive of its content, other than the fact its a paragragh), CSS ID's and Classes give us the ability to define tags and attributes that are descriptive of their content, like so:

If we had a section of a page that housed Flash Games we could signal this in our markup with a CSS ID:

We could then reference this inside our markup like so:

<div id="flash-games"> </div>

Or we could reference the same idea using classes in our CSS:

And then reference this in our HTML like so:
<p class="flash-games">Content Here</p>

Now we have real meaningful markup that gives search engines extra clues about the content stored in our elements and our webpages. While HTML5 looks enticing, as far as semantics goes, its no where near as powerful as XML. If you want full control over your markup elements, you will need to learn XML. But for those who stick to the standards and like HTML's simple implementation, both ID's and Classes are a great option.

If you you’ve been designing webpage’s then you probably know what a page title and meta description is, but do you understand how search engines view the content within these tags, and how they implement this content in search results? When a user types a search query into Google search, they are presented with an assortment of links followed by a description for each link. Sometimes the description is taken directly from the meta description tag of your page, other times it’s taken from actual content within your pages, such as a paragraph, heading, etc. And sometimes Google may even supplement your pages description with content they feel better describes your page, even if those words are not used directly in or on your pages. Google uses algorithms to decide how to implement your content within search results, so don’t be surprised if your links descriptions are not what you had intended.

When it comes to your pages content, you really want to tie all your content together within your HTML itself as much as possible. Your pages title, meta description, headings (<h1>, <h2>, etc.) and content should all be directly reflective of each other. Try using keywords that are the same or similar within each area and are directly descriptive of your pages content as a whole. Keep in mind, a meta description is just that, a description! Don’t focus on simple keywords here, actually describe your pages content briefly and clearly. If your webpage is about xbox 360 game reviews, then state this as so like this:

<meta name=”description” content=”check out our comprehensive reviews of current xbox 360 games” />

Don’t do this: <meta name=”description” content=”xbox game reviews, xbox 360 game reviews, reviews of xbox 360 games, comprehensive 360 game reviews” />

This is not a description, it’s a bunch of garbled up keywords that doesn’t directly reflect the point you are trying to get across to your users. Also, Google is expecting a description here as well, and not performing this function properly can cause your pages not to rank very well in organic search results. Also, consider how people searching for content online will view your descriptions in search results. It’s really best to get to the point, while keeping it short and sweet. Most search engines prefer meta descriptions that are within the range of 140 to 160 characters in length, and Bing appears to consider spaces to be a character, I have no idea why, but they do. If you go a bit over this amount, no big deal with Google, but Bing doesn’t like it at all! If you have a Bing webmaster tools account you will instantly get a message informing you that your pages meta description is too long the moment they realize it. Bing even marks this message as “severe”, and will ask you to change it immediately.

What about links? When it comes to links it seems everyone is using buttons these days. However, search engines can’t read text on your buttons and you need a way to describe what your link is about. People tend to use an “alt” tag, but search engines intend alt tags to be used to provide “alternative text” for an image, such as in the case of someone using a screen reader, or for users with visual impairments. If you are using buttons for links, try implementing the “title” attribute when creating your links. In fact, you can use “alt” and “title” attributes interchangeably according to Google’s webmaster central guidelines. But, a title says, this is what this link is about, while an “alt” attribute says, this is a description of this element (as is the case with an image file). These are really 2 completely different things. Here’s how you implement a title attribute within a link that uses a button:

<a href=”page2.html” target=”_self” title=”introduction to computer science”><img src=”dsc0002451.jpg” /></a>

Do you see any problems here? There’s actually 2 problems that with this particular link that will not help you when it comes to search engines indexing your content. The problem is with the naming conventions used, not just with the file you are linking too, but also with the image itself. “page2.html” doesn’t tell users or search engines what this particular page is about. Also, search engines tend to display the file name in a users search bar, as well as below a pages description within search results. It would make more sense to give your pages file a name that is directly descriptive of its content like this, “getting-started-with-computer-science.html”.

Now we have a good naming convention that makes sense to users and to search engines alike, and since search engines can make sense of this name they are more likely to return your content to users search queries. Likewise, the name assigned to the image file also makes no sense. Notice it starts with a “dsc”, this is the typical file naming convention you will find with images produced on digital cameras, smart phones, etc. If the links button says, “computer science tutorials” on it, then open the image in a graphics editing program, such as the free “paint.net” program, and rename the file to, “computer-science-tutorials.jpg”. Now our button has value! Likewise, if you are using a button for your home page, you could name your button “home.jpg”, etc.

Now our buttons and our links are more descriptive of their content. Most browsers will display a “tool tip” (a piece of text containing the information you put into the title attribute itself) when a user hovers over the link. This is also helpful for providing additional information to users on your site. If you don’t like the tool tip, just use an “alt” attribute instead, either is fine really, but the title attribute is a bit better at saying, “this is what this is about”, as opposed to the alt attribute being used. So here’s a link with an “alt” attribute being implemented instead of the title attribute:

<a href=”intro-to-computer-science.html” target=”_self”><img src=”computer-science-guide.jpg” alt=”link to computer science tutorials page” /></a>

So, in this case we just implemented the alternative text for our image, but the title tag is still the best choice, although you could implement both if you wanted too. Don’t get carried away with this though! I would suggest using one or the other when it comes to links, of course, the title attribute being preferred. After all, our image file itself already has a description because of the name we assigned it in our graphics editing program, so there really is no need for the use of alternative text here. If you are adding images to your pages that are not links, I would definitely suggest using alternative text for image on your website! In fact, it’s required by federal law that you do so, and is a requirement of all search engine as well.

What HTML elements should I use to encase my links in my webpage’s? Well the “anchor” tag, is not a block level element, and technically speaking every link requires the use of a block level element to enclose it on your pages as defined by the W3C (world wide web consortium). There are a few caveats here that you need to be aware of that could cause you a mountain of headaches and possibly even get your site penalized by search engines for not following their webmaster guidelines. Don’t use heading tags to enclose your links (such as <h1>, <h2>, etc), you can use a <p> tag to provide additional formatting, but I don’t necessarily recommend this. Instead use an ordered or unordered list to encase your links, and this is kind of the de-facto standard way to doing this, like so:

<li><a href=”home.html” target=”_self”>Home</a></li>
<li><a href=”intro-to-computer-science.html” target=”_self”>Computer Science Tutorial</a></li>

Once again, don’t use heading tags for links, or do anything like this:

<h1><a href=”home.html” target=”_self”>Home</a></h1>

<h2><a href=”intro-to-computer-science.html” target=”_self”>Computer Science Tutorial</a></h2>

Headings are used to say, “this is what this particular page is about”, and obviously the current page you are on is not about the content on a different page or directory, so don’t use headings with links, unless you are placing those links n a generalized description (say, on your front page or something). Also, search engines like Google will penalize you for using a ton of heading tags on the same page. No joke! They will! Try to use each headings only once per page if you can, “h1” thru “h6", etc. You can use headings more than once if it is really necessary and search engines won't necessarily penalize you, but don’t get carried away with this either. Try not to use too many <p> tags to encase your links either, because <p> tags are used solely for paragraphs, meaning they should be referring to the pages internal content, and not to another pages content somewhere on your site.

What’s the best way to get search engines to index and share my content in their search results? The answer here? Text, and lots of it! While I would agree that you should make your webpage’s appealing to your users viewing it, search engines need information about your page and its content in order to match users search requests with your content. It’s perfectly OK to have page’s who’s main focus is multimedia such as, images, videos, etc, but be sure to include textual information about that multimedia somewhere on the page so that search engines have information to work with. It’s also a good idea to put text high up on the page. No one likes to scroll through a ton of ads and other nonsense to find your content. When a user visits your site, your pages should be obvious as to what they are about. If a user enter a page and cannot make sense of that page, they will simply leave. You should keep your content on an area of the screen where people can view it from the moment they enter your pages. In many cases, users may need to scroll to see all the content within a page, but there should be information and content that’s viewable right for the start. The more textual information you provide in your pages, then the more information that search engines can collect from your pages and tie to user’s search requests. This adds value to your content, and users and search engines alike will reward you for it.

Another thing to consider when coding out your pages, take the time to edit your code and textual content for errors. Too many errors in code, such as broke or missing tags could cause search engines to devalue your website as a whole. No one is perfect, and Google themselves does realize this. You won’t get penalized for a few errors here and there, but definitely make an effort to look back over your markup and formatting for mistakes. Also, be sure to check your textual content for errors, and try to use proper grammar. Google has stated in the past that they do consider your actual content, not just your code, when evaluating the quality of your website. Having a bunch of punctuation errors, misspelled words, missing commas, or periods, is bad news. Google will give more priority to high quality content in its search results.

Be sure to check out our other tutorials and possibly get involved with discussions on our forums. The forums provides a community of support for people to help each other with web design problems, and learn from each other.

More SEO Guides

Back To Home