SEO and website design: How to build search engine-friendly sites

Your website is the center of your digital marketing world. It’s where you have the most control and where all digital marketing rivers run toward.

Generally, the largest of those traffic sources is organic search. 

Yet, all too often, SEO is not deeply embedded when a new website is being designed (or redesigned), and SEO thinking is often only addressed after a site has launched. 

This is a problem. 

When building a new website as a marketing vehicle for your business, SEO considerations should be included in the planning stages before a line of code is written. 

My team and I have helped hundreds of businesses design and build sites that take their SEO and marketing to the next level.

Unfortunately, we have also helped many businesses recover SEO traffic after a botched website redesign that failed to factor in SEO.

This article explores why – and how – SEO plays an integral part in the website design process.

It details exactly what you need to consider to build a site for search marketing and lead generation and how to focus on what your users want to help keep the Google gods on your side.

We will also dive into common pitfalls businesses looking to build a new website and maintain SEO traffic may encounter. 

1. How to develop an SEO-friendly website

The following are the key areas to consider in building a truly optimized website. 

• Fundamentals: Domains, hosting and CMS.
• Crawling: The technical bit.
• Information architecture: How to structure your SEO-friendly site.
• Mobile: Mobile-friendly sites need more than just responsive design.
• Page speed: Fast sites make for happy users.
• Usability: Confuse them and lose them.

The rest of this article will dive into each of these points in detail. 

Fundamentals

There are a few core elements that set the stage for a well-optimized website design process.

Domains

Your domain name is the entry point into your website, and there should be one single (canonical) domain. You may have others, but they should all point (redirect) to this one.

Our business is called Bowler Hat. We operate in the UK. We are a web-based business. It naturally follows that our domain is www.bowlerhat.co.uk. All subdomains 301 redirect back to the main URL www.bowlerhat.co.uk. We have a few domain variations that 301 redirect back to the main URL. This all makes sense.

Your domain should be brand led in the majority of cases, and having www.crammed-my-keywords-in-here.com is not going to help you rank today (1999 just called and wants its SEO back). 

Hosting

You can buy hosting for $1 a month – but guess what? It is not very good. 

Slow, cruddy hosting creates a poor user experience and ultimately creates a site that Google is not so keen to show in the search results. 

Buy the best hosting you can afford and ensure your site has good uptime and runs well on it. 

In most cases, hosting should follow common-sense rules:

• Be situated where your audience is
• Be fast and ideally platform-specific (WordPress hosting for WordPress)

CMS

The CMS (content management system) you choose for your business can hugely influence how successful you are. WordPress are great option, but there are other platforms out there. 

Try to use the path of least resistance for your CMS choice. If one of the ubiquitous CMS platforms works for your needs – go with it. Google has to understand the big players, and they are technically sound and easy to optimize. 

The final choice here depends on your utterly unique requirements, but ensure you understand why you are using a given platform and don’t just end up with the one your web agency likes to work with.

Crawling and accessibility

The first step is ensuring a search engine can crawl your site and understand what it is that you do (and where you do it).

Indexation

To understand your site, they have to be able to read the content of the page. This means that the main content of your site should be text-based.

Even as we hurtle forwards towards and have search engines with AI features, the written word is the backbone of a search engine-friendly site, so ensure your text is well-written and sensibly optimized. 

Images, videos, PDFs and content are also important and can be a source of search engine traffic. Again, these need to be well-named, organized and discoverable to be indexed.

Link structure

To index your content beyond the home page, you need internal links that the search engine can crawl.

Your primary navigation, search engine directives and tools like XML sitemaps all help the search engine crawl your site and discover new pages. 

Information architecture and structuring your site

I have always liked the filing cabinet analogy for website structure.

Your site is the filing cabinet. The major categories are the drawers. The subcategories are the folders in the drawers. The pages are documents in the folders. 

• Cabinet: Your website
• Drawer: High-level category
• Folder: Subcategory
• File: Individual document/page

This helps to provide additional contextual information about the content on any given page. 

If you have a drawer in your cabinet for services, then anything in that drawer is a service – before a single character has been analyzed. 

This is good for Google and your users, which is what Google really cares about (and is a more straightforward concept than the sometimes esoteric nuances of SEO). 

