30 Web Design SEO Tips for Web Masters
SEO and Web Design- How well they get along ?
Sometimes, I don’t get along really well with web designers – for the good that is. We contradict more than agreeing on ideas in design concepts, UI, layout planning etc. Designers are very adamant people and they’re really very possessive about their work. We SEO’s are perceived to be people who downgrade their work, and thieves who steal their credits – and it’s true.
Sometimes we really do. After all that hard work with pixels, one fine a day an SEO jumps in, does his “magic tweaks” and the CEO is very happy for the SEO. Yeah just the SEO. So I think designers have all the rights to envy us haha 
Anyways, in my opinion the best web designers are the ones who also take into consideration the SEO concepts while they design. It’s not difficult, and if you do that in first place right from the scratch, no SEO is going to rip off your design later. 
So here goes my 101 SEO tips to Web Designers
Tip No. 1
- Study and read everything possible about advanced SEO techniques right from the start of your project.
Tip No. 2
- Always keep in mind that designs are cool, but what is equally important is the code that goes behind it.
Tip No. 3
- Always keep the code optimized, check for W3C compliance right from the start.
Tip No. 4
- Follow the basics, titles, meta tags are still important if not ignored, so keep space for them.
Tip No. 5
- Keep a horizontal directory structure, don’t go too deep with them, the search engines likes easy access to any file in the quickest time.
Tip No. 6
- When you name the files and directories, keep it descriptive and simple. Keep away numbers and weird characters.
Tip No. 7
- Images better be optimized for size, and quick loading. If you can’t keep away from loading that fancy graphic, mix it with the page elements. Don’t make them look blunt.
Tip No. 8
- Make room for a lot of text. As you already know, search engines love text, lot of them.
Tip No. 9
- Flash files are cool. And Search engines have found better ways to crawl and index them unlike old times, but that doesn’t mean you can use them extensively blocking access to relevant text info. So if you are keen on using flash, keep alternate text versions ready.
Tip No. 10
- If you have dynamic content, make sure you keep it simple and split to parts. Also, make sure you have optimized static pages for your primary keywords.
Tip No. 11
- Always do a bit of competition analysis. See what your competition is, if they have a minimalistic design you don’t want to have a flash design, and leaving no room for improvement. Stalk your competition.
Tip No. 12
- Many web designers make the mistake of using a template through out the site and many a times this includes repeating the same title or similar page titles all over the site. Get over this, use descriptive page titles everywhere possible.
Tip No. 13
- Keep the page titles to 65 characters or less in count. Nothing wrong is going over it, but you could avoid a spill over.
Tip No. 14
- The meta descriptions are supposed to be mini ad-copies that should be descriptive of what the page is about. Don’t keep them the same for all pages.
Tip No. 15
- Keep the JavaScript away from navigation menu. Navigation menu is a good resource for gathering information about what your site is about, and using javascript can make it less crawlable by the engines.
Tip No. 16
- Use CSS based navigation if you want fancy effects. Pretty much all of the javasript stuff can be done on CSS, in a more search engines friendly way.
Tip No. 17
- Use the header tags effectively. Don’t limit yourself with H1 and H2. Use H3, H4 and beyond and use it wisely on the page.
Tip No. 18
- Use strong tags wisely. Don’t let them stand out like bolded text, within the content, style it down to show up as normal text within the content.
Tip No. 19
- Use the footer effectively. Of course, you can use it for all your TOS/Legal stuff, but also use it to link to the important pages on your site. It helps.
Tip No. 20
- Identify the most important pages on your site as seen by the search engines, and leverage them to promote other resource pages.
Tip No. 21
- Link well internally, and use descriptive anchor text instead of “click here” and “check this out” like phrases.
Tip No. 22
- Use al tags, Title tags on images and use descriptive filenames. They help search engines find more information about them.
Tip No. 23
- Use a SEO friendly layout, at least one that does not block or hinder the crawling of crucial areas on your site.
Tip No. 24
- Find out the important areas on your website, like the content rich area in the center and keep them above the fold. Not only helps the engines but the user as well.
Tip No. 25
- When designing dynamic pages, try to stick to pages with descriptive URLs and not the one with session ids and other parameters. Google can still get it’s head around them, but its good if you can stick to SE friendly, descriptive ones.
Tip No. 26
- When dealing with CMS’s there might be instances where you have to keep the page URL the default way with the extra parameters. Use URL rewrite mod to re write the most important pages URL’s to SE friendly form.
Tip No. 27
- When using AJAX, load the modules in parts split across pages and not in one single page. Although this defeats the purpose of using AJAX in the first place, you might be able to provide more information to the search engines using other on site SEO parameters.
Tip No. 28
- If you want to block any particular area on your site from the reach of Google spiders, use either Robots.txt commands, or else set up a login access. This is the safest way to block crawlers from spidering vital information.
Tip No. 29
- Keep the meta descriptions descriptive and precise to about 150 characters.
Tip No.30
- Use an SEO simulator to test your design through out the process. And make sure no part of the design blocks/hinders any part of information being accessible to the search engines.
So essentially, web designers got to ensure that while their designs are unique and eye-catchy, making sure that there is enough information available in the form of text is always recommended, and leveraging this information by using all the possible SEO metrics in a healthy and balanced way to cater to the search engines is the right way of designing a search engine friendly web design.
Having said that, please remember that there is no right and wrong way of doing things. You got to understand your requirements, your resources and make a tailor made strategy that works for your niche. And that’s what is really important.
Great post, Mani!
Good pointers
Well summarized. Nice list for future reference.
How does javascript hurt seo? “using javascript can make it less crawlable by the engines” This is simply not true since modern javascript libraries like jquery and mootools rely on css classes to apply effects. With or without the js active, the navigation would look exactly the same to a crawler.
Josh, agreed, I shoudl’ve clarified. Using JS on navigation menus, or critical areas like it can slow down or completely block those part of information nfrom crawlers. you can try it with any site crawler testing tool. using JS on sites are fine so long as they don’t hinder information form being accesed by search engines.
Good Point, thanks for clarifying.
Great tips money. A couple of other things I would expect is the relevant usage of the meta tags built in (e.g. Robots) instead of having to use a plugin for that.
And extending #25 and #26, one needs to make sure that the URL portion that immediately follows the domain name is something descriptive and keyword enriched. It shouldn’t be a number or GUID etc.
Yeah.. these are exhaustive and useful tips for seo while at the design phase. I already follow some of these where I have direct control in my blog.
Nice lists, I’ve already used some tips here, now it’s time to apply some new tips. Thank you.
Great post!
Hi,
Interesting post, Good tips.
Its always best to keep the navigation part neat and simple rather than using complex codes into it. Basic HTML nav should be good enough.
Cheers,
Eddie Gear
Well, this is pretty great stuff. I am certainly getting a lot out of it.
However, I want to mention something…
In my experience working with a variety of designers of different calibers… the really great ones don’t have enough time to spend familiarizing themselves with “everything advanced SEO” — this is just asking a bit too much from a designer.
A designer needs to be concerned with usability and making the site as appealing to the viewer as possible.
Their time is much better spent studying everything “advanced design” at the start of their project.
If they are ALSO expected to be studying the vast array of SEO knowledge out there… wow. I mean, speed of implementation is out the door.
What you are discussing here really should be handled by a “project manager” — someone to work between designer and SEO specialist.
A manager should lead the designer in a myriad of ways, including NAMING directories and whatnot. The manager should make the design decisions to compliment what is needed for SEO.
I own a design business and I play manager to all of this, over-seeing the entire process. I lead the entire project and would never trust a designer to have to know these things.
Another added benefit of a manager is they typically move things along a bit faster… well, a good one does, at least.
My projects move along pretty swiftly orchestrating it this way.
All-in-all this list is great for those who don’t have the luxury of a manager. Again, I got A LOT out of it and will be passing it on to partners and associates.
Thanks
Erin
Good thoughts there Erin. I agree, it works best when the SEO/SEO’s and the Design team work in sync. A project lay out with time frame and metrics defined will even more smoothen the process, and a project manager to manage the entire process is definitely “the” way to get things done on time. Its also important that the manager knows a bit of both sides.
The basic idea is that if web design team and seo work together, there are alwasys better results.
This is the second blog I have read on this topic.I am floored I never read this before. Thank for sharing.
hi..
Well That’s a pretty good list.
I follow most of them, but cane to know more of them through this list, surely would follow them.
In all great post.
Thanks..
Very Nice tips for seo based web designer. Is java script menu makes slow the web crawling rate? what’s the alternative, only css menu?
Nice points, thanks mani.
Great points Mani. It really helps to keep these in mind in the beginning rather than handing the design off to an SEO afterwards. It saves a lot of time and mess. And usability has no value until the site can be found to be used.
I can’t agree with you more, Stephan! You have to do this from the beginning, as trying to patch a site afterwards can be quite an exercise!
This post really serves to highlight the fact that you have to ensure your design meets with the necessary criteria for the search engine spiders to “see” your content. What they can’t see, the search engines can not offer to the world! W3C standards are good to adhere to.
Hey Mani,
thanks for these nice tips.
You haven’t talked about Ajax, I have used lot Ajax on my site. How does it effect SEO.
And also I have seen many sites which tops on Google uses lot of Meta tags. Normally used are only “description”, “keywords”, but there are other like “classification”, “abstract” etc. Does these also help in SEO.
thanks
Hi, Thanks for the SEO tips, I learnt many new things reading your SEO tips list.
Nice points, thanks mani
As a designer and SEO expert I like to read your post as it states the need of good design interms of SEO.
Great article – I’ve just started getting into SEO and intend to offer my clients better google ranking etc.
I’ve always designed my sites to the best specs and checked the markup and w3c ( and the css).
the tips you give above will make a good checklist for me to use going forward. Thank you
regarding the tip 27, i dont see it right. this is because when we talk about the link age from external page to internal page, google seo is always represent a very serious, and remarkable effort to deal with this.
by the way, this is the best seo article i seen before, except 27
Very nice info mani..Thanks
Nice post dude.. It would help designers to Keep in mind SEO factors while designing. Good learning for all.
great post man..
This post is quite useful
I just wonder if joomla is more seo kindly than other?
Personal experience on the SEO-Webdesigner conflict. I am one of the lucky persons having done a lot of web design before going for 2 years in expert SEO consulting before getting back in web design.
When getting back in this I understood the SEO implications and I started web designing sites with an SEO oriented objective. It actually worked out very well. My way of using and integrating CSS also changed in that sense.
It is a great experience and a really useful eye-opener.
Hi! Great summary!
But I have a few objections…
Tip 3
http://www.Seomoz.org “Expert opinion survey” acutally came to the conclusion that W3C compliance is NOT that important…
TIp 28
also add “nofollow” and “noindex” – sufficient in many cases
great list thank you
Thanks mani for goor points
Mani excellent points!
Thanks Mani for these tips. I really like this summery and facts regarding SEO friendly web design. Great work and keep it up dear!
Great blog. Clean and full of awesome SEO information. I will be back and have added you onto my feed.
A pleasure…
Thank you.
nice post, all tips are search engine friendly as well as user friendly. good job.
Great tips !!!
Thanks for a really good and well written articles.
Thanks for sharing these useful tips!
Great selection of Websites, some really nice designs! I’m currently working on a new website. You really helped me out here. thx
Some great tips here – it’s important that we all bear these things in mind when designing websites far too many web design agencies don’t and we have to repair the damage
Very clear and concise tips Mani.
Regards,
Karl
Really good and simple tips. You do have to put the work in though, but the rewards are worth it.
Thanks,
David.
Great man, it will help my future works, thanks
Mani Karthik ,
Great effort ! I have noted 30 SEO Tips for web design,
But there is question about W3C and flash work as well,
Biggest Website SEOMOZ said W3C is not important,
I heard Google do not read the flash file so how we can use it without hurting our website
performance in Google?
Wow – I’m not sure you’ve missed anything from that list, but in our experience the interplay between web designer and SEO marketer is often a carefully drawn line.
It’s getting a lot better in recent times, as the web is such a vastly commercial place that every web company has had it drummed into them that the process of building a website has to focus on the likely returns for the client. Once upon a time the web designer didn’t really care too much, but now they have to think about SEO friendliness and Google crawling or risk losing their clients very quickly to a better, more marketing-savvy organisation.
Thanks for sharing these tips! I’m always looking for ways to optimize my websites.
I use the Firefox Web Developer tool bar for this, which is very useful for quickly checking new pages and CSS. It’s a great idea to bring designers into the SEO equation.
Thanks for these tips! I’ll be sure to use them in my future webdesign projects.
Thanks for sharing the such nice tips for beginner who learning SEO.
Yeah.. these are exhaustive and useful tips for seo while at the design phase. I already follow some of these where I have direct control in my blog.
These are really awesome tips for Web Designer and Beginner SEO as well
Congratulation! Nice put to gather.
30 tips, wow this could take me a while to get through! Top tip from me? Use css as much as possible
Hii,
Great Post. Thank you for sharing these tips.