_webp.png)
As a consumer, you’re familiar with Google’s search algorithm and how it works. You type in a search query like “beauty salons near me” and Google instantly spits out thousands of matching web pages.
Usually, you don’t need to go past the first page because the algorithm does a good job of matching your search intent with high-quality web pages. In the case of “Brooklyn beauty salons”, for example, Google would show you:
Paid ads for local beauty salons
Maps results showing you where exactly top-rated beauty salons are located as well as pointing you to their website so you can learn more
And organic (non-paid) search results
In order for people to keep using Google, search results need to perfectly match what the searcher is looking for. This means Google will only put the highest quality web page matches on the first page of search results.
A lot of this is contingent on how well the content is written. There are many practices that writers and SEO experts can do to set up content so it ranks well, like keywording and link building.
While as a designer, your primary responsibility is to craft a web design with attractive UI and an intuitive UX, it can’t come at the expense of SEO. So, you need to start thinking about how the design, format, and even code of a website will impact your pages’ performance in search, too.
How to improve SEO with web design
Design for mobile-first indexing
Remove the friction from conversion
Use logic and order when designing the navigation
Carefully structure each page
Manage each page’s search appearance
Use structured data when possible
Optimize images for speed
Never stop A/B testing
When you think about how to design a website for a client or employer, what’s the primary goal? It’s not just so they have an attractive landing page to send interested prospects to (though a website is useful for that as well).
More often than not, companies have you build them a website because they want to increase their visibility online. More specifically, they want you to help them solve this problem:
“How do we get to the top of Google?”
A recent study by Backlinko reports that only 0.44% of Google searchers click to the second page of results.
And an Ahrefs search traffic study found that 90.63% of web pages receive no traffic from Google.
So, creating a website that helps your client beat these odds is critical. This can be done with the help of SEO, or search engine optimization.
That said, the search optimization strategy for a website is usually managed by writers, SEO experts, and other marketing team members. Not the web designer.
The truth is, however, that the choices that web designers make have a big impact on how well a website performs in page rankings. So, rather than wait for your SEO person or writer to hand down instructions on how to better optimize the site you designed, why not learn about SEO practices that are tied together with web design, which you can do to help your clients improve their online visibility?
In the following guide, we will show you how to improve SEO as a web designer. We’ll explore eight tips for striking the right balance between good design and effective SEO.
1. Design for mobile-first indexing
In 2019, Google made the switch to mobile-first indexing for new websites, and existing websites were also making a gradual move.
Starting in September 2020, mobile-first indexing became the default method for all websites.
So, what does this mean for you as a web designer?
First and foremost, it means that every website should have a responsive design, and that users’ experience remains consistently excellent across all devices. More than that, though, you need to design the mobile experience first, since it’s the one that affects the website’s ranking.
In the past, designers would create a scaled-back version of the website for mobile visitors (or just not pay much attention to it at all). According to Google, that’s a big no-no though. Instead, your mobile and desktop versions need to have identical content.
What’s nice about approaching a website from the mobile experience first is that it encourages designers to start with the essentials and then build out from there. This way, it’s easier to create something that’s usable (which is incredibly important for SEO) before you start throwing in any bells and whistles.
2. Remove the friction from conversion
Design missteps can create a lot of frustration for website visitors. It doesn’t take much for them to abandon a site rather than spend time trying to figure it out, which shouldn’t be their responsibility anyway.
If your website is difficult to navigate, key performance metrics like bounce rate, time-on-site, pages visited, and so on will drop, which would hurt the site’s chances of ranking.
Of course, quality UX writing is also super critical in crafting friction-less user experiences. That’s why it’s important to collaborate with your writer when you work on a website. However, design is just as important for usability and having a clear path to conversion.
Consider the following tips for a conversion-oriented design:
Only place the most important pages in the top navigation header. Everything else can go in the footer or within internal links.
Include only one CTA at a time. Make it perfectly clear what the offer is and where users will go when they click the link.
Shorten the pathway to conversion. That doesn’t mean removing supporting pages from the site, but it does mean simplifying the path from entry to conversion when visitors are ready for it.
Design simpler forms. If you’re asking for more than just basic contact information, break the form up into multiple steps and pages with a progress bar.
Remove all distractions when asking a visitor to convert. On key pages of the site, keep things like ads, pop-ups, and website animations out of the way so visitors can focus on what you’re asking them to do.
3. Use logic and order when designing the navigation
A well-built navigation will help you with two SEO-related matters:
First, if Google can’t find your pages or see how they all tie together, it’s going to be very difficult for it to determine whether the site is worth ranking. So, it’s going to need a clear view of the information architecture of your site.
Second, if visitors can’t figure out how to get the information they need or to take the action they desire, don’t expect them to stick around for very long. That said, a simple and predictable menu will ease their travels around the site.
When designing your navigation and the ensuing sitemap, keep the following things in mind:
Place the navigation menu where visitors are expecting it (e.g. to the right of the logo). Predictable placement gets them quickly to where they want to go.
Hide the mobile navigation under a recognizable hamburger icon. You might also want to include the word “MENU” in small print below it to let them know exactly where it is.
Give each page a short name that’s easily understandable. So, the About page would be “About” or “About Us”, not “About Our Company”. Keep it simple.
Logically order the pages from left to right in your menu. In other words, if people visit the Services or Locations pages before they go to Contact, they should be listed first.
Don’t go beyond two or three levels in the main menu. Anything above that creates difficult-to-navigate “mega” menus.
Make sure the hierarchy from the first level to subsequent levels makes sense. So, if you have secondary pages like “News” or “Careers” page, they belong under a relevant primary menu like “About”.
Use breadcrumbs in the top-left corner of the page if your site goes deeper than two levels of pages. Breadcrumbs help visitors retrace their steps if they don’t want to go all the way back to the search.
Include a search bar to the right of the navigation. This way, visitors who know exactly what they’re looking for or simply have a question, can use this shortcut.
You’ll have plenty of opportunities to be creative when designing a website. The navigation, however, is one place where you need to play it safe.
4. Carefully structure each page
Page structure is essential for two reasons:
Scannability — so that visitors and Google can quickly determine what the page is about.
Readability — so that visitors are encouraged to read the page all the way through, rather than just scan through it.
Let’s look at how you can use header tags to let Google’s indexing bots know how nicely your pages are structured (while also telling them what the page is about):