Report a bug

SEO Web Design: A Guide For Designers

Victoria Greene

Digital marketing and ecommerce nerd who enjoys nothing more than helping brands expand their reach to meet new business goals.

Web designers sometimes fail to realize that SEO isn't just something that gets bolted on after you're done making everything beautiful. SEO needs to be built into the design process to get the best results.

Design and SEO go hand-in-hand – here's why and how you should build SEO best practices into your work. Web designers who 'get' SEO will ultimately make more profitable and more successful websites.

How search engines work – and why it matters for design

Unless your clients invest in a lot of paid advertising, organic search will likely be their biggest and most sustainable source of traffic. The quality of the website you produce will determine rankings and have a big impact on the SEO and content work that will go on after you.

As a web designer, it's important to have a solid grasp of how search engines actually work if you want to get the best results for your clients. Your decisions have an impact. When you know how they work, you can do your best to build a website that'll be easy for search engines to understand.

Search engines must be able to 'read' a website to understand the content and rank it accordingly. Presenting a website in the most SEO-friendly way takes some planning – it requires a structured approach that makes sense for the business and its products or services.

The way that you set up the website from an architectural point of view will impact how well the website database and content can behave from a search perspective.

You need to implement a website design that's:

1

Logical with a strong menu structure (leading to well-planned URLs)

2

User-friendly with strong UI and UX

3

Not bloated

4

Uses SEO-friendly features (less Ajax, JavaScript, etc.)

Additionally, factors like speed and mobile-friendliness have an important role to play. The best websites satisfy users and search engines equally and don't let web design get in the way of usability or speed.

Common SEO mistakes designers make

Let's begin by looking at what web designers frequently miss or get wrong, so you can be sure you're not making the same mistakes with your web designs.

Headings – I'm talking about H1s, H2s, and H3s. It's quite common to see a web page with several H1s – or none at all. Designers often come at headings from an aesthetic point of view: if the headings look nice as H1s, does that matter? As a rule, there should only be one H1 per page, with the rest of the headings broken down into H2s, H3s, H4s and so on.

Flash – Flash was once very popular, but it's a disaster for search engines. If you must use Flash, limit its use to small, inconsequential design elements. Important, keyword-rich content should never be shrouded in Flash – or search engines simply won't see it.

Javascript menus – Javascript navigation menus are cool, sure. But search engines can't read them, which means it's harder for them to make sense of the website's structure. Remember, the easier you make it for search engines to do their job, the better.

Lack of competitor research – Look at the top sites ranking in your client's niche — what design choices have they gone for, and why? Knowing that written copy is important for search engine rankings — how much space have they left for content? It's common to see very paired-back sites that look nice, but that ultimately fail to make an impact in search engine results. Make sure your design allows your client to be competitive. It will also ensure that there will be no expensive 'SEO fixes' that go on after your web design has been launched.

Poor migrations or design upgrades – You might have just made the site look better, but you could have just as easily decimated the site's SEO rankings. An old website may enjoy really great search rankings, and taking away content, changing the URL structure, or botching the migration could see all that traffic disappear overnight. Always ensure that a design upgrade improves the current SEO standing and change the content as little as possible.

Subdomains, frames, AJAX – These are just some of the ways that designers build sites that aren't search-friendly. If possible, try to stick to HTML as much as you can and don't take too many shortcuts with your coding. A clever plugin may save you some time, but be sure that it checks out from an SEO perspective.

It's not just about Google – it's also about users

Search engines are in the business of constantly updating their algorithms to provide the best results for users. Not only the most relevant results, but also those that provide a good user experience. Websites with poor user experience tend to have a higher bounce rate, telling Google (or whichever search engine) that the website didn't meet users' expectations.

In this way, usability has an indirect but noteworthy effect on how search engines determine quality. All this means that you can't craft a website around search principles alone – you must also consider how it'll be perceived by users and make the experience as easy and pleasant as possible. A great user experience also encourages sharing, bookmarking and more inbound links, which is always a good thing.

So how can you ensure a website appeals to visitors? Just a few things to consider are ease of navigation and internal search functions, high-quality imagery, fast page load times, a simple, consistent page layout, and mobile display.

Form entry or design is where usability can easily break down, so make sure you test yours. Make it as simple as possible

Think about accessibility too — font size and colors can have a big impact on website engagement figures

