SEO Friendly Web Design – so customers and Google will love you

Written By Fraser McCulloch

Traditional marketer specialising in keyword research, SEO content plans, and content briefs. Has-been Scottish golfer. 

Here are 19 tips to help your website rank higher on Google with my SEO-friendly web design guide.

So why is having an SEO friendly website important?

Search engine optimisation strategies get you more traffic from the search engines.

63% of Google's organic search traffic comes from mobile devices

Your SEO strategy is to design and develop with the search engines and your potential customers in mind.

Search engines deliver traffic.

I know you can use social media and advertising, but search engines still deliver the bulk of traffic to websites from organic results.

The SEO techniques in this guide are focused on organic traffic and creating SEO friendly websites.

What does your company do?

What I do has evolved through the years.

Now I’m a “search audience marketer” that provides researched content plans and courses to help agencies and website owners grow their search traffic.

That’s a bit wordy, but I’ve highlighted in that statement : 

  • What I do
  • For whom
  • The results

You can use this simple little system to explain what your company does.

Website Goal

For me, there are 2 types of website goals :

  • Sell products
  • Generate Leads

You will either sell your products directly or sell other people’s products through drop shipping or an affiliate scheme.

When I say products, I include training courses, books, guides and tools.

The other goal is to generate leads or inquiries from your website and turn those leads into paying customers later.

The next part of the website goal is “how many”?

How many products do you need to sell to reach a monthly or annual revenue/profitability goal?

You won’t be able to calculate that unless you know your current website status.

You are starting a brand new website, but you’ve been in business a while, selling home improvement services.

  • Take the Google Ads CPC for your service = eg: £15
  • Estimate the number of leads you typically convert into clients = 30%
  • Number of leads = £15 divide 30% = 50
  • Use a website lead conversion rate, let’s say 2%
  • You need 50 divide 2% = 2500 web visitors each month to reach your lead goal.

Now that you know the traffic goal for your website, next identify through research if that goal can be achieved.

Download : SEO Friendly Web Design Guide

Search and click keyword research

In the previous step, you estimated the monthly traffic you needed to reach your goal.

And you can estimate what people search and click using a few premium research tools.

The goal is to estimate what people CLICK, not search.

Most free keyword research tools are useless at estimating click or traffic estimates.

I devote an entire training module to click forecasting and identifying relevant keywords in my SEO training course.

You’ll know what category, product and service pages and which blog posts you need.

Here’s an example of what a click forecast looks after you’ve identified the topics people click on that relate to your business.

You have a long list of topics that you should organise into a structure for your website.

Website Structure and Architecture

Typically, I will arrange topics as follows :

  • Home
  • Services
  • Articles

Occasionally I may introduce folders such as subcategories (content hubs), for example:

  • Home
  • Services
  • Articles
  • Articles > SEO Articles
  • Articles > Keyword Research Articles

Ecommerce websites tend to be harder to structure since they depend on the products you will stock.

e.g., you may find in your research that many people search for a particular type of product, but you’ve not sourced these products.

Keep your product categories simple; don’t have lots and lots of subcategories with only 1 or 2 products in each.

This provides a poor user experience.

Home Page

The first thing you’re going to design is the home page.

Since you already know what the company does in the previous step, this should be reasonably easy.

When a prospective customer experiences your home page, you should communicate:

  • Name of company
  • What they do
  • For whom
  • The results
  • Location, if this is important

From an SEO perspective, you want to link the home page to the most important services, products or product categories in the body of the home page.

The home page will typically attract the most links and page authority.

You can pass the strength of the home page through links to these other important pages to boost their authority.

This home page from Warby Parker adheres to this approach.

Logo and Navigation

Typically the logo is in the top left corner with navigation on the top right.

However, that’s not always the case.

CrazyEgg has moved its primary navigation to the foot of the site with only a login and request demo link in the top bar.

  • They have such a strong proposition – make the website better instantly
  • They solve a problem – fix what isn’t working
  • Start free trial

