I call these SEO “tricks”, but in reality, they’re just smart ways of designing a page. Plus, any Google search for SEO will bring up many similar lists.  These are just the ones I’ve personally found to be the most effective.  Also, these are just the very basics that EVERY website should have.  True, full-on SEO takes time and effort.

INTRO – It’s All  About the Keywords

First things first… you need to decide the best keywords for your business. What term(s) will people type into Google, looking to find the thing that your business sells.  There are two schools of thought here: “Long tail” and “short tail” keywords. That’s a whole other discussion, but I tend to find that being more specific with your keywords yields better, more reliable results… especially for localized businesses.

For example, if you sell small, yellow widgets in Albany… trying to optimize for just the term “widgets” is going to be an uphill battle. It’s a competitive keyword, and may take months (or years) for your business to establish itself enough to get on the front page of Google.  However, if you optimize for “small yellow widgets Albany”, you’ll fairly easily get on the front page for that, as well as increase your placement for variations like “yellow widgets” or “Albany widgets”.  Plus, when someone types in that specific phrase, you can almost count on making a sell.

For our example, we’ll optimize for “small yellow widgets” and Google’s localization will help with “Albany”. So, now what?

1. Use Your Keywords in Your URL

Check if “smallyellowwidgets.com” is available, or “smallyellowwidgetsalbany.com” or “yellowsmallwidgets.com” or any mixture of those keywords.  You could even use hyphens in the URL like “small-yellow-widgets.com”.   If that’s taken, try the “.net” and “.org” domains… and maybe add a few extra words like “small-yellow-widgets-site.com”.  And feel free to register ALL of them.

Once you have the URL, you do a number of things.  If you don’t have a website, just use that URL for your new site. If you have an existing site, you can either do a redirect of the URL to your site, or better yet, create a landing page that has some info about your business and then links to your main site.

2. Put Keywords in Your Page Title

Frankly, I’m surprised at how many page titles I see that are “Home Page” or just “Home”. At the very least you should have your business name, but then put in your keywords, and any other helpful information.  If your business is “Bob’s Widget Store”, that should be first in your title… then followed by something like ” – for all your small, yellow widget needs in Albany, NY”.  Keep in mind that Google will only display the first 66 characters of your title, so your keywords should be within that range.  Also, it’s okay for the title to be a little longer, but keyword stuffing will end up hurting your ranking.

To change the title, open up your HTML page in a text editor… then look close to the top for the “<title></title>” tag. Type your title in the middle of the tags, and you’re done.

3. Relevant Info In Your META tags

The META tags should be close to the “<title>” and will take the form of “<meta name=’description’ content=’A description’ />” or “<meta name=’keywords’ content=’keyword one, keyword two’ />“.  META tags used to be more important in the pre-Google days, but now most search engines tend to ignore them… especially the ‘keywords’. Some people still spend hours trying to come up with every possible keyword to put in the META Keyword tag, but it’s mostly a waste of time.  However, I’d still suggest having it on the page, and keeping the keywords relevant and concise. You never know when Google will alter the algorithm to give some weight to the keywords tag.

The META Description is another story. While it won’t help with getting a higher ranking, it will show up in your Google listing. Plus, Google will bold all instances of the search term in the description (as well as the URL, Title, and Page Name).  So even if you’re not the first listing for a search term… having a description with the search term in bold will have a better subconscious effect on the searcher.

4. <h1> Tags With Keywords At The Top Of The Page

The “<h1></h1>” tag holds a lot of importance. When the Google-bot comes to your site and sees that tag, it assumes that whatever is in that tag is important.  It’s designed to be a “headline”, with “<h1>” being the most prominent, then “<h2>”, “<h3>”, and so on. For pages I design, I like to use the header text image replacement trick, which essentially moves the text in the “<h1>” tag off the page and replaces it with an image. But if you don’t do that, at least put your main keywords in there.

To do this, find the opening “<body>” tag, and soon after it, type in something like “<h1>Bob’s Small Yellow Widgets</h1>”.  Again, don’t stuff as many keywords as you can in the “<h1>”… Google will be able to tell, and will penalize your site for it.

5. All Images Should Have ALT Text

The image tag will look similar to this – “<img src=’somepic.jpg’ />”. But for the Google-bot, it has no idea what that picture is of, since it only looks at text. To help with that, you need to put the ALT attribute in the tag, so the image tag looks like this – “<img src=’somepic.jpg’ alt=’A Small Yellow Widget’ />”.  Of course, the ALT text should actually describe what’s in the picture, so you shouldn’t put those keywords on a picture of an airplane.  This is also effective for getting your picture to the top if someone happens to do a Google Image search.

