Form vs Function – The Relationship Between SEO and Web Design

Alex Haswell

Alex Haswell

The marriage between web design and SEO is sometimes a strained one.

In the world of SEO, the optimiser is always on the hunt for the latest incremental change that may lead to that all important improvement in Search Engine Results Page (SERP) placement. An improvement of just a single place can mean the difference between most of the traffic and none of the traffic.

This objective is often at odds with the objective of the site’s designer or creative lead, who’s typically invested in maintaining the appearance and artistic integrity of the pages they spent their labour in creating.

In 2023, the minimal aesthetic that prioritises clean page design with limited copy is a popular one that has the potential to majorly benefit or severely undermine your efforts to be discovered via organic search.

As a site owner, SEO or designer, you may be intrigued as to the extent that design, layout and other artistic elements of a page’s overall structure can impact a page’s ability to rank, and how the two can work synergistically to achieve an organically visible, intuitive and visually pleasing website.

Let’s get into the form vs function debate.

How do Search Engines Understand Web Pages?

Broadly speaking, we can break search engine functionality down into 4 stages:

  1. Crawling
  2. Rendering
  3. Indexing
  4. Ranking

Crawling occurs when search engine robots (bots – like Google’s Googlebot) visit a web page by clicking on a link from elsewhere on the web. Essentially, these bots are endlessly visiting pages across the globe to discover new pages and revisit old ones to check if any changes have been made. This is how Google finds your website and all its various pages.

When the search engine pulls a page URL from the crawl queue, it will render it by taking the HTML, CSS and Javascript to assemble a representation of the page’s appearance. As Google’s various services and algorithms can’t see a page like we can, it must use the page’s code to understand how the page is appearing to users – what elements are at the forefront, which sections are hidden, which text elements and images are above, below or behind one another.

Indexation is the process whereby a search engine decides if your page should be stored to be served to any searchers to whom it may be relevant. Essentially, it’s a giant database full of pages which are related to certain search queries.

Finally, the ranking process is the sorting stage for all the indexed pages. In Google’s case, it uses more than 200 ranking factors to decide which pages it should serve to its users within the search engine results pages.

A holistic understanding of these processes is an important tool in any SEOs arsenal, as it can allow you to deduce which actions to take to allow each of these stages to occur more easily or for a page to perform better at any given stage.

Does Page Design & Layout Actually Impact Organic Search Rankings?

So, the question is, how do search engines use the information they gather from these various stages to understand layout and design, and how does this influence the final ranking process?

Ultimately, we can never be completely sure how this occurs, as most search engines are keen to avoid anyone having a total understanding of their technologies.

Fortunately, there are some clues we can go on from the world’s largest search engine, Google, and its staff, to help us understand just how creative decisions affecting a page or site’s appearance may impact the ranking process.

Below, you can find a discussion led by John Meuller (Senior Search Analyst & Search Relations Team Lead for Google and popular member of the SEO community). In this section of the interview, John is addressing a question from a viewer regarding changes to their website, discussing particularly the appearance of a site.

Here John is quoted as saying:

‘…Because sometimes, if you’ve been working on a website for so long, it’s like your baby. You know what parts are good and you’re very protective when someone comes to you and says it’s ugly or the colours are bad or something like that.

But sometimes that’s what you need to hear and sometimes those small differences do play a role in regard to how people perceive your website for example. So, if for example, you have something that is on a financial topic and people come to you and say “well, your information is OK, but it’s presented in a way that looks very amateurish”, then that could reflect how your website is perceived and in the long run could reflect something that is visible in search as well’.

So, we can conclude from this statement that the appearance or presentation of website content can have a knock-on effect on organic search visibility. With John’s focus here on a page looking amateurish, whilst still having content that’s ‘OK’, it suggests that appearance may have some relationship with the perceived trustworthiness of a site, which we know is a critical factor within Google’s search rater guidelines.

There are also other contributions from John over the years that give additional indications as to the connection between page layout and arrangement of text vs. image when it comes to Google’s rankings. Below, you’ll see John replying to a Twitter user’s question in regard to design changes:

As John quite rightly highlights, it’s almost impossible to separate your on-page content factors from creative considerations. Placement of headings, text and images in relation to one another all likely play a role in Google’s contextual understanding of page topic and are all ultimately influenced by a page’s overall design.

Furthermore, changes that impact site speed, such as image file size or the addition of JavaScript to achieve certain appearances or dynamic interactions, are known to have an effect on ranking due to Google’s insistence on pushing its core web vitals metrics.

We can get a better understanding of how Google views the placement of text and design elements from the following interview with John, where he discusses the relationship between heading elements and images:

Here John states the following when asked about how headings and other elements’ placement on page can influence Google’s understanding of a page’s content:

‘…but rather, what we use these headings for is, well, we have this big chunk of text or we have this big image, and there’s a heading above that. Therefore, maybe this heading applies to this chunk of text or to this image’.

Now, it’s clear that John is referring explicitly to HTML elements here (images contained within an <img> tag), which may or may not be within the remit of a designer/creative when it comes to a page’s appearance.

One thing is for sure though, at least in Google’s case, their comprehension of a page is affected by how we choose to make these elements appear on-page.

