Most companies want their websites to rank well and be visible within search engines, because it’s good for business. It puts you in front of more potential customers/clients, and it increases your chances of making sales, regardless of what sector you’re in.
Search engine optimisation (SEO) is crucial to making sure that your website is consistently visible, and although it is an ongoing practice, it all starts at the design stage.
How SEO feeds into web design
First of all, before we start on the specific advice, we want to say this:
It’s imperative that you approach web design from a UX perspective in addition to ticking the technical boxes that we’re about to lay out. What do we mean by this? In simple terms, make sure that every single element of your site is geared towards giving the user a pleasant, smooth experience.
Search-engine algorithms examine specific elements of user behaviour (such as how long they spend on your site, how many pages they visit, whether they bounced straight back to their search results after viewing just one page), so if you have a site that is generally unpleasant for large numbers of users, the search engines will pick up on that and will very possibly punish you with lower rankings.
Now we’ll get into some of the elements you must get right when designing your site.
Semantic URL structure
Search engines like URLs that are easy to read, because they can understand what those pages are about. If a category page’s URL slug is “/nike-running-trainers/”, a search engine is in no doubt as to what they (and users) will likely find there. The same goes for “/antivirus-software-packages/”. These are known as semantic URLs – they’re logical and readable, composed of proper words.
Many poor-quality websites, and especially older ones that were designed on custom CMSs, don’t follow the semantic structure. Instead, their URLs are made up of nonsensical strings of characters, such as this: “/af4557773333qo011hj/”. These strings might mean something to the CMS in question, but they mean nothing to anyone else – human or machine.
Your site should follow the semantic URL structure through to the end: not just on category pages, but also on subcategory pages and product (or service) pages. For example, consider how much clearer A would be than B, if we’re selling a particular running shoe:
- “/nike-running-trainers/mens/air-zoom-pegasus-37/”
- “/nike-running-trainers/mens/6679900hg/”
Website architecture
Just like semantic URL structure, a logical and hierarchical site architecture will help both search engines and users. Search engines will have a firm grasp of what you offer to your customers/clients, while the actual users themselves will be able to easily navigate through your website – which is crucial to providing that smooth UX we mentioned earlier.
We’ve already given an example of solid site architecture in the previous section, with the A and B example of the Nike running shoe URL:
- First you have the top-level category – Nike running trainers
- Second you have the subcategory within that – men’s Nike running trainers
- Third you have the individual product – the Air Zoom Pegasus 37 model
That’s not the only way you could do it, of course. You might instead want the top-level category to be ‘men’s running trainers’, followed by the Nike brand as the subcategory and then the individual product following on from that (so, “/men’s-running-trainers/nike/air-zoom-pegasus-37/”).
Either way would work, because a human could understand each one without difficulty – you just have to choose a hierarchy and stick with it across the site.
The common analogy of ‘cabinet, drawer, folder, file’ is a great way to illustrate this:
- The cabinet is your website
- The drawers are your top-level categories
- The folders within each drawer are their respective subcategories
- The files within the folders are the individual product/service pages
Editable metadata (meta titles, meta descriptions, image alt text, etc.)
If your CMS doesn’t allow you to easily edit your own metadata, that’s a sure sign that you’re using the wrong CMS. All of the good ones give you ready access, including WordPress, Shopify, Magento et al.
These CMSs will even auto-generate meta titles and meta descriptions (and semantic URLs) for you when you upload a page – which is great, but you’ll want to be able to edit them yourself, because the CMSs don’t always get it right.
For instance, when auto-generating a meta title (AKA title tag) for a page, the CMS will usually pull through the page’s main title/name (the H1) as standard, usually followed by a vertical bar or a dash and then your brand name. That’s nice and convenient, but you’ll usually want your meta title to be much richer in its context – with more detail and, if possible, a secondary keyword or two that will help the page’s visibility for a wider range of searches. (That said, you should take care to avoid ‘keyword stuffing’ at all costs – i.e. don’t just put “Nike Running Trainers | Nike Running Shoes | [brand name]”, because they’re just synonyms of each other and they don’t give the user or search engines any extra context.)
It’s also good to be able to edit your meta descriptions, because search engines will usually just pull through a 160-character snippet of written content from the page – what it thinks is most relevant – but the search engines don’t always get it right. It’s better if you have the freedom to enter your own custom meta description: one that summarises the page and calls the user to action.
Another key element of metadata that you’ll benefit from having control over is image alt text. This is an attribute that you attach to each image that’s used on your site, basically explaining what each image depicts, because search engines can’t understand images like the human eye. With alt text attached, you’ll indicate the meanings of your images to search engines, and you’ll stand a better chance of ranking for image searches too.
Mobile-friendliness – i.e. responsive web design (RWD)
We usually talk about mobile-friendly design much earlier on in our blog posts than we have in this instance, because it’s such a fundamental part of modern web design generally, never mind SEO-focused design. But we thought we’d change things up.
Since Google’s ‘Mobilegeddon’ algorithm update in 2015, websites have had to become mobile-friendly or suffer much lower rankings.
The way web designers and developers can ensure a mobile-friendly site is to follow the principles of responsive web design (RWD) – meaning that it will render properly on devices and screens of all sizes and shapes, from the average smartphone to laptops and desktops and TV screens.
Fast page-speeds
Google and the other search engines keep tabs on how quickly your site loads, as well as looking at user-behaviour factors such as bounce rates to make further deductions.
Increasing your page-speeds should therefore be a constant priority, and it all starts with forming good habits at the start, and designing your website in a way that enables fast loading.
Here are some ways to make sure your website loads quickly:
- Make sure your hosting provider is a good one
- Optimise your images (e.g. scale them down to the lowest resolutions they can be without compromising the visual quality, and run the files through an image-compression tool before uploading)
- Use JavaScript sparingly and wisely
- Make sure your files are as small as they can be
- Wherever possible, place HTML content higher up on the page than JavaScript content, because JavaScript always gets prioritised and therefore other elements of the page won’t load until after the scripts do
- Enable browser caching, so that your pages are stored on frequent visitors’ browsers, thereby minimising load-times
- Try not to embed content from other websites
- Avoid non-essential plugins
- Minimise redirects if you can
There are plenty more. We can talk you through them. Speaking of which…
Let’s have a chat
Our expert web designers build search-optimised, user-friendly sites day in and day out.
If you need a new website, we can take care of everything from the design to the build to the ongoing maintenance. Whether you’re an established business needing a site migration or an exciting startup looking to make your digital presence known, we’ll make it happen.
Complete our contact form if you want us to get in touch, or give us a call directly on 0161 532 5166, for a no-obligation chat.