A couple of other points on optimizing images.  First, if you have a jpg picture of a small, yellow widget, you should name the file “SmallYellowWidget.jpg”. Second, you should also add the “title” attribute to the image tag, so that in some browsers, if a user put their mouse over the image, that text will pop up.  I personally haven’t seen the “title” attribute have much effect on SEO, but it’s good practice… and you never know when it will be more important.

6. Filenames Should Have Relevant Keywords In Them

If you have a store that sells all sorts of widgets, and you have a single page dedicated to the small, yellow ones… that page (html file) should be named “small-yellow-widgets.html”.  As I mentioned before, if your page name has the search terms in it, Google will bold all the terms.  Putting in the hyphens helps Google know that they are separate words.

Many online stores use product ids for each page, like “index.php?pid=2345″, and this does nothing to help with your SEO. Of course, in that case, it may not be so easy to change how the page names are displayed, and you’ll need to hire a web designer or SEO person to do either a mod_rewrite or some other way to make the names SEO-friendly.

7. Make A SiteMap

At its core, a sitemap is simply a single page that has links to all of the other pages on your site. In it’s easiest form, all you need to do is create a page called sitemap.html, then list all of your pages (using relevant keywords for each page) and make them link that page.  If you want it to be usable by your site’s visitors, it’s best to keep it in the same theme as your site… but for SEO, it can simply be just text.  Then make sure you link to the sitemap somewhere on the front page of your site.  That way, Google-bot can hit that page and easily find/index all of the other pages on your site.

An even more effective way is to create a sitemap XML file. The specification for creating such a file is not for beginners, but there are many sites that will automatically make a sitemap.xml file for you.  This is one I’ve used many times.

In Conclusion

These are seven basic things that I think every website should have, if they want to be ranked better.  It’s by no means an exhaustive list, and as I’ve said, true SEO takes time and effort to yield positive results.  But without at least these seven things, you’re creating a huge obstacle for your SEO effectiveness.

So, I’m browsing through some source code, and I see some <table>’s and  code with either no DOCTYPE or just doesn’t validate – and I vocalize my distaste. My wife then says, “But it looks nice, so why does it matter?”  Honestly, I didn’t have an answer. I just knew it did.  So I did some research, trying to figure out WHY businesses should care about web standards…

What ARE Web Standards?

I’ll pull a quote from Wikipedia:

In recent years, the term has been more frequently associated with the trend of endorsing a set of standardized best practices for building web sites, and a philosophy of web design and development that includes those methods.

Generally, it’s following the standards created by the W3C, so that your code is seen as “valid” by their handy validation service. The specifics get more technical and probably don’t interest the average business owner.  So here are some reasons I came up with for “Why web standards are important”:

#1 Accessibility – More customers having the same experience with the site

Web browsers are a finicky bunch, and each one works just a little bit different in regards to how they displays web pages.  However, most modern browsers follow most of the W3C’s recommendations, and thus display a properly validated page in a similar matter.  You may notice that I say most browsers and most of the recommendation… because even now, many popular browsers don’t score 100% when tested for standards compliance.

With a standards-based web page, you can be sure that the customer will see a very similar page to the business owner, even if they’re on different browsers.  In fact, you may have a potential customer with special needs, like a text-to-speech browser or even one that renders in Braille – and they’d probably be excluded if the site is non-standard.

#2 Futureproof

Browsers are releasing new versions all the time, and it seems like they tend to be MORE inline with web standards as time goes on.  If a business decides to spend $20K on a website, they should be secure in the notion that 5 years down the road, the site is still going to look good.

Also, standard practice separates the design from the content… meaning, you have all the information about the business in one file (ie, the .html file) and a separate file containing the instructions for how the information is displayed (the .css file).  Again, 5 years down the road, more than likely the web aesthetics will be different… and it will save some money if all the designer has to do is change the .css file.

#3 Better Search Engine Placement

When Google goes to your site and decides where it gets placed in search results, they absolutely don’t care about the design of the site.  By taking all the design aspects out of the page and making the code clean and standardized, you make Google’s job easier and help them place your page better.

#4 Speed / Faster Loading Time