If you’re new to their brand, you can click more to learn more about their solution.

I put the navigation on my home page to the bottom, but every other page has the core navigation at the top.

My home page is borrowed concepts learned from Story Brand.

Download : SEO Friendly Web Design Guide

Mobile friendly design and user experience

10 years ago, not many designers and developers considered responsive design; far less considered designing for mobile-first.

Today I work with clients that earn 85% of their traffic and sales from mobile devices.

Mobile-first indexing now means that search engines use the mobile version of your page to index and rank it.

Gone are the days of having a mobile version of your website; use responsive website design.

So SEO friendly web design is focused on speed, browser size and elements to guide your target audience to the outcome they’re looking for.

Two main SEO elements

  • Above the Fold
  • Speed

I use a simple checklist for the above-the-fold elements of a page on a mobile phone.

  • Read page title or header
  • Read the first sentence
  • Clear benefit before scrolling

You pass the above-the-fold test if you can say yes to these 3 elements when looking at a mobile device page.

Next is page speed.

I have stone walls at home, making the wifi connection to my phone slow.

Similarly, when I’m out and on a 4G connection, I don’t want to wait 30 seconds for the BBC to load the football scores.

Hosting and CMS

The foundations of page speed are the web host and the files used to serve a page.

If these foundations cause a web page to load slowly, then you have a page speed problem.

Tools such as PageSpeed Insights and GTMetrix will analyse page speed performance.

Google has even incorporated their Core Web Vital report into Google Search Console to identify page speed elements.

Speed starts with the CMS, web host and theme you choose to design and build the website upon.

From a WordPress perspective, I’ve chosen to use GeneratePress as the core theme websites are built upon.

Many agencies I work with build websites on the Duda platform, and they are aligning their platform to prioritise speed.

Platform OS outlines best practice guidelines for web developers at the higher end of the development scale to ensure fast loading pages.

I recommend that you read Google Playbooks for guidance.

Download : SEO Friendly Web Design Guide

Readability and Crawling

During your research and planning phase, you identified pages and categories of web pages.

You have the website’s basic design, colours, home page, navigation, mobile-first design, and speed.

Now people need to read these pages, and Google needs to crawl and understand your pages.

Most designers will create a stylesheet to design headings, paragraph styles, spacing, font and colours.

Here’s an example of a stylesheet.

Using these fundamentals will ensure that people can read web page content, and Google’s search engine spider can crawl it easily.

However, as the web designer, you may not be the person that writes the copy for each web page.

Not all content writers are web savvy; they write for brochures and other mediums.

I recommend you educate content writers about readability, especially the use of headers, sub-headers, sentence length and paragraphs for each piece of content.

Here’s an excellent guide to writing SEO copy.

URL Structure and Length

The words in the URL constitute a significant on-page ranking factor.

If your research identified “SEO friendly design” as a topic to include on your website, then the URL should be /seo-friendly-design/

It is common practice to use less than 4 words in a URL.

Any more than 4 words and the URL becomes too long and messes up the page’s design on mobile devices.

Avoid using URL such as /product/item9?= or /?p=123.


Think of title tags as advertising headlines for your pages.

It tells users and search engines the page’s subject matter along with a benefit or prompt for users to click and read the page.

For best practice, use the keyword or phrase your page is targeting towards the start of the page title, followed by a call to action, user intent, or outcome.

Meta Description

The meta description is the text you see underneath the page title in the search results.

Typically, I write a more extended version of the page title for my page’s meta description.

However, various research studies have discovered that Google rewrites between 62% and 70% of meta descriptions.

 Google say they rewrite meta descriptions for 2 reasons :

  • More accurately match the search query with the web page.
  • Poorly written meta descriptions (I can’t disagree with them)

I believe Google is rewriting the description to summarise the page content, so you get the answer to your question without clicking.

Download : SEO Friendly Web Design Guide

Header tags

I mentioned that headers help with readability.

Typically the first part of a web page is an H1 heading.

I use the same H1 heading as the page title, and my website ranks well.

