SEO Elements Every Web Designer Should Know About

When website projects involve web designers and SEO’s, it’s almost a sure fire recipe for conflict. However, it doesn’t have to be that way if both sides are willing to communicate and understand each other’s point of view. In an effort to help designers, I’ve written down some of the most important and easiest to implement aspects of SEO that all web designers should know about and use in their projects and work flow.

Masthead – The masthead is one of the first things people see when visiting a website. It can create a powerful dramatic impact, impart a sense of trust, and create a lasting impression. It’s also one of the spots most abused by web designers. Not to stereotype, but let’s be honest. Most designers work on big monitors, double monitors, or, worse yet, big double monitors. This has a tendency to distort their sense of proportion. Lots of designers produce mastheads that are 200-300 pixels tall. Once I even worked on a website with 450px masthead. My recommendation: stop wasting so much screen real estate. When I build a website for myself, I have a limit of 100px. Why so small? A masthead almost never produces any revenue. Unless you are putting advertising in it, keep it small and let people get to the page so they can “do” whatever it is you want them to do when they reach your website.

Image Replacement – No discussion of website mastheads would be complete without talking about talking about links, CSS, and image replacement. For usability, your masthead should link back to your homepage. That’s standard operating procedure at this point. The image should also have an ALT tag with the company name and logo. Don’t try and be tricky and add extra keywords in here.

Here’s where things get a little controversial. Google is never going to recommend using an image replacement technique to get anchor text keywords in your masthead. They have said it multiple times, and IMHO they are doing this because they know that, if they open the door a crack, people will take advantage. However, in my experience, it’s just not a real world solution. Using anchor text works much better than an ALT tag. So my recommendation is to use a well known image replacement technique like Leahy/Langridge Method or Gilder/Levin Method. Avoid the -9999px type of things and stay away from adding in “extra keywords” or “helpful keywords.” If it’s not in your masthead logo, don’t use it … period.

Drop Down, Fly-Out, Rollover Menus – This is another one designers love to use, but remember to be careful. If you are going to use it, make it so that search engines can crawl through the URL’s. Generally this means avoid Javascript (even though Google can understand some Javascript) and use a CSS solution. If you’re unsure, use a text browser or search engine spider simulator.

Flash and Ajax – If I had to name the two biggest obstacles people build into their websites, Flash & Ajax would be near the top of the list. It’s not that they are bad by themselves, but people use them in all the wrong ways. Using Flash, Ajax, videos, or any rich media in your pages is helpful and sometimes necessary. And let’s be honest–it’s a lot easier to sell a big ticket item like a sports car with Flash or a video. Using Ajax to change the contents of a page based on user actions absolutely can make a better user experience. However, if you design navigation or links to your website–especially mission critical parts of your site–using only Flash or Ajax, it’s unlikely a search engine will find it.

Page Titles & Meta Descriptions – Make them different for every page. Really, it’s worth the effort. Having the same title and meta description site wide is like wearing the same outfit to every singles event or date you go on. Google finds it just as appealing as the person you are trying to date. Also, don’t put the name of the website at the front of the page title; instead, put it at the end. It’s a very simple thing that really improves rankings. The title tag and meta description are what usually appears in a search engine listing, so try to make them interesting and click enticing.

H1 and Hx Tags – Put an H1 tag on every page. I know it’s ugly by default, but use CSS to make it look any way you like. Your H1 can match your page title but it doesn’t have to. It can be slightly different or completely different if it needs to be. Use H2, H3, or other Hx tags in your pages and navigation when it makes sense.

Breadcrumbs – Breadcrumbs can be a powerful tool. They can help with usability and SEO. They help the user know where they are and can help them move “back up” the navigation tree. Make the breadcrumbs links if at all possible. The actual links should closely match or be identical to the page title for maximum SEO value.

URL’s and File Names – Try to keep file types out of the URL if at all possible (http://example.com/directory/page/). Moving from .html to .asp, .php, .jsp or any other technology becomes a huge pain in the butt after the fact. Yes, there are ways to work around it using htaccess or other tools, but if you do it right the first time, it’s a non issue down the road. Keep file names and directory names as short as possible. Include as few keywords as possible. When you get beyond four or five words in a URL, the value drops off dramatically.

Mobile Websites – Don’t create a separate mobile website. Using m.example.com or example.com/mobile/ will just lead to problems down the road. Even if you can detect user agents and redirect, it creates problems. Instead detect for mobile browsers and serve lighter content and use a different CSS file.

Canonical Issues – The website should only work on http://www.example.com or http://example.com, not both. If it does, you need to fix that problem.  Here’s a tool to help you generate the proper htaccess file.

Duplicate Content – Website content should only exist on one page or URL. If it exists in more than one place, you are leaving it up to Google to figure out which one they think is best.You can help Google by using the rel=canonical tag, but don’t rely on that to solve problems you shouldn’t be creating in the first place.

Moving Files and 404 Pages – Make sure your website has a 404 page and serves a 404 header response when someone looks for a page that isn’t there. Serving a 200 header response is called a “soft 404” and is bad. You can check with a page header checker. If you need to take down or move a file, set up a 301 redirect. Again the htaccess generator can help you if you don’t know how. Use the header checker to make sure it’s a 301. Using a 302, meta refresh, javascript redirect can lead to problems with search engines.

Number of Images and Image Size – Images may look nice, but never use an image where text will do. Search engines can’t actually tell what an image is. They use the surrounding text and filename to make a best guess. Size images properly. Don’t have a 1000px image and size it down to 200px using CSS. If you have a page with lots of images, use thumbnails and link to larger images.

File Size – File size has recently become a factor in search engine rankings. The faster you can make files the better. Remove superflous images whenever possible, use image reduction tools, and limit third party scripts, widgets, or tracking tools whenever possible.

Navigation – Try to keep the navigation as easy to understand and clutter free as possible. Once you start getting over 100 links on the page, it becomes harder for search engines to crawl through them all. Using navigation that changes based on user input (via ajax or javascript) is a bad idea: search engines will never “see” the secondary links.

Page Footers – Don’t clutter up a page footer with lots of links. It becomes hard for people to find/use them. Search engines don’t pay a lot of attention to footers anyway because people have abused them too much in the past. Don’t assume it’s ok to link to yourself in the footer of website. Ask the client first. If it’s ok, rather than linking to yourself from the whole site link, to yourself just on the homepage or, better yet, have a single page or popup page that links to you. It’s much better for you in the long run to have one strong link than hundreds of weak ones.

Sitemaps – Unless the website you are building is large, you don’t need a sitemap. But having one helps. Ideally you want an HTML sitemap and XML sitemap. There are plenty of free tools to generate them for you if you don’t know how. Keep them up to date and submit them to the search engines through webmaster central when you make a change.