Many websites have the following structure:

For our company website, that is:

So, there is a page in this information architecture that is simply /audits/.

• We have services. 
• We have SEO services. 
• We have SEO audit services. 

This all makes sense, and the structural organization of your website can help to provide context and relevance signals beyond the page itself. 

This is relevant to blog posts, articles, FAQ content, services, locations and just about anything else that is an entity within your business.

You want to structure the information about your business in a way that makes it understandable (to people and robots).

Some sites may take a deep approach to structuring content. Others may take a wide approach. The important takeaway is that things should be organized in a way that makes sense and simplifies navigation and discovery.

A three- to four-level approach like this ensures that most content can be easily navigated within three to four clicks and tends to work better than a deeper approach to site navigation (for users and search engines).

URLs

The URL further indicates context. A sensible naming convention helps provide yet more context for humans and search engines.

Following are two hypothetical sets of URLs that could map to the Services > SEO > SEO audit path laid out above – yet one makes sense, and the other does nothing to help.

• Example 1:
  • www.example.com
  • www.example.com/services/
  • www.example.com/services/seo/
  • www.example.com/services/seo/audits/

• Example 2:
  • www.example.com
  • www.example.com/s123/
  • www.example.com/s123/s1/
  • www.example.com/s123/s1/75/

Of course, the second set of URLs is a purposely daft example, but it serves a point – the first URL naming convention helps both search engines and users, and the second one hinders.

This further builds upon the contextual signals from your filing cabinet structure. 

Navigation

Building an SEO-friendly website navigation can also help indicate the relevant importance of a given page (in the set of pages) and provides additional context. 

Your navigation should be text-based and therefore helps send a signal about the keywords you would like a given page to rank for. 

I have always liked the signpost analogy for navigation. I walk into a supermarket and look for the signs to find what I need. Your website is no different.

A user lands on your site and has to find where they need to go in the quickest possible time. They then need a signpost to get them there. 

SEO thinking can be dangerous here, though. Mega menus with hundreds of spammy page links – this is not the way! 

The golden rule is to keep your navigation simple. Don’t make the user have to think.

The following image is a sign from my local home improvement store. Which direction takes you to the car park and which direction takes you to the deliveries entrance?

My brain follows the “customer car park” line from left to right, so I turn right. However, the customer car park is to the left.

There is nothing to clearly illustrate right or wrong, and I read right to left – a simple line down the middle separating these would improve this.

As a mental activity, browsing websites is like driving. It is a complicated task, yet, to some degree, the brain is on autopilot.

Leverage this in your website navigation, give people what they expect, make it easy, and remove any potential for confusion else they will bounce back to the SERPs and into the open arms of your competition. 

Ensure your navigation is simple to use, promotes your most important pages and does not make your users think too hard (if at all). 

Common problems

There are many potential issues with content that can’t be found or understood by the search engine that can work against you. For example:

• Orphaned content that can’t be found.
• Content only available via site search.
• Flash files, Java programs, audio files, video files.
• AJAX and flashy site effects. (Google has gotten a lot better at reading AJAX pages, but it is still possible to obscure content with pointless effects.)
• Frames: Content embedded from another site can be problematic.
• Subdomains: Content split into subdomains rather than sub-folders.

Be sure that important content is easily discoverable, understandable and sits in the overall structure of the site in a way that makes sense.

Summary

If everything is done well, a human and a search engine should have a pretty good idea of what a page is about before they even look at it. Your typical SEO then just builds on this solid foundation that is laid out by your information architecture and site structure.

Mobile-friendly design

Being SEO friendly is having a site that works how your users want it to – and that means on a mobile in many cases. 

We were talking about the importance of responsive website design in 2012. Eleven long years later, with massive technological progress and greatly improved mobile data networks, your future customers are using mobile as the first, and often only, device to interact with your business.

Another crucial consideration for many businesses is the multi-device interactions, and even if your conversions tend to be desktop, those initial interactions may be from mobile. be on a desktop, that crucial first touch may well be on mobile.

Mobile-friendly means more than just responsive design. I previously looked at 28 key factors in creating mobile SEO-friendly websites that will help you move beyond simple responsive design toward truly mobile-friendly websites. 

