How Web Design Affects SEO – Design Do’s and Don’ts

Technical SEO , Digital Marketing , Article , Website , SEO

Creating a website that not only looks stunning but also performs well in Google is an art form. However, it is possible to get a perfect harmony between user experience, design and search engine optimisation and for success in today’s digital landscape it’s important to strike the right balance between aesthetic appeal and technical SEO finesse. 

So read our Web Design Do’s and Don’ts to guide you through the intricate web of design choices, ensuring your website shines in both form and function.

How web design affects SEO 

Web design is not just about aesthetics; it can be a powerful driver of SEO success. As such, the way a website is designed can have a profound impact on its performance in search engine results. 

Search engines like Google, prioritise user experience and usability in their ranking algorithms. A well-designed website that is easy to navigate, loads quickly, and provides a seamless browsing experience is not only beneficial to Users but also aligns with search engine ranking criteria. On the other hand, a poorly designed website with slow loading times, complex structures, and broken links can negatively impact rankings and turn away visitors faster than you can say “conversion”.

In essence, web design and SEO are inseparable partners on the digital stage, with a well-crafted design serving as the foundation for effective SEO strategies. It is always best to engage an experienced SEO Specialist as early as possible in the design process to avoid any negative elements being bedded into a new website. 

SEO Web Design Do’s and Don’ts 

As you embark on a new site design, we lay out some do’s and don’ts to keep at the forefront in the process. 

It is important to remember that we are approaching this from a purely SEO perspective but ultimately we want to meet in the middle of great UX design & good SEO. 

So without further ado..

Design Do’s

  • As Michael Scott said, keep it simple stupid. We need the website to be easily ranked more than we need it to do animations. Smart, slick design: yes. Huge, heavy JavaScript animations and features on the homepage that slow it down: dead on arrival. It’s so important we’ve got a whole section on it below – keep reading! 
  • Use human readable URLs e.g. [COMPANY].co/roles/software-engineer, [COMPANY].co/resources/why-you-should-hire-a-remote-team/
  • Use subfolders. Subdomains can serve a purpose but they are seen as a separate website in Google’s eyes so it divides your authority across however many subdomains you choose to have. Apple’s uses subfolders for their huge number of locations and international SEO. So, if they can use subfolders, so can you.
  • Ensure that each page will only contain one H1 heading. 
  • Get your images right. 
    • Convert all images to WebP or AVIF
    • Compress all images before uploading 
    • Do not upload huge images, review their size
    • Lazy-load all images 
    • Set height and width attributes 
  • Ensure all internal links use a href attribute instead of Javascript on-click etc. This means Google can ‘see’ internal links in the HTML of the page without requiring rendering. This will make the site easier to crawl. 
  • Remember that hamburger menus add an extra click for desktop users – so if desktop users make up a significant proportion of your users, beware. 
  • Link to key pages in the footer of the website.
  • Review all plugins/third-party apps that will be used on the site for unnecessary code.
    • Only use scripts on pages that will actually use them, don’t put them across the whole site as standard as this can cause massive bloat.
  • Test for performance during the build process.
  • Ensure that all resources that are essential for the page load are prioritised, anything else should be deferred until the page is loaded.
  • Use breadcrumb schema: helps users and search engines to understand where they are in the site, and is a great way to add internal links that are important for spreading PageRank around the site.
  • Ensure that schema markup can be injected into individual pages. 
  • Make sure pages are easy to read and scannable. 
  • Use accessible fonts, colours and features. 
  • Map out the user journeys you want to create and use this to inform site structure, an SEO agency can help with this. 
  • Ensure buttons are easy to press on mobile.

Design Do Not’s

  • Use a carousel: https://shouldiuseacarousel.com/ 
  • Use heading tags on footer buttons, share buttons or elsewhere.
  • Hit users with a pop-up on the first page. Let people take their shoes off, make their way around and see if they like the vibe before asking for their details. Intrusive interstitial pop-ups are not recommended and can actively damage site performance. Same goes for a chatbot – its good to have that help there, but let people visit a couple pages before you ask if they need help. No one needs help in the first few seconds of landing on a website.
  • Use non descriptive anchor text on links e.g: click here for more – this is particularly bad for web accessibility.
  • Stuff keywords into your website copy. 

Keeping it Simple

Probably the most important point of the above. 

Our biggest challenge in SEO is having to try and get pages that were not designed to rank, to rank. 

You want to create a memorable experience and you want your website to stand out. Lots of people think that means creating a super flashy website that does crazy animations, or some kind of application where the homepage changes as your mouse moves around it and there’s a giant video playing in the background.

There is now so much of this design noise. We think the websites that stand out today and are memorable for the right reasons are the ones that allow you to achieve what you’re trying to do with consummate ease, without being hawked by pop ups and chatbots, without feeling like you are on the end of a hard sell.

If someone can land on the site and very easily navigate their way to our informational content, or towards a jobs board, or towards a case study/credentials page, make their way back and explore all the different avenues we are creating on the website: that’s what gets engagement, traction and conversions.

So if you have no need to create a flashy website, it should look smart but above all else it needs to solve the problems your audience has, and it needs to be as easy as possible to use and navigate. 

SEO 🤝Web Design, Find An SEO Agency 

It’s crucial to highlight the indispensable role of an SEO specialist in the web design process. To achieve the delicate balance between standout design and top-notch SEO, having an expert who understands the intricacies of search engine optimisation is paramount. By involving an SEO specialist from the get go, you can be confident that your website not only engages users but can also actually be found in search. Want your website design and SEO to converge seamlessly? Get in touch with our expert SEO team today. Or learn SEO yourself with Hawk Academy.