Before we begin, if the team building your website claims to be making it SEO-friendly and they are not doing the tasks listed below, it won’t be.

This isn’t to say that it won’t rank well on Google – there’s a chance it might. But you won’t have SEO baked into the core of your website design – you’ll be leaving it up to chance.

SEO isn’t something that is easily added to a website. It needs to be thought of from the beginning and woven throughout the site.

In our guide, we break down our 4 step process for doing this.

We cover the following steps:

• Why is SEO important in website design?
• Other common SEO and web design questions
• How do you design an SEO-friendly website?

My aim is to give your design the best chance of ranking high up the search results and driving organic traffic to your website.

Without these steps, your site could be swimming against the current without you knowing. Let’s dive in…

Does web design affect SEO?

100% – I can’t stress enough how much your web design affects SEO.

The design of a website will dictate how well it can rank on search engines. Get this wrong and you will not be able to rank as well as a website that gets it right.

Your site will be held back and you’ll be wondering why your amazing content that has gained links from other websites just isn’t ranking.

There’s a well-known stat in the SEO industry, that Google looks at over 200+ ranking factors when judging a website. These fall into 3 categories:

• On-site factors
• Technical factors
• Off-site factors

The first two (on-site and off-site) relate to your design and how the website has been developed.

Meaning your website’s design has a big impact on SEO.

Later in this guide, we explain how to make sure your website ticks the on-site and off-site SEO boxes.

But first, a battle as old as time…

Web designers vs. SEOs – who wins?

My background is in Search Engine Optimisation (SEO). I worked as an SEO at web design agencies for many years before launching my own web agency.

So I’ve been involved in quite a few battles with web designers over the years!

On the designer’s side, they want the website to look as good as possible. This usually means minimalistic with as little content on the page.

On the SEO’s side, they want it to rank as high as possible. This usually means having content on the page.

This is just one of many ways SEOs and designers clash. So, who’s in the right?

Well, both of them really. I learned that there needs to be compromises. And each side needs to educate the other and explain why the change they want to make is important.

After that, it’s down to the stakeholders involved to make a decision based on this.

I personally believe that great designers and developers will be able to incorporate the SEO suggestions I outline below whilst ensuring the design looks great.

Our website is already designed… is it too late?

In short, no. But it may cost you more.

For example, if your web design needs changing to follow best practices, you will likely double up on the work required to redesign and then redevelop that part of your site.

It’s best to think of SEO and involve an expert from the beginning.

Weaving best practices into the foundation. For example, letting the keyword research dictate the structure of the site and the content needed for your pages.

Rather than launching the website and trying to “add” SEO to it.

So, whilst it’s never too late to make your website’s design SEO-friendly, it’s best to weave in SEO best practices when it’s being built.

Next, why we’re all here…

How do you design an SEO friendly website?

This is the golden question! Below, we’ve broken the process down into 4 stages.

To help any company looking to design a new website, or redesign their current website, and have SEO baked into the core.

As mentioned above, you can still carry out these steps below even if your website is live.

We will cover the following:

• Stage 1: Research
• Stage 2: Design + development
• Stage 3: SEO migration
• Stage 4: Post-launch checks

Stage 1: Research

Before any designs are created, there is a batch of research that needs to be done.

This will help decide on the structure of the website and impact how Google will find and index your content.

First up, every SEO guide’s favourite task…

Keyword research

You may have undertaken this research before, but now is a good time to update and add to this. Or, to re-do it through the lens of a website redesign.

Your aim here is to find all of the keywords related to what you sell as a company, so then you can see how all of this fits together.

There are a million and one guides online on how to do keyword research and we have linked to ours here. And we have a screenshot of our spreadsheet, which was the end result of our keyword research.

The end result should be a list of keywords and their respective search volumes.

You can then decide if you feel it’s worth creating a page on your website to target that keyword, or not.

Search intent:
Not only do you want to have a list of keywords to help structure your website, but you need to understand the intent behind that keyword.

Introducing search intent…

This is the practice of looking at the search results for a certain keyword and seeing what content Google is favouring.

Taking a look at the keyword “b2b seo agency” we can see that the results are agencies offering their services. The intent of this keyword is commercial. People want to find and buy from an agency.