From an SEO perspective, it is worth noting that mobile-friendliness is a confirmed ranking factor for mobile search, and it is the mobile version of your site that the search engine will use to review and rank your site.

However, far more important, mobile is how your prospective customers search for and browse your site.

It is debatable just how important features like mobile-friendly are for SEO, yet it is completely moot, do what works for your users, and that is good for SEO. 

Page speed

Another key consideration in the mobile era is page speed. Users may be impatient, or they may not always have a great mobile data connection.

Ensuring your pages are lean and mean is a key consideration in modern SEO-friendly website design.

A great starting point is Google’s mobile-friendly test. This tool will give you feedback on mobile-friendliness, mobile speed and desktop speed. It also wraps everything up into a handy little report detailing what exactly you can do to speed things up.

I went into a little more detail on how to optimize for speed in a previous column on mobile optimization. Page speed is yet another essential consideration that spans how your site is built and the quality and suitability of the hosting you use.

Usability

Web usability is a combination of other factors: device-specific design, page speed, design conventions and an intuitive approach to putting the site together with the end user in mind.

Key factors to consider include:

• Page layout: Important elements should have more prominence.
• Visual hierarchy: Make more important elements bigger!
• Home page and site navigation: Clearly signpost directions for users.
• Site search: Large sites need a sensibly positioned search option.
• Form entry: Make forms as lightweight and easy to fill as possible.
• Design: Great design makes everything easier.

This is just scratching the surface here, and usability really has to be customized to the individual site. A couple of resources I would check out would be the book, “Don’t Make Me Think: A Common Sense Approach to Web Usability,” by Steve Krug and my mobile optimization checklist.

The content marketing funnel

Another key consideration to building a site that ranks is how you structure the content on your site to map to the different stages a potential customer will go through. 

The goal of your website is to help your business get in front of prospective customers on search engines and then engage and convert those customers.

A good way to approach this is to structure your content to match the stages in a standard marketing funnel:

Awareness: Top of the funnel

Awareness content will typically be your blog and informational articles. We are helping your prospective customer understand the problems they face and illustrating your experience and credibility in solving them.

• Blog posts
• Informational articles
• Webinars
• Comprehensive guides
• FAQs

Consideration: Middle of the funnel

The content at the consideration stage helps your prospect compare you against the other offerings out there. This tends to be practical content that helps the customer make a decision.

• Case studies
• Product or service information
• Product demonstration videos
• User guides

Conversion: Bottom of the funnel

Bottom-of-the-funnel content drives conversions and should gently encourage a sale or lead.

• Reviews
• Testimonials
• Free trial
• Free Consultation

Remember that customers will search across this entire spectrum of content types. Therefore, ensuring all these areas are covered aids discovery via search engines and helps you win more business – win-win. 

That’s the basics covered

A lot is going on there but not without good reason, and ensure you have given each of these devil’s their due in the planning of your new site. 

---

---

2. SEO: How to optimize your site

OK, so now you have methodically planned and developed your website, laid your SEO foundations, and you are ready to start the actual optimization. 

Optimizing that site with a well-structured website that considers all of the points covered above becomes easier. 

Keyword targeting

Nailing your keyword strategy is much easier once you have a solid structure without internal duplication. If we look at our previous examples for site hierarchy and structure, then adding keywords is relatively straightforward (and is something we would often do in a spreadsheet pre-design).

• Services: www.example.com/services/
  • SEO: www.example.com/services/seo/
    • SEO audits: www.example.com/services/seo/audits/

• www.example.com/services/
  www.example.com/services/seo/
  www.example.com/services/seo/audits/

If I use these pages as an example, we have a natural progression from broad keywords to more refined search terms. We can even consider basic modifiers such as location if we are a local business.

Home
– digital marketing agency
– digital marketing company
+ Birmingham
+ UK

Services
– marketing services
– digital marketing services
+ Birmingham
+ UK

SEO
– SEO
– Search Engine Optimization
+ Company
+ Agency
+ Birmingham
+ UK

SEO Audits
– SEO Audits
– Technical SEO Audits
+ Agency
+ Company
+ Birmingham

The point here is that a well-structured site gives you a good way to determine your keyword strategy.