Imagine you love your garden and search “small shrubs” on Google.

You read the title of one of the top pages and think this is what I’m looking for.

When users arrive on a page and the first thing they see is a big form and “compact shrubs” and not the “small shrubs” they were looking for.

The header should contain the same primary keyword as the page title.

This helps Google understand the page’s context and is a signal to the visitor that they have arrived on the right page they clicked on.

Sub-headers such as H2, H3, H4 etc., are used for a couple of reasons.

  • To break up the page into sections eg: a series of steps or tips
  • To serve those who skim content on a page and highlight important content


Search for anything on Google, and you’ll see images in the results as well as a tab for images and shopping.

You can earn rankings and traffic from images you create, provided they are related to the search query.

Optimising your images is relatively straightforward.

  • File name should describe what the image is
  • Alt text should describe the image even when search engines and people can see the image
  • Images should be small in file size but high in quality
  • Ideally Open Graph format should be used on pages so images can be shared and displayed socially.


Ideally, you should add proof of your results, such as reviews, testimonials or quotes.

For an e-commerce company, you might embed customer reviews with tools such as Feefo.

Or a professional service firm might embed reviews from Feefo, Trustpilot or even Google My Business reviews.

Focus on earning reviews and proof from external platforms and let that authority pass to your website.

Download : SEO Friendly Web Design Guide

Local Businesses and NAP

Following proof, local businesses can improve their organic ranking by leveraging their business name, address and postcode (NAP) across their website and external citation sources.

When I create a new website for a client, I typically follow this local SEO workflow.

  • Capture the business name, address, postcode and phone number (NAP)
  • Use a service like BrightLocal to earn citations or mentions of the business
  • Create a GMB account adding the (NAP)
  • Create a page on website with name, address, postcode and embed map of business location
  • Add name, address, and postcode to the footer of the website

Internal Linking and Orphan Pages

Earlier, I outlined the architecture and website structure.

Many websites have a link structure that lends itself naturally to internal links.

An e-commerce website will naturally create links from a product category page to the products within it.

Sometimes, breadcrumb trails can add links from one page to another.

But on many occasions, websites and publishers create orphan pages.

An orphan page doesn’t link to any other pages on the website.

It’s important to check or audit a website to identify orphan pages and add links to and from it to boost rankings.

External Links

Links from external websites are still the major ranking factor.

Duplicate content

When a website has a few thousand pages, it’s easy to have duplicate and thin content.

Duplicate content can occur when new content is written about the same previous topic.

Or duplicate content can appear on e-commerce websites when the same products appear in many different catalogues or collections.

So it would help if you used the rel=canonical tag to tell the search engines which is the original page.

Thin Content

Thin content can occur on many local websites.

The owners don’t write much about their services or create a service page for each town in their county to try and improve their rankings.

My solution for thin content is to target topics with clicks or traffic. 

Look, this page is ranking for “single duvets” and “double duvets” as well as “dry duvet-cleaning.”

Think about the most relevant query for your page.

Consider the query’s intent; do they want a guide, tips, products to buy, a service to use?

Now focus on your page copy giving the best possible answer to their query instead of keyword stuffing.

That’s how you’ll overcome thin content; by giving the best answer for the query.


A robots.txt file is a small file that sits on your web server telling Google which pages it should and should not crawl.

For example, I have PDF copies of my web pages (that I give to opt-in subscribers ) that I don’t want Google to see or crawl.

If Google crawled that content, I might have duplicate content issues.

XML SiteMap

An XML sitemap is like a directory or summary of all your web pages.

You can exclude some pages using the robots.txt file commands, or you can no-index pages: i.e., show pages on your website but not show them to Google.

The XML sitemap is added to Google Search Console for indexing, ranking and monitoring web pages.

So every time you add or change a web page, the sitemap is automatically updated, and Google can crawl such changes.

Download : SEO Friendly Web Design Guide


To summarise, these were 19 tips to help your website rank higher in Google with my SEO friendly website design guide.

Categories SEO