Web Designer SEO 101


Web Designer SEO 101

Rule One: SEO is not a Dark Art

Many designers think that SEO is a magic black box of Darkness - or at least those who do it are wizards or something equally enigmatic. How many new Designers/Front-end Developers have spent weeks working through a set of templates only for an SEO audit to make you - and your hard work - feel rather inferior?


‘Where are your headings? What happened to the meta descriptions? That’s the page title? You have no content here, we’re going to need more content…’ repeat ad nauseum.

What I’m going to attempt is a designers checklist to try and prevent this from happening in the future. Here goes:

The Checklist

  • Headings
  • Content Conscious Design
  • Crawlable Content

Starting at the beginning…

How Google “See’s”

Google, in its most stripped back state, is a text reader. When it sends out spiders to crawl a site, what it is looking for (amongst other things) is the text on the page. More importantly, ‘readable’ text, the more of this on a page the more sense it can make of it.

Equally, if you don’t have readable text on page for Google to ‘see’ and make sense out of it, it can only learn what it is you do from other people/pages, putting a lot of reliance in things you can’t control.

So how can we make Google’s life easier?

Getting Headings Done Right

Headings are a common battle-ground for designers and SEOs and I’ll show you why. I’m guilty of this in the past…

Yep, headings are great for using in a style sheet. We can use all of the default margins and padding, then the page looks great. But there is one problem, when Google goes to read the page we get this:

“H4 - what’s this doing here, H1, hey this is important this must be what the page is about. Hang on a minute, another one this must be the correct one. H2, okay that’s cool. H3 great. H1… Ok now I’m confused.”

Google has far too many possible headings for the page, it makes it much harder to work out which content is most important - so Google starts to guess and make its own assumptions. It’s not as though this will break a page from Google’s perspective, it’s just missing out on a large optimisation opportunity.

The Answer? Simple: heading tags are used to structure the page for text readers (and search engines), NOT for styling - that is what CSS is for.

The Basics: use one h1 per page, ensure this is the heading that defines the page (i.e. is what the page is about) and then use the following headings (h2, h2, h3 etc) nested correctly within it. Like so:

There are a few tools that you can use for checking this.

Here we use this Chrome extension.

So that’s headings seen to, what next?

Next thing ‘Content’

For a page to be effective it needs content. Most of the time as Designers or Front-end Dev’s we don’t much care for content. We find that it can make pages cluttered and feel like they’re bursting at the seams. Words, you’ve ruined my design yet again!

The important thing is that we have enough content to make the page valuable to Google AND beneficial to the user.

One thing that I can suggest when pulling a page together is to get into the habit of filling templates with as much default content as possible. This is where Lorem Ipsum will help pad the page out with more content than you think you’ll need and make the design work.

When the content is dropped in, you’ll find your template can take it whilst still looking great!

Embrace your inner Copy Monkey

NB: You also need to be aware of the purpose of the page, if you’re happy for a page not to succeed within Google (i.e. it doesn’t need to), then you can do away with content if it provides a better experience.

Crawlable content

Can anyone see what is wrong with this?

Apart from being an accessory to obesity, it’s one massive solid graphic - not so good for SEO (remember Google reads text, images not so much - yet). So when building a page, just imagine what Google can see. It may look amazing to a user but when the search engine comes across it, it becomes very difficult to know what it’s looking at. Also spare a thought for device widths, unless you want to build graphics for all of the breakpoints in your design. Graphic text titles are not the way forward.

Where at all possible use fonts and typography to set out text and details. If you’re looking to use large graphics then look at using alt and title tags to highlight your image content and describe what it’s showing. If it’s totally unavoidable you can do something like this:

Using the Chrome tool (mentioned above) we can see that Google will see this as text (works great but should only be used as a last resort).

Content doesn’t just reside between the body tags. The other two key things to remember are meta description and meta robots. Meta descriptions are there to give an overview of the page, to inform the user what the page is about, housed below the title tag and link in the Search results.

Meta Robots - let the spiders see you. The meta robot is a bit like a gate keeper. Normally when you’re developing a site you would implement a noindex, nofollow to prevent the page from being indexed whilst in development. Make sure that this is updated on release to allow the page to be indexed and let all of that great content shine through.

So remember:

  • Headings are for outlining the document structure, not for styling!
  • Don’t fear words. Build a page for Google AND the user.
  • Make sure non-text content has meaning.
  • Give the keys to robots so they can do their job.

Following the above steps will help massively with the readability of your pages, making it much more Google Friendly. It’ll also make your relationship with SEO more harmonious overall!

Of course, this is only the tip of the iceberg when it comes to SEO, if you’re moving more strongly into interactive content, this guide gives you the best practices you need to be aware of. For more insight with what not to do with content, this guide shows you how to pick a fight (and lose) with Google Panda.


Leave a Reply

Your email address will not be published. Required fields are marked *