But when we look a “b2b seo strategies” all of the results are long-form guides, not agency service pages. This is an informational term. People want to learn from any website possible.

So, to rank for both of these keywords, you need to design both of these page types.

You won’t be able to rank for “b2b seo strategies” without a blog or an in-depth content page. And you won’t be able to rank for “b2b seo agency” without a service page.

Different keywords have different intents. You need to figure out the intent and then decide what type of page you need to design to rank for that keyword.

However, a list of keywords and the intent behind them isn’t enough.

Now let’s figure out how to put this all together…

Information Architecture (IA)

One of the most important SEO factors when designing a website – the information architecture (IA). Essentially, the structure of your website and how it all fits together.

This plays a big role in how users and search engines find and browse your content.

By mapping out your site’s IA, you can see how content fits together.

You can use a spreadsheet, or a site mapping tool like Octopus.do (shown below).

Here we have shown what an example site might look like that is based in Cambridge and offers PPC and SEO:

And then in this example, we have an agency with offices in Cambridge and London that offers SEO and PPC:

This is just a simple example.

And the reason behind putting the “London Agency” page at the top is because this got the most search volume out of London and Cambridge. So we wanted it at the top of the hierarchy so it had the best chance of ranking.

But the search volumes from your own research should dictate how you structure your website. As well as the priorities and direction of your business.

Competitor research

As part of the research stage, I like to see what our SEO competitors are doing. These are other websites that rank for the keywords we uncovered during the keyword research.

How do they have their website set up? Is there anything we can learn from them? Good or bad.

By reviewing the top-performing websites in your industry, you can learn from them and gain insights into how to structure your website.

Set up rank tracking tools

What gets measured matters! As simple as that.

Add the keywords you found during the keyword research to your rank tracking tools before you make any changes to your website.

Seeing how your rankings have improved is one of the best parts of SEO! Tracking keywords will let you do that before and after the new website launches.

So, that’s the research complete!

Now time to design and develop the website in an SEO-friendly way.

Stage 2: Design + Development

Armed with your insights, you can consult and work with the website designers and developers to weave and bake your recommendations into the design.

Some areas of optimisation include…

Navigation elements (internal links)

Following on but different from the IA, is your website navigation. These are elements such as your menu links, related links, footer links, filters, categories, and so on.

These internal links play an important role in SEO.

They connect pages on your website together. Helping users and Google to crawl your website quickly and efficiently.

Transfer authority:
When you build links from other websites to pages on your site, Google sees those pages with links as having authority.

Internal links are important because they help to transfer that authority between the pages on your site. Especially the ones that haven’t got external links.

Let’s dive into a few different types of internal links…

Menu links:
Your menu is the element at the top of every page that allows users to find specific information on your website.

The items in your menu signal to Google the most important pages on your website. After all, they appear on every page of your website. And they are the links you want users to see and therefore click first.

Google knows this so it values them.

Homepage links:
What sections of your website are you linking to from the homepage?

The homepage is (usually) the most powerful page on a website. It tends to have the most links from other websites.

So the links you have coming off the homepage to other sections of your website will indicate to Google that you value these pages. Plus, users are likely to navigate to these pages from the homepage first as well.

Horizontal linking:
Horizontal linking connects together similar or related product pages or blog posts. They help users and Google crawlers find pages that are similar.

Check deep down on your website structure, are you linking from product page to product page (related products)? And from blog post to blog post (related posts)? As well as linking from blog posts to product pages and so on.

These horizontal links help you connect different silos on your website together.

Breadcrumbs:
Not only were they useful for Hanzel and Gretal, but breadcrumbs are also useful for your users and for search engine crawlers.

They provide great internal links to connect up pages, and they help users who are say on a product page, get back to the category page.

Do your category and product pages, and your blog post and blog listing pages have breadcrumbs to show users where they are?

Site depth:
On your site, if a user needs to click too many times to get to an important page or to perform an action, this isn’t a great user experience.

Search engines see this in a similar way. The further a page is down your hierarchy, the less important it is to them.

These are just some of the ways internal links can impact your SEO.

Pagination

Pagination is used to help users (and search engines) navigate through your back catalogue of content. And it is usually found on your category or blog pages.

