The FourSquare Innovations Guide to Web Design Principles for Search Engine Friendly Websites. This document explains some of the drawbacks, shortcomings and 'gotchas' that we see almost every day on web sites that have already been designed and gone live. The information provided here is intended to help web designers plan and deploy search engine friendly websites from the start of a design or development project with minimum reverse engineering required when SEO work is later undertaken. The FourSquare Innovations Guide to Web Design Principles for Search Engine Friendly Websites. 1 Web Page Architecture and SEO 2 Code/ Content Ratio 2 Navigation 3 Inbound / Outbound link ratio 4 Hidden Text 4 Images 5 Frames 5 Meta Data 5 Converting Customers 5 Content Management Systems 6 1
Checklist of basic principles for SEO friendly web design - Web Page Architecture and SEO 1) If possible stick with pure CSS, as this is the most code efficient design option. 2) Appropriate semantic mark-up should be used for textual content (i.e. H2 for subheadings and P for paragraphs). Paragraphs of text should not just be nested in tables, in div tags or in span tags. There should be only one heading 1 tag on each page and this should contain a keyword rich slogan of no more than 10-12 words. This is important because search engines need to understand the semantics of the content on the web page in order to assign relevance accurately to each piece of information on the page. 3) Lists should always use an appropriate list tag (OL, UL etc). Lists that don't use the right mark-up can look spammy to search engines. 4) Fixed height websites: These are a really bad idea since it makes it very difficult to add content to a webpage without ruining the layout. Being able to update and add to content is essential to every business as it grows and fixed height websites hinder this. Moreover, search engines are looking for the most authoritative source of information on any given subject and if the layout of a web page prevents more content being added then it will be harder for the website to adapt and compete in a dynamic, fast-changing and competitive marketplace. 5) php /asp includes - these are often very useful and can be good for SEO purposes. However, they should never be used to handle information that needs to be unique on every page, such as meta data, title tag and important headings and content. Misuse can result in an SEO consultant needing to undertake a significant amount of re-architecturing. Code/ Content Ratio It is important not to leave the search engine spiders with more code to wade through than they have to. They will like a website much better and also be able to navigate around it more efficiently if you keep extraneous code to a bare minimum. Search engines also prefer websites with faster download times, so the less code the better for a lean, efficient result. 1) Wherever possible CSS should be in an external.css file 2) JavaScript. Do not leave dozens of lines of JavaScript nested within html pages. Put them in an external.js file. 2
3) Avoid nested tables for controlling the layout of a page if possible. Navigation The goal here is to encourage search engine spiders to spend as much time traversing links on the website as possible, whilst making it as easy for them as possible. 1) Ideally you should be able to navigate from any page of the website to any other page of the website. If this is not possible then, no web page should be more than two clicks away from the home page and every page should have plenty of navigation options within it, both in navigation menus and through linked in key phrases within the content. 2) Navigation menus should be scaleable. For instance, just providing space for horizontal navigation menus does not provide space for growth unless they use drop downs or are complemented by scaleable vertical link menus. It is crucial that the website should be able to scale up in line with a growing business, and the website design needs to allow potential for this, whether content managed or otherwise. 3) Never use JavaScript for hyperlinks. Some search engines will ignore these for fear of getting stuck in an infinite loop. 4) Where there are dropdown menus these should use a CSS solution. 5) Dead-end links - do not use dead-end links (i.e. web pages that don't link back to other pages on the website and which aren t fully integrated within the navigation. These cause bottlenecks which prevent link juice circulating efficiently around the website. 6) Use full URLs in hyperlinks. There is some disagreement as to whether Yahoo likes this strategy as much as some people claim, but there's no harm in using full URLs in hyperlinks and it does have other advantages. It also protects against scraper sites, and content thieves and can make for much more effective syndication through RSS. A full URL in your content that appears elsewhere on the web means a) that the link effectively tells the search engines that your website is the authoritative, original source of the information regardless of whoever else is using it b) it provides free links back to your website. So always use <a href="http://www.mywebsite/apage.html">some text</a> rather than 3
<a href="apage.html">some text</a> Inbound / Outbound link ratio Ideally here, we are aiming for as many internal links and as few outbound links as possible on any web page which has the potential to generate targeted traffic to the website. We would recommend 50 internal links to every 3 outbound links as a rough guideline. Web designers should not be greedy when taking credit for their work. One link from each page of the website back to your own will suffice. An SEO company is also going to want to take credit for their work so that s already two of the three outbound links accounted for. 1) Nofollow and link sculpting. It is a common misconception that link sculpting works. For instance, as a simple example: if I have 10 outbound links on a webpage, and add the nofollow attribute to 7 of them then the remaining 3 will get all the link juice. This is simply not true, Google has engineered it so that the link juice from the nofollowed 7 links is simply forfeited and the remaining 3 still only get 1/10th each. If you want to channel more juice to outbound links simply use less of them rather than link sculpting using the nofollow attribute. 2) Credibility through outbound links. Google will also give you some credit for linking out to recognised sources of authority. This could be references with hyperlinks to national newspapers, academic or government websites to name just a few. If you have a chance to reference something back to such a source, then this is one instance in which a few extra outbound links could be to your advantage. Don t forget, an awful lot of Google employees have PhDs, they are academics who value highly the importance of referencing and researching thoroughly. Hidden Text Whilst the vast majority of web designers understand that hidden text is a bad thing, a significant number still have a tendency to use methods which might be considered borderline and in our experience search engines are sensitive to these. The two main offenders are 1) The H1 tag should not be hidden behind an image or logo. This is a waste of an H1 tag, especially when there is no textual content inside it, and when it does contain text then it is hidden text whether it was done intentionally or otherwise. 4
2) Text colour: Many websites will have copyright and company information at the bottom of the page in a light shade of grey so that it does not distract attention too much from the main content. This is fine; however, judgement should always be used to ensure that the text is sufficiently visible, so that it doesn't look like borderline hidden text. If in doubt, increase the font by a pixel or two and darken the shade a little. Images 1) Fill in the alt attribute in every instance. This is not just a matter of using keywords. Google hates missing alt attributes, always has done and always will do. 2) Keep the KB weight of images down to a minimum, so that web pages download as quickly as possible. This has always been important to Google. 3) Flash gateway pages and home pages. Unless you are a wellestablished brand that doesn t depend on fresh traffic to your website in order to generate new business, then Flash gateway pages and home pages are suicide and should not be used under any circumstances ever. Frames There is no reason in 2011 why any website should ever use frames. If you need to use the frames architecture for any part of a web page, then look at using the iframe tag but remember that any content within the iframe will not be seen by a search engine spider as physically belonging to that web page, and that the content will effectively be sat on a page that is a dead-end link. Meta Data This will usually be handled by an SEO consultant or SEO guy, but there are a few general principles to bear in mind. 1) Meta Keywords - any more than 10-12 is erring towards being spammy 2) Meta description - just copy the first two 100 characters from the first paragraph of text. Any more is erring towards spam. This one is not about keywords or keyword relevance, it s about honesty; i.e. telling the search engine spiders exactly the same thing that you tell your web site visitors. Converting Customers In the competitive online market of the twenty-first century cutting down the time between a customer finding your website and making the decision to buy is crucial. With this in mind there are a few simple things that you should always do. 5
1) Contact details. It is not enough simply to have a contact us page and / or a contact form. As minimum, every web page should have a contact email address and phone number clearly visible at the top of the page as close as possible to the eye line. 2) Shopping Carts. The number of clicks and pages needed to complete a transaction on a shopping cart should be kept to an absolute minimum so that there is less likelihood of a shopper changing their minds half way through. Content Management Systems We will not go into SEO friendly techniques for content managed websites in any depth here, but a few of the major points are considered below. The purpose of a content management system is to make up-dating a website straightforward for a non-technical administrator without them being able to damage the website. However, CMS vendors should also bear in mind that their customers are likely to want an SEO consultant to help them increase relevant traffic and that they will need sufficient control over the website in order to be able to do this most effectively. We see many content managed websites with the following drawbacks. 1) CMS inserts irrelevant words into important semantic tags (H1, H2). This might include the company name, or general words such as 'Products' or even the inane 'Welcome to our website'. 2) The architecture of the CMS hangs off the home page, resulting in the home page not being editable within the CMS. The home page is almost always the most important page on the website from an SEO point of view, and the CMS should not hinder the process of updating it or managing it. 3) CMS inserts title tags that can't be overridden. An SEO consultant always needs full control of the title tag in order to achieve the best results possible. 4) Where content is controlled globally, there should be an option where possible to override this in order to tailor individual web pages in a focussed way. Chris Boswell 6