You still have to do the research and copywriting, but you can be sure you have a solid strategy to target broad and more detailed terms.

Pro tip: The work done structuring your site up to this point should make this aspect a piece of cake – if you are still struggling, consider revisiting the page structure. 

HTML title tags

The <title> tag is the primary behind-the-scenes tag that can influence your search engine results. In fact, it is the only meta tag that actually influences position directly.

The best practice for title tags is as follows:

• Place keywords at the beginning of the tag.
• Keep the length around 50 to 60 characters.
• Use keywords and key phrases in a natural manner.
• Use dividers to separate elements like category and brand.
• Focus on click-through and the end user (think call to action).
• Have a consistent approach across the site.

Remember, don’t overdo it and over-optimize page titles. We want our keywords in the title tag, but not at the expense of click-through and human readability. A search engine may rank your content, but human clicks on it, so keep that in mind.

Pro tip: Google has started to include brand names and logos in search results (again), so you can now use any space you would have used for branding for a call to action or more optimization. 

Meta description tags

Sure, meta descriptions don’t directly influence rankings. We all know that, right?

But that is completely missing the point here. Your meta description is the content of your advertisement for that page in a set of search engine results.

It is what wins you the click. And winning those clicks can help improve visibility and is absolutely vital in driving more users to your pages.

Meta descriptions must:

• Truthfully describe the page content.
• Advertise the page and improve click-through rates.
• Consider the user’s thought process and why they will click on this page.
• Include keywords where relevant and natural to do so.

The search engine will highlight search terms in your page title and meta description, which help a user scan the page. Don’t use this as an excuse to spam the meta description, though, or else Google likely will ignore it, and it won’t lead to that all-important click!

There are also situations where it can make sense not to create a meta description and let the search engine pull content from the page to form a description that more accurately maps to a user’s search. Your brief meta description can’t always cover all the options for a longer-form piece of content, so keep this in mind.

Pro tip: Got tons of meta descriptions to write? This is one of those SEO jobs that ChatGPT can really help with. 

Heading tags

Heading tags help structure the page and indicate hierarchy in a document: H1, H2, H3 and so on.

Text in heading tags correlates with improved rankings (albeit slightly), but what matters is the alignment between the structure of the site, behind-the-scenes optimization like page titles and meta descriptions and the content itself. 

Line everything up, and things make more sense for users, and we help search engines categorize our content while eking out every last bit of simple, on-page optimization we can.

Remember to align header tags with the visual hierarchy. Meaning the most important header on the page (typically the <h1>) should also be the biggest text element on the page.

You are making the document visually easy to understand here and further ensuring that design and content are working together for the best result.

Pro tip: The magic here is almost always in the process itself. Thinking of the content in relation to the hierarchy of information and mapping that to the visual hierarchy will almost certainly drive revisions and improve the content – that is the real SEO win! 

Page content

The content should generally be the most important part of the page. However, we still see archaic SEO practices like overt keyword density and search terms littered in the copy affecting readability.

This does not work. It makes you look illiterate and certainly does not help with your SEO. Don’t do this. 

We want to make sure the context of our page is clear. Our navigation, URLs, page titles, headers and so on should all help here. Yet we want to write naturally, using synonyms and natural language.

Focus on creating great content that engages the user. Be mindful of keywords, but certainly don’t overdo it.

Considerations for page content:

• Keywords in content (but don’t overdo it)
• Structure of the page
• Position of keywords in the content – earlier can be better
• Synonyms and alternatives
• Co-occurrence of keywords – how else do people talk about this topic?

Pro tip: review individual pages in Google Search Console to see what keywords the page ranks for in lower positions. Using the impression count vs. clicks you can get some easy wins here. 

Rich snippets

Rich snippets are a powerful tool to increase click-through rates. We are naturally attracted to listings that stand out in the search engine results.

Anything you can do to improve the click-through rate drives more users and makes your search engine listings work harder.

Factor in possible ranking improvements from increased engagement, and you can have a low-input, high-output SEO tactic.

The snippets that are most relevant to your business will depend on what you do, but schema.org is a great place to start.

Image optimization

Image SEO can drive a substantial amount of traffic in the right circumstances. And again, our thoughts regarding context are important here.

