Design Your Website with SEO in Mind

Most businesses want their websites to rank well and be visible within search engines, because it’s good for business. It positions you in front of more potential customers/clients, and it increases your chances of making sales, regardless of which sector you’re in.

Search engine optimisation (SEO) is vital in making sure that your website is consistently visible, and although it is an ongoing practice, it all starts at the initial design stage.

How SEO feeds into good website design

Before we begin, we just 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 bounce straight back to their search results after viewing only one page), so if you have a website that is somewhat unpleasant for large numbers of users, the search engines will pick up on that and will most likely drop you further down the rankings.

Now we’ll get into some of the important elements which you must get right when designing your site.

Semantic URL structure

URL stands for Uniform Resource Locator. A URL is nothing more than the address of a given unique resource on the Web. In theory, each valid URL points to a unique resource. Such resources can be an HTML page, a CSS document, an image, etc.

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 “/adidas-running-shoes/”, 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 are logical and readable, and composed of real words.

Many poor-quality websites, and especially older ones built on custom CMSs, don’t follow the semantic structure. Instead, their URLs are made up of nonsensical strings of characters, such as this: “/23bfgabzs792nk/”. 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:

• “/adidas-running-trainers/mens/adizero-adios-pro-2.0-shoes/”
• “/adidas-running-trainers/mens/6679900artm/”

Website architecture

Just like semantic URL structure, a logical and hierarchical site architecture will help both search engines and user experience (UX). 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 so important to be able to provide 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 Adidas running shoe URL:

• First you have the top-level category – Adidas running shoe
• Second you have the subcategory within that – men’s Adidas running shoe
• Third you have the individual product – the Adizero Adios Pro 2.0 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 shoes’, followed by the Adidas brand as the subcategory and then the individual product following on from that (so, “/men’s-running-shoes/adidas/adizero-adios-pro-2.0/”).

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 tags, etc.)

If your Content Management System (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 “Adidas Running Shoes | Adidas Running Trainers | Adidas”, 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 – whatever it thinks is most relevant – but again, 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 – Responsive Web Design

Mobile-friendly design is such a fundamental part of modern web design, never mind SEO-focused design.

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 Loading Page Speeds

Google, and 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.

The primary causes for a slow website are:

• Web Hosting – When your web hosting server is not properly configured it can hurt your website speed.
• Website Configuration – If your website is not serving cached pages, then it will overload your server thus causing your website to be slow or crash entirely.
• Page Size – Mainly images that aren’t optimised for web.
• Poor 3rd Party Plugins – If you’re using a poorly coded plugin, then it can significantly slow down your website.
• External scripts – External scripts such as ads, font loaders, etc can also have a huge impact on your website performance.

Now that you know what slows your website down, we can take a look at how to improve the speed of your website.

• Good Website Hosting – with website hosting, you generally get what you pay for.  If you have found some cheap website hosting online, the chances are you will be on a Shared Hosting Account on a very below average specification of Server .  A sure fire way to improve your website speed is to use a reputable and reliable host, running either managed hosting or a dedicated high spec server.  Here at Black Sheep Digital Media we only use dedicated high spec servers to provide our customers with speed and security.

TELL US MORE ABOUT YOUR PROJECT