However, it’s becoming less and less common with website designs. In favour of infinite scroll and load more buttons.

Which aren’t bad, per se. But it is often set up incorrectly.

With infinite scroll, search engine crawlers often don’t “click” the load more button. So they may not find your old content further back in your blog.

But with pagination, they have a better chance of finding it. If they wanted to, it allows users and search engines to jump further back into your back catalogue.

Google has a great guide on how to implement infinite scroll, which can be found here. And this useful pagination example is by a current Google employee.

Mobile-friendly (responsive)

For many years, a mobile-friendly website design has been a must. Not only for SEO reasons but for the sanity of your users!

If your website doesn’t work on mobile, I can guarantee your users will be running in the other direction. Straight to your competitor.

To check the pages on your website, you can use Google’s mobile-friendliness test.

Why else is this important?

Mobile-first indexing:

In 2020, Google took this one step further. They announced mobile-first indexing, saying the following:

“Since the majority of users now access Google Search with a mobile device, Googlebot primarily crawls and indexes pages with the smartphone agent going forward.”

In layman’s terms, Google now judges your website based on the mobile version.

Because of this, one common mistake we see is websites showing users different content on desktop vs. what they show users on mobile.

For example, when they try to tidy up the page and reduce the content seen on mobile.

However, you don’t want to do this.

Google says further down their article that you can expect to lose some traffic if you remove content from your mobile view that can be seen on your desktop view.

This is where SEOs and web designers need to work together to think of creative ways to display that content. Within tabs or accordions, for example.

Although this has been a hot topic in the SEO community…

no, in the mobile-first world content hidden for ux should have full weight

— Gary 鯨理／경리 Illyes (@methode) November 5, 2016

On-page optimisations

Another major factor Google takes into account when ranking a website is its on-page elements. Some of the areas you need to add your keywords to are URLs, title tags, meta descriptions, headings, image alt tags, and so on.

As mentioned in our B2B SEO guide, on-page optimisation is a large part of SEO. To learn about this in detail, you can check out this detailed guide from Moz.

But in regards to building an SEO-friendly web design, we run through the most important on-page ranking factor next.

Page structure

We briefly touched on this in the “search intent” section of Stage 1.

In short, you need to ensure that the pages the design team are creating have the right elements and sections on there.

For example, if you notice every other website that ranks in the top 10 positions for “SEO agency” have a testimonial section on their page, then you need to ensure your design team create one.

If you notice every agency ranking for “SEO agency Cambridge” has a map on their page, then you will likely want to add one too.

As we said above, don’t blindly copy the competition. But look at what the top-ranking websites have in common on their pages and see if yours needs this too.

There’s a great (paid) tool called Surfer SEO that analyses the top 10 (and more) results for your target keyword. Helping you build out a page outline, giving you related keywords and headings to include, and other metrics such as the average word count of the top pages.

Within your code

This point falls under the development stage of the website design process but is worth a mention here.

There is code within your pages which can have a big impact on how your pages are crawled and indexed by Google. These include certain tags and directives such as:

• Meta robots: “noindex”, “index”, and “nofollow”
• Canonical tags
• hreflang tags if you target international markets.

If you have these tags on your current site, when you redesign it and move to your new website, you want to review these and ensure important tags carry over.

For example, hreflang tags tell Google what specific language you are using on a page. If you currently target multiple markets and have this setup, but you don’t move this over to the newly designed site, then Google will not react well to this.

It’s worth speaking with your development team about the items above, to see if they are present on your current site’s pages. If they are, will they be brought over to the new design?

Stage 3: SEO migration

This step is only relevant to websites that are redesigning, not new builds.

But it’s an important one!

Over the years, your website builds up authority. You start ranking for different keywords, and if you’ve actively been doing SEO, this could be a lot of keywords.

People will be finding you on Google and it’s likely contributing to your revenue.

If this is you, and you don’t carry out a proper SEO migration, you’re in trouble. Your rankings and traffic will drop off a cliff post-launch.

The main reason is that website redesigns really affect SEO.

For example, the structure of your site can change and the content can change. Things we have talked about above in this guide.

But most importantly, the URLs of your pages can change.