Google does not (yet) use the content of images, so context within the site and the page and basic optimization are crucial here.

As an example, I am looking for a hobbit-hole playhouse for my youngest, and the search brings up image results:

I can dive right into those image results and find a multitude of options, then use the image to drive me to the site that sells the playhouse.

Optimizing your images increases the chance of improving prominence in the image search results.

Image optimization is technically straightforward:

• Provide an image name that clearly describes what the image is.
• Use descriptive alt text to help those who can’t see the images reinforce the image content.
• Add OpenGraph and Twitter Cards so the image is used in social shares.
• Use the image at the right physical size to ensure fast downloads.
• Optimize the image’s file size to improve loading times.
• Consider adding images to your XML sitemap.

Image optimization is relatively simple. Keep the images relevant. Don’t spam the filenames and alt text with keywords. Be descriptive.

Pro tip: Use captions, titles and alt text to provide as much contextual information as possible about your images. 

Optimal optimization 

You can always optimize something else, but if you structure and plan your site and then optimize these key areas, you will get 80% of the results from 20% of the effort. 

Pro tip: Optimization is never complete, but there is a whole wide world out there, so focus on what moves the dial and then move on. 

3. Common problems

Knowing what to optimize is essential and is the target we aim at. 

It is just as important to understand common problems that impact SEO and use this as something to run away from! 

Typically, every SEO project starts with an audit, and while we can’t cover every eventuality here, the following are some key points. 

Duplicate content

There tend to be two kinds of duplicate content: true duplicates and near-duplicates.

True duplicates are where the content exists in multiple places (different pages, sites, subdomains and so on).

Near-duplicates can be thin content or substantially similar content – think of a business with multiple locations or shoes listed on a unique page in different sizes.

Keyword cannibalization

Keyword cannibalization refers to the situation where multiple pages target the same keywords. This can impact the ability of your site to have one page that strongly targets a given term.

Where the site architecture and hierarchy have been carefully planned, you should eliminate this during the planning and design stages.

Domains, subdomains and protocols

Duplication also crops up when the site is available on multiple domains, subdomains and protocols.

Consider a business with two domains:

• Example.com
• Example.co.uk

With www and non-www versions:

• Example.com
• Example.co.uk
• www.example.com
• www.example.co.uk

And the site runs on HTTP and HTTPS:

• https://example.com
• https://example.co.uk
• https://www.example.com
• https://www.example.co.uk
• https://example.com
• https://example.co.uk
• https://www.example.com
• https://www.example.co.uk

Before too long, we can get to a situation where the site has eight potential variations. Factor in the site resolving on any subdomain and a few duff internal links and we can often add things like “ww.example.com” to the list above.

These kinds of issues are resolved with URL redirections.

Still, again, they deserve consideration by any web design agency that takes care of hosting and is serious about the SEO of their customers’ websites.

Botched canonical URLs

Another common issue we see is an incorrect implementation of canonical URLs.

Typically, the person building the site looks at canonical URLs as an SEO checklist kind of job. They are implemented by dynamically inserting the URL in the address bar into the canonical URL.

This is fundamentally flawed in that we can end up with the site running on multiple URLs, each with a canonical URL claiming that they are the authoritative version.

So the canonical implementation exacerbates rather than resolves the issue (sheesh). 

Canonical URLs are a powerful tool when wielded wisely, yet they must be used properly, or they can worsen matters.

Modern web design considers SEO best practices 

SEO is not some band-aid you can plaster onto an existing site. 

Every website developer or CMS will list SEO credentials. Nobody says that they build sites to crash in the search results. SEO, today and beyond, is way more than a dry list of technical must-haves. 

Like all good marketing, it is ultimately about helping your prospective customers achieve their goals. 

SEO should be woven into every aspect of your marketing, and at the center of that should be your (optimized) website. 

There are a lot of moving parts with website design and SEO. 

• The first step is to carefully plan your site to have a sensible filing cabinet structure to house your products and/or services. 
• Then, optimize the key areas to ensure Google (and your prospects) can clearly understand what they should do next. 
• Finally, double-check for typical issues and ensure you eliminate any areas that could be holding you back.