With more and more broadband, this isn’t as huge of an issue as it once was, but it IS an issue. Standard markup is concise and compact, and almost forces the designer to strip away any unneeded code.  This results is a smaller file size for the page, and thus it downloads and displays quicker.  With first impressions being so important, a business sh0uld make sure that customer doesn’t have to wait any longer than needed to view the product or page.

#5 It’s Just the Right Way to do Things

Think about your household plumbing: If you have a leaky pipe, it’s possible to fix it with duct tape and it could hold for a good long while. But is that the right thing to do? No, you’d probably call a professional plumber. And would it be okay for the plumber to fix it with duct tape (even if they have the excellent, professional grade duct tape)?  Of course not.  You call a professional because they should have the tools and experience to do the job right.

A professional web designer is called for the same reason. They should be up on the current trends and techniques, and more importantly the right way to do things.  And if a designer doesn’t care about standards, what does that say about how they will approach YOUR site?

Now, I’ve got a couple of hurdles to jump in this endeavor.  First, I don’t want to brand the home page as only for “League City”, since we’re hoping to expand fairly quickly. I know there are ways to add in more keywords (obscuring a few on the page, redirecting search bots, etc), but I don’t want to do this. We’re also at a disadvantage because while I live in League City, our business address is in Friendswood.  sidenote – We’re listed #5 for “”friendswood web design“.

So my second hurdle: I want to stay as organic as possible.  But without “League city web design” (sorry, I can’t resist myself) in the title or a blazing <h1> tag on the page… there need to be other ways.  There are keywords in the header <h1>, which are moved off to the side, but that’s about it.  So, I did register the domain leaguecitywebdesign.com, and I’m posting some relevant content with a link here or there back to 51 designs.  I’ve also got keyword anchored links on my personal site and a couple of social network profiles I have.  And, of course, if you google “league city web design”, you’ll see leaguecitywebdesign.com at the top of the list, and 51designs.com is at #33 (up from #37 last week).

Almost all of my search marketing so far has been geared towards Google, because they’re still THE place to search. But out of curiosity, I went to check out Microsoft’s Bing and search for “league city web design” there.  And other than the two top listings, there isn’t a single local web design company listed. The top few results are spammy, non-local web design companies – then there are a few paid directories (that ALSO don’t have local companies listed) – and then meetup.com. Even the top two “local” listings are for companies in Pearland and Friendswood.

This tells me one thing: if I were trying to find a web design company in League City, Bing would NOT be able to help. In fact, the first TRUE local company is the 12th listing… and THEIR site isn’t even available. The next semi-local listing is on page 5.  So Bing is broken. At least in this case.  But if they can’t get a fairly simple search term correct, how am I supposed to have faith in their other results?

Let’s say you have a container or wrapper div on your page.  Inside that div, you have two more divs, one sidebar (floated left) and one content area (floated right) .  This is a pretty standard web layout.  However, if you were to think, “I’ll put a background color on the container div”, you’d notice that it would NOT expand to the sidebar or content divs (at least in standards compliant browsers).  This seems odd, because they are INSIDE the container… so why doesn’t the container surround them? BrainJar explains why, and I’ve heard and read other explanations, but it’s still VERY counter-intuitive to me.  But whatever – it is what it is.

The other issue I had is actually two issues, both regarding the header image: offsetting the h1 tag, and css sprites.  A List Apart covers sprites in glorious detail. As for the h1 tag, it’s fairly common knowledge now that two of the most important factors in relevant SEO are the <title> and <h1> tags on a page… especially using relevant keywords in your top <h1> tag. A simple demonstration can be seen at CSS-tricks, and as far as I can tell, Google doesn’t penalize you for doing it.  Though, it has to be relevant text, and there can’t be hundreds of hidden keywords on your site.

free css web template

So with that in mind, I decided to create a simple (really SUPER simple) web template that addresses those issues. I call it “51 designs template 1″ — pretty original, don’t you think?  This is essentially the framework I used when I started designing the main 51 designs site, and it’s easy to customize. The navigation bar can be aligned to the left, just by changing the float – and the content and sidebar can switch sides just by changing their floats.

You’ll notice I’ve got borders around the divs. I personally find these useful when doing the initial design of a site.  It helps put all the element into perspective, and gives a great visual representation of the box model and how things are truly positioned.

Finally, I’ve included a slight hack that makes the scrolls bars stay visible in Firefox, even if the content doesn’t extend beyond the page.  That way, if you navigate between pages that have different page heights, the site doesn’t “jump” to the left or right.

Check out the demo here, or download the source files here.  It’s totally free to use and abuse, for any purpose whatsoever, with no restrictions.