Designing an SEO Friendly Website
Nearly every business from local plumbers, large blue-chip organizations and even churches have websites, and each and every one wants to spread the message about their products, services and profiles, and what they can offer you as a consumer. That is where SEO comes in. SEO has become a valuable online marketing tool for businesses of all shapes and sizes, but for an SEO campaign to be successful, solid foundations need to be in place. Doing things right from the offset can really reap the benefits, save time and money.
Below are my top tips for designing an SEO friendly website from the ground up. These cover the little things that need to be done (or avoided) from the offset, so a website can eventually live a happy life at the top of the search engines.
Before I even start a website design/build, I establish what the business objectives are. Many businesses will have a clear plan of what they want to achieve in terms of targeting. This may range from targeting the local area, national area or even global.
With this in mind, when designing wire frames, deciding on customer journeys and sitemaps, you can start to build, in addition, pages for content that target these specific keywords based on your findings, or at least have a plan of where these pages may go down the line once the site has launched.
From a design perspective, there is nothing worse than going back to a website six months later and having to change the structure and internal elements for additional content that may be used for SEO purposes. So my advice would be to plan early.
Search Engine Friendly Navigation
Now when I say search engine friendly, I mean a navigational system that the search engines can read and follow. One of the many factors of on-page SEO is the internal linking structure and the navigational system is the backbone for this. Having buttons and links which are text-based is a major plus and great for accessibility.
In my opinion, I would always avoid flash based navigational systems for one simple reason; Google along with the other search engines can’t read text on images. The other thing to consider with this is, as the web moves more and more to mobile devices how many of these will support flash? Apple has already said they won’t support flash elements and even my Blackberry doesn’t do a great job of flash websites. Please don’t think I’m not a lover of flash, because I do like the concept, but from an SEO point-of-view it can be a big barrier, especially with navigations.
Instead of flash, why not use CSS methods or jQuery? These can be just as good if not better, but make sure the load times for these elements are fast.
Also with navigational systems, it’s important to clearly label the links. If a link says "about", it should take the user (and the search engines) to the “about” page. As mentioned above, your internal link structure needs to be good, if not bullet-proof! Another example would be, if you have a page about "restaurants in London", label any links that go to this page from the navigation or other internal links with the anchor text "restaurants in London". Make it clear and descriptive for the search engines, thus adding that little extra internal link juice from a SEO perspective.
Website Load Times
Every so often a big update is done to the search engine algorithms. Normally the news is about Google and a SEO factor that was introduced early 2010 was website load times/speed. I experimented with this and found by speeding up a site in terms of various elements, did have an affect, so much so that a website I experimented on moved up 3 places in Google.
Now when I say various elements, I mean things like:
- CSS files – remove unwanted/unused code or place all the code on one line per div/class.
- Website image size – see point 4.
- File size – remove white spaces and any unessential line breaks in code, keep it streamlined.
Making improvements on the above, will increase speed and generally help with the SEO (not forgetting the user experience).
As a golden rule, a website has eight seconds to sell the company and/or products and there is nothing worse than waiting for a website to load, especially large images and backgrounds. As mentioned above, website load time is a factor and the two best tools I have used to reduce image file sizes are Adobe Photoshop and Adobe Fireworks – admittedly Fireworks did the slightly better job, even though it was only a few kilobytes.
Also if the website is an e-commerce site, create smaller images for the galleries. There is nothing worse than waiting for an image to load that is only 200px x 200px on screen that has been re-sized using HTML code – remember speed is now a key factor with SEO and can’t be avoided.
So, one of the major factors of SEO is telling Google what the page is about. This is done by writing great “user-focused” content. Within this content it’s important to get the keywords in the right position on the page. Here are the best places:
- Title tag
- Meta description and keywords
- Website slogans
- Breadcrumb trails
- H1, H2 and H3 tags
- Bullet points
- Alt text
- Title attribute on links
- The main website copy
- Internal links
- Footer links
- File / folder names
One thing to remember with the above is, don’t over-do it. Google has become heavily focused on the user so make sure the content is focused at the user; it will also become link-worthy content.
Add Social Elements
2011 has had a shift in terms of SEO; social is now a contributing factor. Not only is social a good way to demonstrate to potential customers that the company has a voice but social networks like Twitter helps towards good rankings.
It’s crucial with the design of the website that social elements are added in on 2 different levels.
- Make it clear that the company is available and contactable on social networks with prominent buttons and icons
- Adding the Twitter feed on site can also help with keyword placement, regular updates (you must be a daily user of Twitter) and can also speed up the Google cache rate (i.e. the amount of times Google visits the website and checks for updates).
Friendly URL’s and image filenames
One major thing I have noticed over the past few years is the number of websites that don’t contain friendly URL’s, so an example may be:
A better example for a friendly URL would be:
As you can see from the two examples, the second option has a good selection of keywords, this will help Google and the other search engines identify what the page is about and having keywords in the URLs is a good SEO method for keyword placement, as mentioned above.
In terms of images, also having an appropriate file name is vital. An example would be women that are looking for a wedding dress – they will more than likely go to Google images to find design ideas. Having an image named "img310.jpg" isn’t going to help with the Google image algorithm. So a better idea would be to have a file name "wedding-dress.jpg" for example.
Sitemaps are purely designed to tell the search engines about all of the content on the website. This will ensure that the search engine bots find all of the content that may be 2 or 3 folders deep within the website so this content has a good shot at ranking for specific keywords and phrases.
One thing I have noticed with large e-commerce websites without sitemaps is the lack of pages that are indexed in Google. A great example would be an e-commerce site I worked on recently that had a catalogue of over 2,000 products. After conducting research on this, I found that only 500 pages had been indexed in Google. With the introduction of sitemaps, their indexed pages had gone up to 1,500 in 3 weeks – this also increased their exposure in Google. They then started to gain more long tail keyword searches and overall conversions increased off the back of this.
In terms of sitemaps I always recommend to use 4 different sitemaps:
- ROR (aka RSS Feed)
- URL List
This give the search engines a variety of choice when it comes to locating all of the pages on site. Another thing to mention would be to include links to all 4 sitemaps on every page of the website (usually in the footer) to help the search engines further, especially with buried content which could be 2 or 3 levels (folders) deep.
Google Web Fonts
Creating visually interesting designs usually consists of using unfriendly web fonts. Creating text elements with an attractive font normally consists of using images as a work around. As mentioned in this post, Google and the other search engines can’t read text which is an image, which in turn could cost you really good real-estate with keyword placement on-page.
Back at the beginning of last year Google opened up a new Font Directory (http://www.google.com/webfonts). So instead of using images for text, you now have a large collection of open source fonts to use on the web completely free!
So in a nutshell, you can keep those super attractive designs with a readable web font, which in turn results in the search engines being able to read the text and use this as a ranking factor.
Now I’m sure as a designer you have come across the re-design scenario. So, you have finished the design and launched the new website and then all of a sudden, rankings drop!
A great way to combat this, especially if you have restructured the website with new file names or moved content is to use 301 redirects in the .htaccess file.
This does 3 things:
- Tells the search engines that the page has moved to a new location and needs re-indexing
- Tells the search engines the page has been renamed and needs re-indexing
- Any links that were pointing to the old page will now flow through to the new page via the redirect. As links are an imperative part of SEO, you can’t afford to loose these valuable links, thus retaining good rankings.
Prediction: W3C Validation
Over the past 18 months I have blogged about validated websites don’t have an impact on search results. With Google updates such as "caffeine" and "panda" which focus on search quality and user experience, I believe this may become a factor in the future – so I believe its important to look at this area sooner rather than later.
The above points are certainly a must, but one thing to remember especially with search engine optimisation is that continuous work is required to gain great results.
The above gives you the basics and a fantastic starting block for a successful SEO campaign.