SEO Elements Every Web Designer Should Know About

Credit: Photospin.com

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.

Written by
Michael Gray
Join the discussion

This site uses Akismet to reduce spam. Learn how your comment data is processed.

17 comments
  • As always, Michael and I disagree about the mobile website. My general opinion is, “it depends” whether you should have a separate mobile site or not. For the most part, personal blogs & content-focused sites, I agree it’s best to serve reduced content & CSS to mobile devices. For sites that have advanced functions, that might not always work. If in doubt, consult with someone who specializes in mobile.

    • I agree regarding “it depends”. I’ve worked with restaurant sites and users basically want specials, menus & locations. While the full website offers much more, it’s not necessary to include all of the content for a mobile device, especially image heavy content.

    • There’s never an absolute yes or no on mobile. But implementing a subdomain because it’s easier, not because it’s necessary is a solution I see too many times.

    • Although it’s not always possible due to various business considerations, I think that the ideal is to create a lightweight website in the first-place that is easily accessible by both mobile and desktop browsers. If you’re designing a website that doesn’t work well on a mobile device, you’re likely doing it wrong. A lot of developers mistrust SEO people, but understanding basic SEO concepts is important and they need to be baked into the initial website that you create. Developers should focus on clean and human understandable URLs right off of the bat. Even though social media is more of a focus of the marketplace recently with all of the companies emerging listed at http://www.buyfacebookfansreviews.com that help people get fans on Facebook and Twitter, search is still really important for most websites and building a quality website right off of the bat is necessary for success and this cannot be accomplished if the web developer does not understand basic SEO concepts.

  • Love your insight, Michael. This is in-depth as always.

    I’m wondering – would it be beneficial to use scripting to remove drop down menu links from the source if there were so many it went over the 50 or 100 links per page recommendation?

    Or, say you have a Men’s and Women’s drop down and underneath the anchor text is identical.

    Thanks again for sharing the info in this post.

  • If properly implemented, I think drop-down menus are great for SEO. In particular, we’ve had great success with the good ‘ole suckerfish drop-down that uses JSonly for older browsers.

  • Oh the masthead. For two months I’ve had an ongoing fight with a client who wants his happy logo to be huge in the header. I’m sad to say it, but I’m done fighting.

    I so agree with your points, but wish every client could get the concept. When your header is so large is feels like it is going to eat you, you have design issues.

  • I read the with the new HTML5 language, Footer will become more important for SEO, because it can collect extra useful informations.

    From : http://sixrevisions.com/content-strategy/what-potential-impact-can-html5-have-on-seo/

    In web design, a footer usually contains auxiliary information such as copyright information, licensing terms, privacy policy information, links to static pages, and links to social media profiles. This section could be used by search engine spiders to identify items related to copyright, terms of use, privacy policies and social media profiles.

    Since contains auxiliary information, will its content be heavily discounted in search engine algorithms? Possibly.

  • You say, “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.” Then you go on to say, essentially, do that in as little space as possible. Sorry, it doesn’t make sense to me. I don’t advocate the 400 px height you mentioned, but a company logo was probably not designed with a 100 px web masthead in mind. Horizontal or nothing? Hard to do a powerful, dramatic impact in 100 pixels. The screen space for this is important; let’s not minimize it. No SEO involved.

    • As with everything in life there is a tradeoff. The more you use foro branding the more you move the content below the fold. Are you creating a piece of art, or an website to sell something?

  • Thanks That really helped. I haven’t created websites in awhile, and this article really helped me figure out what is essential for the site I’m designing.

    Thanks.