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.
Keyword Research
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.
- The amount of JavaScript in the code – this can be really slow depending on what you are using it for so I’d advise using it sparsely.
- 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).
Website Images
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.
Keyword Placement
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
- Navigation
- Breadcrumb trails
- H1, H2 and H3 tags
- Bullet points
- Alt text
- Title attribute on links
- The main website copy
- Internal links
- Footer links
- URL’s
- 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:
https://www.websiteshop.com/products/item1?=20193
A better example for a friendly URL would be:
https://www.websiteshop.com/formula-one/clothing/ferrari-tshirts
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
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:
- XML
- ROR (aka RSS Feed)
- URL List
- HTML
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 (https://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.
301 Redirects
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.
Final note…
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.
Hi Dave,
thank you for this comprehensive article about SEO. I worked a lot on improving my site load time recently, not only to improve SEO but simply to improve user experience. Besides the usual stuff (less http requests, caching etc.), I am also using Cloudflare as CDN. Overall, I am happy with the improvements. However, I noticed (via using YSlow and Page Speed) that most of the time it takes to load the page is not attributed to loading files or images, but simply “wait time”. I do not understand what that means though. Once I enter the URL in the browser, there is a significant delay (above 1 second usually), where nothing seems to happen. Afterwards, the usual sequence of events appears (html file, images, css, JS etc.). Would you know where this initial wait time comes from?
Thanks, cheers,
Steffen
“The amount of Java in the code – this can be really slow depending on what you are using it for so I’d advise using it sparsely”
Java? Do you mean Javascript? C’mon, really, a mistake like that by someone with “10 years experience”?
A bit nit picky don’t you think?
Thanks for the comment Marco, yes I meant to say Javascript, excuse the error, it was a late night and I was fuelled rocket powered coffee when I wrote this.
Hi,
THese are good basics. Thnx
You meant Javascript instead of Java I guess?
Your welcome, I hope they help! And yes, I meant Javascript!
Thanks, as always, for your invaluable tips- I learn something new every time I visit (today, it was Google Webfonts).
Nice article .. its really helpful thankx
“Designing an SEO Friendly Website” that’s surely ok. But what about a user friendly website? I could see that very often there is a problem to combine usability and SEO. Is taking care of SEO realy enough to have a great audience? I’m affraid not. Even a site that is on the first position in Google can be unprofitable because of it poor usability. When u’re thinking of a website u should remember to put a high quality content insite. SEO friendliness for me is on the second place.
Hi Manifo. Couldn’t agree more, user experience and conversion rate optimisation are important factors with need to be coupled with SEO. And as I mentioned in the post, focusing your efforts at the user and accessibility are crucial.
Usability is great, but this post was about SEO. And nowhere does the author say you should implement SEO at the expense of usability.
In fact, if you do it right, SEO and human usability go hand in hand. Short load times, alt tags on images, friendly URLs… These are all things that benefit visitors.
I agree with Pragmatic – great tips – I also had no clue about Google webfonts. Cheers Davey!
@Pragmatic and @Carly, glad to help and Google Fonts is a super tool.
Good post, with regards to flash navigation you can provide a fallback for search engines to pick up on. Slightly surprised at the boost you can get from just having better page speed.
Coming from a print design background and trying to learn by doing on your own can be so overwhelming and intimidating. Thank you for such great information and also for making it so clear, concise and understandable. Your articles help me really understand this stuff and make me a better web designer, even if only for my own website. Thank you.
“The amount of Java in the code”
Uh, really?
2 things: (1) It’s called JavaSCRIPT, not Java – if you don’t know the difference, you probably are not qualified to be writing this post; and (2) I don’t believe that search spiders actually render anything on the page (i.e. javascript, images, flash, layout, etc) so rendering time shouldn’t affect SEO in any way. Only the time it takes to load the page source, not render it.
Hi dt, see my comments above about the Java typo – apologies on that. In terms of website speed, check out this video from WebProNews from 3 minutes onwards – https://videos.webpronews.com/2009/11/13/matt-cutts-interview/
Great sum-up, thanks!
Great article that covers all of the basics. I’m a firm believer that SEO isn’t rocket science – it’s all in the execution – the problem is that 75% of websites out there don’t bother with it.
Fantastic article. I too believe W3C validation will come into play sometime in the future. Search engines will likely want to prioritize websites that deliver their content to the user and their spiders more efficiently.
Well done Dave – I’m going to forward this to a client who is challenging me on the value of page load speed. I too have found that the page load score has an effect on SEO especially on new sites with little or no PageRank. Google now has a on-line tool for testing https://pagespeed.googlelabs.com/#
Also, I agree strongly with the W3C validation prediction.
In “Keyword Placement” you list “Meta description and keywords”
Just for the record, search engines like google ignore the “meta keywords” tag.
https://www.mattcutts.com/blog/keywords-meta-tag-in-web-search/
Thanks for all of the great feedback and comments – and apologies again “I meant Javascript” 🙂
There are a whole host of negative comments in these replies that prompt me to leave a reply of my own, something which I never normally do.
Where to begin?
@dt – Firstly, could it possibly be a typo, a spellcheck error, a wrong amend by whomever the article was submitted to at webdesignledger.com? Who knows. But to cast aspersions on an author over such a thing is absolutely preposterous. ‘Not qualified to be writing this post’ – it sounds like you have a chip on your shoulder. I have never met Mr Cain, but I know of his sound reputation in the SEO industry in the UK. This is why I laughed at your ridiculous ‘not qualified’ comment.
Secondly, I can understand your view of loading times not effecting SEO results, but after working in this field myself, I can tell you that the actual loading time of a page in a browser is considered by search engines. It makes perfect sense, as this is deemed ‘too slow’, ‘time consuming’, ‘bad service’ for the user. Again from experience, it is a factor.
@manifo – Ah in a perfect world it would all be about great content. But hold on, it is, if done correctly. You may have experience of people keyword stuffing, thus rendering a site’s copy poor to read with no flow at all. Good relevant copy using carefully selected keywords is achievable.
Overall this post achieves it’s goal. It is a great introduction to SEO and provides a good base for finding out more. Thanks for writing it Dave. Look forward to more.
In terms of Flash for navigation…Google has been able to read Flash for some time now. That said, Flash is still terrible for navigation for a number of reasons, among them: other search engines can’t parse Flash, screen readers usually can’t use it, a lot of people disable it now, iPhone users can’t use it. Still amazing how many XHTML sites I see where the only Flash is in the worst possible place: the navigation. Flash has it’s place, but I think nav is probably the worst place to stick it if you’re trying to be selective about it.
Great list here though. Makes for a nice checklist.
This is a great article, this will really help to have a wide understanding about SEO, Keyword research, web fonts, and other different topics that this article has. Thank you for this nice post.
Great tips given, though there are some which I have heard for the first time but thanks for sharing the knowledge.
“URLs”, not “URL’s”
#corrections
Hi Dave,
Good article, but you might want to be careful about the Friendly URL section. What you say actually contradicts Google’s own advice:
https://googlewebmastercentral.blogspot.com/2008/09/dynamic-urls-vs-static-urls.html
That’s not to say you shouldn’t use Friendly URLs – you just need to be aware of potential SEO pitfalls. The benefit of Friendly URLs is to the user, and you need to think about them first.
I wrote an article about this recently here:
https://www.melrosesolutions.com/blog/index.cfm/2011/3/30/URL-Rewriting-BestPractice
Some great tips there, I definitely agree with tip two and the use of flash, I think flash is great for small animations but not navigation or full designs (unless your Nike, Adidas etc…) Nice article =)
Some of the SEO’s that I follow are suggesting to self host the web fonts from Google as they’ve seen a slow down to sites when they are hosted by Google. I use Google’s web fonts already but I’m contemplating switching to hosting them myself. Haven’t had the time yet to make the switch but I’m starting to think it’s worth it.
Great article!
Nice tutorials. I, just have a single complain, why people don’t think about other search engines like Bing, or Yahoo! while writing SEO related articles. I know that searches from Bing, and other search engines are very less, but still can’t be ignored. Why Google is always favored?
Well, as you say, Google still has the vast majority of the market share. Also Yahoo and Bing try so hard to copy Google’s algorithm that when you optimize your site for Google, all the others usually seem to fall into place.
Almost every article I see on SEO mentions putting keywords in the meta keywords tag. This article specifically mentions doing it for the benefit of Google, but google stopped recognizing meta keywords since September of 2009.
Some great tips here, unsure about the relevance of Google fonts though. Not sure how that could improve SEO over other alternatives.
Google does not care about META KEYWORDS at all.
(Other search engines do perhaps.)
That was mentioned clearly by Matt Cutts.
@Marco & Phil; Seriously guys? You sat down, took the time to read the article — which is informative to newbies and a good refresh-course to vets — and your only response is to grill the author on typos? You kids need a hobby!
Dave, brilliant tips, thanks! I’m learning a bunch on your site and enjoying the challenge to step up my game to keep current in a quickly changing industry. Keep it up… typos and all!
Good Post. Some great tips here… Thanks for sharing…!!!
I totally agree with these tips and I think that more web developers should focus on things like this when building themes. SEO is a major part of web design, I think anyway.
I agree with the comment made by Jordan; this is a great article. I’ve been a full time SEO since 2001. The basics hardly ever change! The only things I would add in the keyword placement section, would be to ‘highlight’ your page’s target keyword in bold, italic and underline once in the text of the page. Had you of got those three, you basically had most of the tips from a SEO ebook that’s retailing at the moment at around $19.99! As usual, I imagine those who’ve been moaning about typos will be in the 90% of people who actually won’t be using any of your advice in ‘anger’, so won’t get to see any results in the SERPs!
Useful post! Great resource here. i appreciate it. Thanks for sharing. It has included most important onpage SEO elements for web design.