You may well be thinking that SEO is governed by things like how well optimised the site is coded, how relevant the content is, and how regularly it is updated, rather than the site’s aesthetic design. And you’d be absolutely right, these things are all hugely important when it comes to the site’s SEO. However, there are also some things that can be considered in the website’s design that can really help with SEO.
First up, note the title just says ‘designing websites with SEO in mind’. We always think that websites should be designed and developed for humans first, and the Google algorithms second. So this isn’t a rallying cry asking designers to do away with everything they think is important purely to appease our Google overlords. Far from it. We’ve compiled a short list of things to consider below which we think are easy to merge in with your creative vision without sacrificing it. Website customers are dead keen on SEO (as they should be) and if you’re able to justify design decisions because they are good for SEO they will bloody love you for it, we’re telling you. So to appear even more awesome in their eyes, read on.
Be conscious of the site’s payload
By ‘payload’ we mean the overall size of the site and how long it takes to load. Humans, and therefore Google, like sites that load quickly and respond nicely. If our website does that it has a higher likelihood of being returned in relevant Google search results.
Even when the website’s coding is nicely optimised it could still result in a large payload, and the site could hit a page speed ceiling
Loads of this is down to how the site is coded. I.e, we don’t want to be loading in a 4000px-wide photograph if it’s only going to be used as a blog post thumbnail. You can leave that stuff with us.
However, let’s say the site’s homepage is designed to have a hero carousel of twelve full-width images, a couple of auto-playing videos, excerpts and snippets of every page and post, and generally a ‘kitchen sink’ approach to it’s design. Even when the website’s coding is nicely optimised it could still result in a large payload, and the site could hit a page speed ceiling.
Perhaps there are alternate design choices that would lighten the payload without compromising the design aesthetic. For example, the carousel could be replaced with a single hero image, and we could just show a selection of three posts with a link to the main articles page.
This is an extreme example of course, and in reality you’d probably do this anyway, as that kind of streamlining makes for a better website overall, regardless of the SEO impact. However it’s good to remember that those design choices still do have an impact on SEO, and that can be really important to the customer and how they rate their website’s success.
Heading Structure
Another thing Google likes are pages with a well organised and predictable heading layout. In HTML code, there are six unique heading tags, from H1 to H6 that Google can quickly scan to get a feel for the sort of content that is on the page. If it knows more about it’s content, Google is more likely to return the page in relevant search results. So good headings are important.
Where possible we always recommend that website designs have a fixed style for at least the first four heading tags
The implementation of the six heading tags is very much in our court, but there are some design considerations here too.
First up, where possible we always recommend that website designs have a fixed style for at least the first four heading tags. If you think that H5 and H6s should just be bold body text that’s fine by us. But as an example, your designs could use these properties for every H2 across the site:
Font size: 32px
Font weight: Bold
Line height: 40px
Character spacing: -20
Font family: The brands chosen serif font
The actual properties can be whatever you’d like of course, but they should be the same through the site. Some properties can be added depending on the situation (a font colour for example) but the general idea is that all H2s look the same, all H3s the same… you get the idea.
This allows us to use those heading tags appropriately and make Google think that little more highly of the site, whilst still accurately conveying your designs.
Another thing to think about is the heading hierarchy within the designs. For example, if you had a section titled with a H2 element, any subtitles within that section should be a H3, not H4. Also having a single H1 heading on each page is really useful as well.
Text being an adequate size
Google recommends that at least 60% of all page text across a website is greater than 12px. This is to avoid humans having to zoom into pages to read the text, which isn’t all that fun. 12px is actually pretty small so you’d probably do that anyway, but it’s worth noting.
Some text does need to be around 12px. For example, links to the legal pages like cookie policies and terms and conditions in the footer. Google does give us some flexibility, so using a small font size here and there is all OK, but best not to make it a focal point of the designs.
Tap targets should be sized appropriately
Google also says that anything that can be tapped – menu icon, ‘read more’ buttons etc – should be at least 48x48px and have enough space around them to be easy enough to tap without overlapping onto other elements.
For reference, the menu icon on the Jambi site is 70x70px. Here’s what it the menu icon at 48x48px would look like on an iPhone 6/7/8 sized screen:
Anything smaller than that goes against Google’s recommendations and will suffer a small SEO penalty.
Google also recommends against having multiple tappable elements without any padding between them, though the penalties are a bit more relaxed if those elements are large enough that humans wouldn’t have an issue tapping the desired element easily.
—
We hope this all makes sense, helps out, and you agree that it’s possible to adhere to these recommendations without sacrificing your creative vision.