Spiders, the economic crisis, an angry Chris Brown and a woman scorned are all things you should be scared of. Thankfully for web developers, Search Engine Optimization (SEO) is not on that list. We’re going to go over some simple SEO techniques that are easy to incorporate into your web development production routine. These are the things you should be doing before doing the more advanced stuff which we will cover at a later date.



Search engines basically index the internet and allow you to search for specific data in that index via a website. We know those websites as Google, Yahoo and Ask.com. Each one of those websites has a unique algorithm that is supposed to do a better job indexing and then searching the indexed data for you. The technique of making your website easy for the search engines to index and then search for data is called Search Engine Optimization.

Step 1 – Name Your Files The Right Way

The search engine algorithms look at the file names and see if the names are relevant to the content on that web page. For example, this website is a design and web dev blog. Here are the names of the last few articles I have written.

• 30 Awesome Designerly Band T-Shirts
• FREE Vector Twitter and RSS Icons!
• 5 Classic Sans-Serif Fonts

You’ll notice that they are all in the realm of design and web dev. in this example, I’m showing you what a good url looks like but it applies to everything including something as simple as naming an image:

typesett-logo.png
twitter-roll-eye-bird-icon.png

is better than

logo.png
followtwitter.png

because logo.png is generic and brings little value to SEO. Atleast typesett-logo.png verifies the domain name. followtwitter.png is worse than logo.png because it’s not a word. You may be able to decipher “followtwitter” but to a algorithm, that is 100% gibberish. twitter-roll-eye-bird-icon.png is better because it’s separated by dashes which the algorithms can parse out into separate words. (The roll-eyed twitter bird is my unique creation for this web site, so I’m trying to get it indexed as “twitter-roll-eye-bird-icon” so they’ll come here to download the snarky dude.)

Step 2 – Use Meta Description Tags

The search engines are not gullible, you won’t get far with trying to pull one over on them but you should absolutely have a meta description tag in your HTML header. Here’s ours:

meta name="description" content="typesett is a useful and amusing resource for creatives to learn, browse and entertain themselves with design and web development themed topics"

here’s Digg’s:

meta name="description" content="Digg is a place for people to discover and share content from anywhere on the web. From the biggest online destinations to the most obscure blog, Digg surfaces the best stuff as voted on by our users"

Just keep it simple and try to state the purpose of your website as concisely as possible.

Step 3 – Use Meta Keyword Tags

Some argue that the search engines have given up and now completely ignore this meta tag. My personal guess is that they play a part in establishing the context in which the website will be ranked. If your website’s meta keywords say you are XYZ… you better back it up with all the other indicators otherwise you’ll be punished or ignored in page rank. Same as with the meta descriptions, you should be concise and relevant as possible. Here’s ours:

meta name="keywords" content="Design, Typography, Web-Developer, Creatives, Advertising, Marketing, Web Design, Print Design, Design News"


Step 4 – Name Your HTML Titles

This one is big. Those title tags for each web page are actually a huge indicator to the search engines. Unlike meta tags, these are front and center to the users so they know it’s in your best interest to truthfully state what is on this page. As usual – be precise and concise and make sure each unique page has a unique title and you’ll be sitting pretty. Here’s ours:

typesett - Amusing & Useful Resource For Creatives

Step 5 – Style Your Text

See how this sentence is bold? And this sentence is in italics? Do this as much as possible when it’s relevant for your content and it will pay dividends not only for your users who like scanning through text but search engines will look at the text and take it into consideration when parsing it through the algorithm.

Step 6 – Use Alt Tags For Your Images

If you have a image heavy website, your job is going to be tough enough because search engines for the most part can only parse text (whether it’s visible to the user or not as in code, file names, directories, url paths and HTML text). So the only way you can turn imagery into a positive SEO contributor is by using Alt tags. As always – be concise and precise and you’ll feel good that it’s a good accessibility exercise as well. Here’s an example:

Alt=Sub Pop Tee

Step 7 – Use HTML Hierarchy

This one is so simple and makes so much sense that it wows me that everybody doesn’t take full advantage of it. HTML has a built in hierarchy within itself. The Head, Body, Headings (1 thru 6) and and the text modifiers like bold, italic and etc are all example if Hierarchy. If done right, a search engine can practically look at all the headers and put together a table of contents for that page purely based on where and what is the headers! So make sure you organize your content, use headers properly and separate and logically place content in order.

Step 8 – Use a Meta Robots Tag and Robots.txt File

The idea behind this is simple. There are things you want the search engines to look at… and thing you don’t want them to look at. Like that folder on your web host where you post pictures of your cats for instance. Yes, that one. Very cute, but it muddles what you want the search engines to see and find relevant. Just put a robots.txt in the main root folder with the code:

User-agent: *
Disallow: /cgi-bin/
Disallow: /tmp/
Disallow: /MyCuteCatMrSnuggleFluffy/

and that should keep your cat photos off the search engines and your real website sparkly clean.

Step 9 – Frequently Updated Content

You know that bar down your street with all those cute chicks every weekend? The one where you met your psycho ex-grilfriend but you’re cool with it because looking back she was still kinda fun despite being insane? Well, think of your website as that bar and the search engine is you going to index the hot chicks there. If it was the same girls every week, you wouldn’t really have much to index right? Same thing. make a section of your website dedicated to content that is updated regularly like; a news section, blog, portfolio or some kind of photo album even.

Step 10 – Validate Your HTML

This one is a no-brainer. If you can’t validate your code, just try to come as close as you can. We understand it can be tough depending on what CMS or blog platform you’re on or trying to get your page to render on IE6 with all those crazy hacks. What you can’t have is fatal errors that will cause your website not to be indexed correctly. The standards compliance movement these days has come a long way in getting the browsers to be consistent with each other and therefore search engines to recognize a proper way to write code. So do it!

What do you think? Comment and let me know if you want to see some typesett cat pictures. Or not, for that matter.

This entry was posted on Wednesday, March 18th, 2009 at 11:48 pm and is filed under Design, Top Lists, Web Design, Web Dev. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.