Google and your users don’t like it when the URLs of pages change and you don’t tell them. They will be greeted with a 404 page, which will cause your rankings to drop. So you need to add in redirects to let them know where the page has gone.

We won’t go into too much more detail here, but we have a guide that covers this in detail. Our 80+ point SEO migration checklist.

In that, we look at the following areas:

• Pre-launch check and tests
• Taking benchmarks
• Redirection mapping
• Reviewing page templates
• Technical SEO checks
• Launch day checks
• Post-launch checks

It’s a comprehensive guide and it will help you avoid an SEO nightmare when moving from your old site to your new site.

Stage 4: Post-launch checks

You can make these checks whilst your website is on a staging URL, but it helps to check them again when the site launches.

The aim is to ensure that what has been designed and developed is behaving as expected from an SEO point of view.

First up…

Page speed

An important factor when it comes to web design and SEO is site speed. Now your website is out in the wild, you can truly test its performance.

Amazon did a famous study where they noticed that every 0.1 seconds in added page load time cost them 1% in sales!

And Google has always stressed how important page speed is. In 2021, they released a new initiative called Core Web Vitals. A set of metrics that apply to all web pages and relate to the speed they load.

Every millisecond counts when it comes to site speed.

Testing:

There are various page speed tools you can run your website through. Such as WebPage Test and Google Page Speed Insights.

The aim here is to incrementally improve your site speed over time. The tools outlined above will give you recommendations on how to improve speed.

And remember, make sure your page speed is fast for both your desktop and mobile users. Now that Google judges you based on the mobile version.

Google Search Console

On the day your site launches, using Google Search Console’s URL Insepction Tool, submit all key page templates to be indexed.

This would include your homepage, product pages, blog and content pages. Any page you feel is important.

It can take Google a little while to crawl and index the key pages on your website naturally. By doing this, you can speed this process up.

Crawlability

Again, this should be done on your staging site to pick up issues before launching. But it helps to check again now your site is live.

You want to crawl your site using a tool like Screaming Frog (free up to 500 pages) so you can analyse how all of your pages are link together.

They have an amazing guide on how to analyse and create visualisations for your site architecture. This will help you spot any issues related to your Information Architecture.

In short, you want to ensure that key pages on your site can be crawled and indexed by Google, they have inlinks to them, and they don’t appear too far down your hierarchy.

Review ranking positions

If you’re redesigning your current website, it’s common to see a fluctuation in ranking positions and traffic in the days following the launch.

Google is trying to make sense of your new site structure and new content. Keep an eye on your ranking positions and your traffic post-launch.

If you see a keyword drop in ranking positions and they don’t recover, review the web pages and see if there’s anything obvious you can find.

Some common mistakes are the redirects haven’t been added properly (see Stage 3: SEO migration).

Or, there is some code blocking the web pages from being crawled. Either your robots.txt is blocking this or there is a noindex tag present. The best way to check for this is to submit the page to Google Search Console and they will let you know if it can be indexed.

Ongoing SEO work

This is my biggest caveat! The design of a site by itself is not enough to have you ranking high on Google for keywords.

Yes, a great design and correctly structured website is an essential step (and without it, you won’t rank well). You’ll have covered two of the three key areas of SEO:

✅ Technical SEO
✅ On-site SEO
❌ Off-site SEO

However, unless you build authority to your website, alongside your great web design, you won’t rank well on Google.

I just wanted to caveat this and highlight it. Because it’s a common misconception agencies will tell you “oh yes, your website design will be SEO-friendly”. Which it might.

But without this off-site SEO ranking factor ticked, this doesn’t mean it will rank well on Google.

Luckily, most websites have good authority. So after a redesign, this can really help to supercharge your SEO and have you going in the right direction.

In summary

There we go, our 4 step process for designing a website where SEO is thought of from the beginning and woven throughout the site.

We covered:

• Stage 1: Research
• Stage 2: Design + development
• Stage 3: SEO migration
• Stage 4: Post-launch checks

This framework will give you the best possible chance of designing a website that ranks high on Google, bringing you more traffic to the site for the right keywords.

But as stated in the final section, this is not enough by itself. You need to have links built to your website and be seen as an authority by Google and other search engines.

If you have any questions, please let me know on the social channels listed below where you can contact me directly.