Building web applications using experience-driven strategies, agile development practices and open source technology.

Page Markup for SEO

I run into many organizations who either ignore or are not aware of some easy things they can do to optimize their site for search engines. Many folks feel the best tactic to increase traffic is to throw more money into their pay-per-click ads. This certainly will help increase traffic, but I always advise my clients to take care of the more important things they can do to boost their ranking organically. For this article I will go into just the basics of page structure for SEO to get you started in the right direction.

Meta data:

Meta tags used to be the end all of SEO. Today it's still important in regards to your page markup but is just one piece of the puzzle. Having a solid but short list of non-repeating keywords is still important. Using a keyword tool can really help you on this, just be sure the keywords are accurate and actually show up in the content of your page. The meta description should also be short and sweet and be a description of the contents of the page. Don’t try to get tricky with keywords or descriptions, it will only hurt you. Keep it accurate and simple. Err on the short side. Also don’t forget to include your meta tag to tell robots what to do. You can also use a robots.txt file or both. Here is an example...

<meta name="robots" content="index,follow" />

Title tag:

Another key part of your page is the title tag. Avoid generic title tags, make sure the title tag accurately titles the page. Sounds simple, right? It is, but it's often overlooked. Avoid titles that start with the name of the domain first. For example...

mydomain.com | about us

That's not the worst, but this is even better.

About us: My Site Name

or

About us: Leadership, Working professionals, Industry leaders

In most cases the title tag should match your pages H1 tag. Speaking of H1....

H1, H2, H3, H4:

You thought H tags were old school, right? Wrong! Search engines look for them. It helps them understand the flow of your pages. The H1 tag is a biggie. Every page should have one and only one! Use CSS to make it pretty, just make sure you use it. If your home page doesn’t have a clear content title then use your site's name. One good way to do this is to put your logo in an H1 tag. Just make sure you do that for only the home page. Other pages should have a clear title and your site name should no longer be an H1. Even with dynamic template based sites this is usually pretty simple and just takes a little logic. Also if you have an image representing your site name or if your page titles are image based you can still use an H1 tag with copy and assign the image as a background in CSS. The trick is to hide the copy and only show the image. This can easily be achieved with z-index in CSS. View source on the home page of this site and then load up my CSS file. It’s a pretty simple trick. In fact z-index can be your friend with really heavy image based sites that still need search engine readable copy. As for the rest of your H tags, use them as they make sense to you if you were looking at your site's page in an outline.

Lists:

Break out the ul and ol tags for your nav items. Search engines make good use of lists. It helps them understand the page structure just like your H tags. Go nuts with your ul tags. With some simple CSS you can make them look any way you want. So use them, search engines like 'em.

A few other tips to help optimize your site's markup for search engines is to put the content towards the top of the list. You don’t want the main readable content to be after tons of markup in a left column, for example. With CSS you can easily put your content first. Use float:right and float:left to get things where you want. Also don't forget to use those alt tags and title tags. Don't be lazy, use them! Just remember search engines read your markup top down sans CSS. A tool that I rely on heavily is the webmaster tool plugin in FireFox. You can load your page and disable CSS. This will give you an idea of what a search engine sees. If it reads well to you and the more important data is at the top and the H tags an ul tags help structure the data... you're on the right track.

This is just the tip of the iceburg in regards to markup for SEO, but this will get you started and more importantly get you structuring your data for SEO. Before you know it you’ll be thinking like a google bot! Questions, comments? Need help re-structuring your site for SEO? Contact me.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.

More information about formatting options