The final piece of evidence I’d like to raise in relation to overall page layout and SEO is Google’s 2012 Page Layout Update. Now, the page layout changes were intended specifically to target websites that were using an unfriendly design approach to presenting advertisements to users. Specifically, it penalised sites that placed ads ‘above the fold’ and made it so users had to scroll excessively to find the page’s real content.

Google even provided a handy image of what they consider to be a helpful layout (left) and an unhelpful layout (right) when it comes to ad displays:

While it’s certainly clear that this update is focused on ad-heavy sites, we can look at John’s comments once again for some additional clarity on the nature of this change:

This comment gives us a somewhat more nuanced view of this update, suggesting that it’s more about how difficult it is for users to find content on page, as opposed to a number of ads or a specific amount of scrolling required to find content.

The next part is speculation (as with a lot of things in SEO), but I think there’s at least some chance that Google uses similar technology to assess overall page design, not just ad placements), to evaluate how apparent and accessible content is. If Google cares about ads obscuring content, why would they not care about other page elements obscuring content?

Content & Design Considerations

While we’ve spent the first half of this article discussing the potential impact of design considerations on SEO, it’s safe to say that a modern and minimalist approach to web design is not the nail in the coffin for every website’s organic search aspirations. There are plenty of websites that perform well in organic search, despite being bereft of copy or much in the way of optimisation for organic search.

That being said, to really understand why the written content on a page matters, it’s important to take a quick look at Google’s language and meaning technology.

As we established during our explanation of search engine functionality, Google et al essentially work through the analysis of HTML, other code and text to understand context and appearance. A big part of this analysis is the evaluation of words and meaning, something that Google has become extremely capable at doing in the last 10 years.

Gone are the days of a simple keyword-driven algorithm that can be fooled by repetition of words. In 2023, Google uses a collection of highly complex language processing technologies and natural language processing (NLP) that gives it a sophisticated understanding of a writer’s or searcher’s intent and phrasing. Ultimately, this allows Google to grasp complicated concepts, entities and degrees of relationship between them. This field has given rise to an entirely new avenue of SEO called semantic SEO.

Now more than ever, Google values the presence of high-quality written copy on any and all web pages. The development of the aforementioned language technologies has made it possible for Google to accurately assess almost any search query and serve a suitable page in response, and this process relies to a considerable degree on the on-page written content. By limiting the quantity of content you’re able to place on a page or removing content for the sake of a ‘cleaner’ design aesthetic, you fundamentally limit the ability of a page to rely on this technology and thereby appear in organic search.

Design & SEO Synergy

So, how do we ensure that design and SEO efforts work in tandem to achieve the website that serves its intended purpose? Well, first we’ve got to establish what the desired function of most websites is. In general, we can break down the purpose of most websites into just a handful of desired outcomes:

  • Convey information or messaging
  • Persuade the user to take an action
  • Purchase a product

There are many factors that can come together to help us achieve these 3 overarching objectives, each of which is addressed individually by SEO and design, and which complement one another to greater effect. I’d argue that there are 4 key areas in which SEO and design meet to allow a website to achieve its purpose:

  1. Trust – a well-designed website that prioritises user experience and reflects modern web design best practice should reassure the user that it is a trusted source. Similarly, written copy that contains accurate and concise answers to search queries will likely offer an additional level of trust to readers and satisfy search engine quality/trust requirements for ranking purposes.
  2. Content – to give a website its best chance at appearing in organic search, it should ideally be designed to offer adequate space for content. Page design should not undermine SEO efforts, but work alongside the necessary technical and on-page factors to enhance SERP visibility – do not allow the design of a page to limit the ability to fit the optimal headings or necessary copy.
  3. Site Speed – striking the right balance between a quick site and a beautiful site is a difficult one. Although there are many things that impact site speed, it’s hard to argue that reducing the dynamic functionality of a site won’t benefit site speed. Thus, removing any technically heavy design features could be a good option. However, it’s also important to consider the impact of removing such functionality on user experience and trust. It’s undeniable that people like pretty things. The ideal balance offers the user a quick site that does away with excessive design features but maintains its pleasing and modern aesthetic.
  4. User Experience (UX) – design should enhance the presentation of content, making it easy to locate on page, and pleasant for readers to consume. Navigation should be simple and intuitive, drawing users towards the most valuable content on the site. The relationship between on-page elements should be immediately apparent.

Final Thoughts on The Relationship Between SEO & Web Design

So, we’ve gone through how search engines work, we’ve taken a look at some evidence from John Meuller on page structure and taken a peak at how Google understands our words. We’ve also mixed in a healthy amount of speculation and estimation.

What’s the outcome then?

It appears clear to me that there’s a high likelihood that page design, layout and other creative concerns are involved in the organic search ranking process.

It’s also clear that viewing design and SEO (and pretty much all other ‘things’ required to build a great site) can’t exist in isolation if you want a truly performant website.

The practical implications here are that the design and SEO processes are essentially reliant on one another, and that a close working relationship between creative leads and SEO leads benefits site owners and users alike.

Are you ready to discuss your website project? We’re a fully integrated agency, so we combine the design process with our development process to provide that perfect synergy for SEO success.

Tell us about your project…

What can we help you with?
This field is for validation purposes and should be left unchanged.