Search engine optimisation is a huge part of what makes a website successful. As a web designer you have to walk a fine line between making the best looking site, but you also want people to visit that site. A website’s content producers do a lot of the SEO work, but it is the designer’s job to arrange that content and site structure in such a way that is optimised for both the visitor and for search engines. SEO benefits your clients, but it also benefits you; the higher up a website ranks, the most exposure you get and the happier your client will be.
Often, you find that a website may look great, but as a result of putting appearance first the designer has made it quite hard to optimise the page content. This can create a chicken or egg situation for the designer; do they want to make a website that’s going to appear high on search results, or do they want to make something that is going to appeal to the user once they land on it? UX is if course a very important aspect to design, whether we’re talking front or back end and there are ways to get around this problem however, beginning with web fonts.
Web fonts are an essential tool for the designer wanting to improve SEO on their own or a client’s website. The concept behind them is simple enough; search engines scan through the text of a website to determine how relevant they are to a certain set of criteria. It is therefore in your interest to have plenty of copy on your website to enhance SEO. However, if some of that copy is included in the web design as an image file rather than as text, then the benefit of that text is lost.
You want these words to appear to search engines
By harnessing web fonts alongside HTML and CSS, the savvy designer can create beautiful ‘live text’ graphics for a website, which can also be read by search engines, resulting in improved SEO for the website without compromising design. You can also mark these graphics with H1 tags and similar and the search engine will read them as if they’re text. There’s also the added bonus that any changes to the appearance of the website can be performed rapidly without having to open any other programs.
Your code is part of the design
Readable HTML is crawl-able HTML, so make sure that any code that you write for a website matches the content of that site. For example, if you were designing a page about electric cars, the URL should not be randomly generated like this:
Rather, it should relate in some way to what is being said on the page:
Remembering this can make a big difference to a websites search engines results.
Optimising your design
I’ve already spoken about the two contesting elements of good website design, SEO and appearance. To create a successful website, you need to merge these two disciplines. This means creating a beautiful, easy to navigate website with a satisfying user experience that also ranks well with lots of content to crawl through.
One way of doing this is to implement mouse-over text into a website. You can create a website which looks very visual and attractive when it loads up, but that also provides you with information when you move your mouse over different areas of it. This text would be visible to the search engines and therefore give good SEO, whilst still putting the appearance of the website at the forefront of the user experience. This meets the criteria of both fields. You’re able to implement headers and long tail text for the search engines to scan, whilst still producing a website which is minimal, clean and attractive to the eye.
Another excellent way to improve user experience and SEO at the same time is to make use of expandable div elements to hide text that isn’t immediately relevant to the user. This text, because it’s embedded into the code of the site, can still be crawled by the search engines even when it’s hidden to the visitor of a site.
Expandable divs have the added benefit of not being limited in size like rollover text might be. Instead they can form drop downs with substantial amounts of useful and influential text for SEO.
You’ve probably noticed that all of these techniques involve placing SEO elements onto a website in subtle ways. This is beneficial from a design point of view because it lets you build a website that isn’t oversaturated with SEO keywords, but it’s also beneficial from a user experience point of view in that the user is much less likely to feel manipulated by the site and therefore have a much more enjoyable experience with it.
If you or your client is offering some kind of sale or offer on their website, it would be a mistake to hide that offer within an image file. Phrases like ‘Sale’ ‘20% off’ and ‘Free’ are SEO gold, but are often implemented as images. Using web fonts, HTML and CSS to make sure that these phrases are picked up can have a serious impact on a websites view count. When you’re going through the initial plans for a website, keep an eye out for anything you think would benefit a site’s SEO and be sure to make it into a live text graphic.
Consider your load times
Another benefit of using web fonts is that they are often smaller than the image files they replace. This can improve the load time of your website, but do keep in mind that if you use a lot of rollover and div elements you could end up making the site a little slower than it might have been otherwise, so keep that in mind when designing.
Of course, there are many things that can impact load times and we’ve discussed how responsive design, if not properly optimised or performed taking the ‘mobile first’ approach can slow sites.
Another important aspect to SEO when it comes to design is the site structure. This should follow a logical pattern and it’s also very useful to generate an xml sitemap for search engines, as well as a textual, linked sitemap for users. Navigation should also be logical and easy for the user to find their way around; confusing navigation makes for a high bounce rate, as visitors soon become frustrated if they can’t find their way around it.
Little work, massive impact
Keep these concepts in mind when designing for clients and you should see immediate results, both in the appearance of your website and client satisfaction. These are just the first things you can begin to do. Once you’ve mastered web fonts we recommend you begin to explore XML site maps, PPC-only landing pages and paginated articles. All of these, as well as what we’ve covered in this article, should get your designs flying high in the world of SEO.