Streamline. Don't ask too many questions from the user — think about the commercial journey and don't make them think too much!

Website navigation best practices

A website's menu structure has the power to improve your search rankings, leads, and conversions – and conversely, to hike up bounce rate and frustrate users if handled poorly. Web designers should dutifully abide by best practices for website navigation design wherever possible, such as using descriptive labels, limiting menu options, and avoiding drop-down menus where possible. Navigation design is where you can have a big impact, so take this part of the design seriously.

Dropdown menus are bad for users and bad for SEO — but if you do resort to one, make sure it's in HTML and that it's designed based on user experience and usability, not just aesthetics.

This complex submenu and menu overlay on Boots.com makes navigation complex for the user, and potentially confusing for search engines as well. Not a very user-friendly menu design at all.

Amazon has a huge product catalog, but they have managed to create a more user-friendly (but still text-heavy navigation system):

The real strength of Amazon is its stellar search function that allows users to quickly follow breadcrumbs and find nested categories based on search results.

Focus on the universal navigation, but allow for multiple menus as well. This example from Book Depository is a good example of how curated lists can make for good secondary menus:

On the other end of the design spectrum, Hootsuite have opted for a clean and simple main navigation that highlights the commercial call-to-action:

It's a very clear, non-obtrusive menu that keeps the core focus on the user's next steps.

Think about your web design in the same way — you want the main navigation to work in conjunction with the header image, CTA, and user journey. It's like the skeleton holding everything together, so spend time testing and tweaking it.

Site structuring

From a site structure perspective, try to map out all the website sublevels and folder directories from day one so that you have all the essential website building blocks to hand. These will massively influence the site's URL structure, which has a big impact on SEO. Don't let the way you've designed the site create unnecessary subfolders and complexity.

Remember, the fewer page levels you have, the better, so where possible, consider condensing multiple pages into fewer pages, and don't be afraid to create standalone landing pages for social or promotional purposes.

It's best to map out your designs in an incremental way, starting from the homepage and landing page, cascading to category and blog pages. This means that logic will be very strongly built into your designs.

Mobile-friendly design is a must

As a web designer, you hardly need to be told about the importance of mobile-friendly design, but it bears repeating on occasion, as many websites still get it wrong. Again, this all comes back to usability. Brands that offer an exceptional mobile experience will have a considerable advantage as user behavior shifts en masse towards mobile devices.

There are three approaches to mobile web design: separate URLs, dynamic content, and responsive design. Google helpfully offers a number of tools you can use to test a website's mobile usability, Search Console being one of them. Speed is critical on mobile too – most users will leave a mobile website if it takes more than three seconds to load. Bear in mind that mobile data networks are not always as swift as Wi-Fi.

Website builders like Shopify and Squarespace come with templates that are already mobile-responsive. It's now even easier for users – and clients – to do this for themselves. As a web designer, it's up to you to match and build on what out-of-the-box solutions are offering. A mobile-first design might make sense for your client and niche.

Google has stated on various occasions that responsive design is their preferred mobile configuration, which is worth bearing in mind if you're just starting out on a new design project. Some speculate that responsiveness is a ranking factor in itself.

Useful SEO tools for designers

If you're a web designer looking to improve the SEO value of the websites you design for your clients (and if you're not aiming to do that, why?) then here are some tools you may find useful.

BROWSEO – a web app that allows you to view any web page without distractions caused by styles. Essentially, how a search engine sees your website

GTmetrix – gives you insight on how well your site loads and provides actionable recommendations on how to optimize it

Website Responsive Test – use this to test your website's responsiveness across multiple devices with different screen sizes instantly

ScreamingFrog - crawl an existing site like a search engine spider and get a feel for the site's indexation and structure. Will help with planning a re-design and talking to developers and content teams.

One of the key motivators behind getting better at SEO for designers is a deeper understanding of the commercial aspects of websites. By knowing more about the wider web industry, you will be able to create killer designs that implement positive change.

Don’t worry! Just fill in your email and we’ll send over your password.

Are you sure?

Please pick the project to work on

Personal demonstration

Serpstat is all about saving time, and we want to save yours! One of our specialists will contact you and discuss options going forward. These may include a personal demonstration, a trial period, comprehensive training articles & webinar recordings, and custom adivce from a Serpstat specialist. It is our goal to make you feel comfortable while using Serpstat.