When a client mentions search engine optimization (SEO), 99 times out of 100, what’s running through their mind is essentially keyword optimization. Obviously, choosing the right keywords to target is a very important step in making sure your website ranks well so it’s easy for your visitors to find in a Google search. Something that’s often never thought of, however, is that the markup that is used to display these keywords on your screen can be just as important as the keywords themselves. The way your HTML markup is written plays an under-appreciated role in your battle for the number one spot atop the search engine results page.
Writing semantically meaningful markup can be a huge boost to your SEO efforts. One of the most important tags to be aware of is the title tag. While it’s common knowledge to use this tag to insert a page title in the browser’s title bar, it carries a lot of weight in the eyes of Google and its competitors. This is the link text that shows up on a search engine page, so you’d better make sure it’s relevant to the content of the page. For example, if we were creating a page for a client’s site that was talking about their amazing new Super Environmentally Friendly Widget, you wouldn’t want your title text to simply say, Widget Company; you’d want it to relate specifically to that page’s content, and make it something more along the lines of Keyword – Widget Company – Philadelphia, Pennsylvania. Placing your keyword as the first word inside the title tag gives it more weight, and adding in the location of your business or service can help to increase relevancy for location-based searches.
When creating a page or section heading, many people might use a div or span tag and style it accordingly, but these tags are not semantically meaningful and give a search engine no indication as to the context of this information. The most important bit of information on a page should be encapsulated with the h1 tag, which signifies a heading of the highest importance. A common mistake is that, since the h1 tag carries such a high level of importance, some people think it is best to use them all over the page. This is not the case, since not every heading can be the most important. For any heading that is not deemed to be of utmost importance, the h2 through h6 tags should be used.
Often, a site’s navigation will be created using div’s or br tags, however, in most cases, it is more appropriate to use an unordered list. Essentially, a navigation menu is nothing more than a list of links, and by treating it as such, as well as using the ul’s title attribute, you’re giving search engines a very clear hint as to the desired context of your list.
In addition to all this talk about semantically meaningful markup, the order in which your content appears within the markup itself is also very important. Content that appears earlier on is given a higher weight. Generally, you want your most important information to be contained within the first fifty to one hundred words on a page. A common mistake when working with a two-column, navigation-on-the-left page layout is having the navigation come before the main body content in your markup. To search engines, this positions your navigation as being more important than your actual content. In a scenario such as this, it’s relatively easy to switch the order of your markup around, promoting your content towards the top, while using CSS to visually position the navigation accordingly.
In summary, finding the perfect keywords to target and then stuffing them into the copy of your site is no longer enough to make you stand out. The way you create your markup is crucial to your site ranking well, and by taking advantage of the several different ways HTML allows you to define your content, you can help search engines cut through the clutter and get a better look at what you’re really trying to provide to your target audience.