A designer’s guide to Search Engine Optimisation

Only writers need to worry about search engine optimisation, right? As a designer, you just need to worry about making the pages look all pretty.

Nope! Your work is every bit as crucial for SEO as the writer’s is.

Picture this

Search engines can only ‘see’ words rather than images, but that doesn’t mean pictures aren’t crucial to successful SEO. You simply need to make good, descriptive use of image alt tags – search engines will read these and, the better your descriptions, the higher up the rankings your page will go.

Imagine someone was looking for information on Van Gogh’s famous painting, Sunflowers. And – hey – you run a website all about classic art…

Now, which of these alt tags do you think might return the best results?

a)      Not using a tag.

b)      <img alt=”sunflowers”>

c)      <img alt=”Vincent-Van-Gogh-Sunflowers-painted-1888”>

Well, obviously the answer is C, but a huge amount of people tend to only include the most perfunctory info in their tags, if any at all. So remember more information is the key. If you’re working in WordPress, then adding this information is a doddle, especially if you have an SEO plugin to help.

As you can see, it’s a simple matter on WordPress sites: just go to media on the left-hand menu and choose and image to edit. Here you can add captions, alter the size of the image, add descriptions and alt tags.

Alternatively, allow a caption to flash up on screen when a user hovers their mouse cursor over an image. The copy in that caption will be read by search engine bots and help you climb those rankings, as well as give the user a nice little extra information and we all know how important UX is these days.

According to WCAG 2.0 Guidelines: “All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.”

This means that providing an alternative to the standard one-worder will bring better results. Alt tags should also provide “meaningful context to the web page” so if you are working on a site for a building suppliers and was to include the above image, then you would need a very good reason such as interior design ideas which include art. Ideally though, you need to choose something that is closely related to the industry in which the client is in.

Don’t make a Splash

Although less common these days, websites with Splash pages (like this) are still popular – fancy, graphics and animation heavy portals. They look lovely, sure, and make a fantastic impression on the user. Problem is, search engines hate them – there tends to be little in the way of copy, and what there is, is often embedded into images. And they can complicate site structure leading to overly complex URLs. So as tempting as it is to really tart up your website – for the sake of your Google ranking, don’t do it.

Size matters

Bigger is better applies in many walks of life, but not in SEO. Make sure you optimise your image size for the web – if they’re too big, then your web page takes too long to load and users might lose patience and leave. You should be going for a resolution of 72dpi.

Consider updating your knowledge too, HTML5 uses a new element known as canvas which allows you to build 2D graphics on the fly, but for highly optimised animations and graphics, learn how to use SVG (Standard Vector Graphics) with HTML5 and JavaScript.

 

SVG practice

SVGs are written in the programming language XML, so there isn’t actually any imagery involved when creating graphics, it’s all text-based. Search engines do of course love text so check out the W3C Schools tutorials to learn how to get started. As SVG is written using XML, there’s a pretty good chance that you’ll find it easy to learn if you’ve used it in the past and there are tons of JavaScript libraries out there for SVG to help you with the programming.

Coded messages

And speaking of coding, search engines can read your code, so you need to make sure you optimise that too. This needn’t be a headache, you just need to be a little organised.  Structure your code to reflect the structure of your website, make good use of tags and ensure that it’s all keyword-rich for those hungry search bots.

Think about your URLs too – a load of random numbers or letters make search engines unhappy.  Make sure your URLs are full to bursting with keywords – going back to our art example, something like www.myclassicartpage/van-gogh/sunflowers will be well received by search bots. Also, if your URL appears on another page, users are more likely to click on a link that tells them something about the content they’ll see than they are one that tells them nothing useful whatsoever.

Page titles should also feature a few key words – but make sure you don’t go overboard. Titles should still be short and snappy.

Hints and tips

A few other hints and tips to achieve SEO excellence:

• Use a footer – these can be stacked with key words linking to elsewhere on your site, so are brilliant for propelling your site up the search rankings. If you can’t find a way to stick a footer in, go for a sitemap instead. Either of these really do help site navigability, if nothing else.
• Don’t use Flash – similar to the Splash page section above; there’s no way to get search engines to read your Flash content. Flash is slowly dying – don’t prolong its agony, use SVG for creating animated graphics.
• Integrate social media – add those Twitter, Facebook, LinkedIn, Reddit buttons. The more your content is shared, the more your URLs appear elsewhere – all the better for your SEO. Take care though, some third-party plugins like these can affect performance so consider making your own using vector graphics and a standard link.

More useful tools

Hopefully that’s given you a good grounding in the importance of SEO for designers. But here are a few handy tools that can really give you an SEO head start.

Google Webmaster Tools

 

You more than likely already use this but consider its SEO benefits too. Make sure that you’ve set the web address as the one you want tracking. For example, if your root domain doesn’t use the ‘www’, then make sure your site reads http://yoursite.com.

Pagerank

Offers you some key words you might not have thought of and identifies channels for you to promote your site.

Another tool you should have as standard is the Mozbar from Moz.com. This gives you information about sites at a glance and provides page rank information as well as domain authority.

Majestic SEO is another handy tool for exploring the more technical aspects to SEO for existing sites and if you’re thinking of offering basic SEO services to your clients, then it has some free tools that you will find useful for looking at link profiles, trust levels and so on.

These days, designers have to be versatile if they want to offer an all-round service that gives the client as much as possible. Whilst you can find partners for copywriting, SEO and so on, some of the SEO is much easier to do whilst you’re building a site rather than retrospectively. So make sure that you have a competitive edge when it comes to how you build sites and you will go far.