SEO starts well before you ever publish a page on the web, you should start thinking about it when you are designing your website. A page consists of three elements, the first being the document type declaration (DTD) tag, the <head> tag, and of course the <body> tag where all your content will be. These tags have a major impact on the ranking of your webpage, so you’ll want to make sure that you include them, and that they are set up correctly.
Alright before we get going you’ll have to make the decision between HTML and XHTML for your webpage, but I’ll help make this choice a little bit easy for you. As you may well now The World Wide Web Consortium (W3C), is the official body that governs the Web by creating and publishing standards and guidelines for webmasters to follow. Anyway, quite sometime ago they determined that while HTML was useful in it’s day webpage’s of today are much more diverse, and filled with data this means we have to find a new way to display all this.
Now let’s take a look at EXtensible Markup Language (XML), it’s similar to HTML as it’s also a text-based markup language. However it has some major difference’s as it can classify data, it’s also free-form meaning that you (the user) can define tags to be used as you go. Pretty sweet huh?
Well as a result of all this freedom limits it from being able to be used as a Web language. Well how about a hybrid then? Back in 2000, the W3C approved EXtensible HyperText Markup Language (XHTML) for use on the web.
Alright, let me bet you over the head with a few of the advantages of XHTML over HTML before moving on. There are numerous points I could make but here are the major ones:
- XHTML is backward compatible to HTML 4.01
- XHTML is stricter therefore cleaner then HTML
- W3C has been recommending the use of XHTML since 2000!
Being that XHTML is stricter and cleaner is a great advantage in it’s own right to chose it over HTML. This means that it’s well formed code and your pages will look exactly the same in any browser, this well formed code is also great for search engine spiders to read. While most modern day “full size” browsers can read and interpret poorly written HTML code, smaller browsers such as those found in mobile devices can not decipher this poorly constructed code. With more and more people every day browsing from mobile devices it’s a very good idea to have your code setup as clean as possible for them, you may even want to develop a mobile version of your website altogether (depending on your product/service) but this is something for a different post.
By now I hope that I convinced you to use XHTML for your webpage, if you don’t know how to code it, if you already know HTML it should be a breeze. If your just starting this may take you a little longer but just stick with it and I’m sure that you’ll pick it up in no time at all. W3Schools is a great resource for learning XHTML, here is the link to their XHTML tutorial.
Down to business now, let’s start by filling in the !DOCTYPE tag, this is where you’ll declare the proper DTD. This will be found at the top of the page before the <head> tag. If you’ll be using XHTML you’ll want to have a tag that looks like the example from below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
My above example uses, Transitional, which will allow you to use more HTML presentation features, but there are a few other choices that you could use. You could choose to use, Strict, if you would like super clean code but you’ll need to you CSS for your presentation features. You may also use, Frameset, if you would like to use frames on your webpage.
If your going to be using XHTML you’ll need to modify your <html> tag, which will be located right after the opening DTD statement. If using HTML you will not have to include anything else, however for XHTML you’ll want to identify the path to the XHTML namespace definition. So your <html> tag should look something like this:
<html xmlns="http://www.w3.org/1999/xhtml">
After completing these steps you may want to validate your code before moving on, this way you will be able to find and correct any errors early on so you’ll have well formed code that looks great in any browser.
Let’s move on down the <head> tag a little farther than, shall we? First stop, the <title> tag it’s a critical element that will help the search engine bots determine what kind of content they will find on the rest of the page. A few things to keep in mind, you’ll want to make it appealing so that somebody will want to click on it, as this is what search engines usually use to link to your site in the result pages. Two other key points I would like to make here is that you should associate this with other keywords found on that page, as well as you’ll want to keep it <65 characters long.
On to the meta description tag, while search engines may get the text snippet elsewhere they may very well take it from the description tag. This should be incentive enough to provide a clear, compelling, keyword-laden description tag, that may help your site receive clicks in the SERPs. While filling in this tag you’ll want to use a unique description of the page, with keywords that are specific to that page. It should also be at least 25 characters long, but no longer than 150 in length, this is not a hard and fast rule but it may help you and your site out. Avoid just coping and pasting the title tag into it, this is just a plain waste of a great keyword development opportunity.
Next up the meta keyword tag, they are mixed feelings about this tag. Some webmasters say you shouldn’t use it at all, others say that it doesn’t hurt to employ it. Most search engines have abandoned the use of this tag to influence search results because to many webmasters in the past have abused it to gain ranking for irrelevant terms. My feeling about this is, while the payoff is relatively low it’s worth the time and effort that it takes to fill the tag out. Just make sure that you use good relevant keywords for it, also make sure that it is no more than 874 character long, and that you don’t repeat a word more than four times.
Alright now that we have covered the major tags, let me cover a few more that may prove to be useful.
If you would like to target a specific language speaking audience with your website you can specify that by using a <meta> tag with the content-language attribute. If you would like more information on how to form these tag you can check out the W3C International Language Tags.
You can specify the content type and character encodings in use on your webpage by using the content-type meta tag. The most commonly used is the UTF-8 (8-bit Unicode) charset. By using UTF-8 it allows the browser software easily map the page’s character encodings to the user’s local language.
You can use the robots meta tag attribute to limit which pages on your site are available to search engines. This is done by invoking the Robots Exclusion Protocol (REP), the details are quite extensive and should be covered in depth in another post. If you would like to have more information about this topic you can find it at robotstxt.org.
The last tag I will be covering is the <link> tag with the canonical attribute, this tag can also be placed in the head area of your webpage. It’s used to establish a canonical URL for a webpage, which is helpful for search engines. I will also be covering this tag more in an upcoming post.
Congratulations you made it! I know that was an exceptionally long post but I hope that you have found at least some of this information useful.
Post new comment