How to improve SEO with web design

Illustration by Anita Goldstein

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 an 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

1. Design for mobile-first indexing
2. Remove the friction from conversion
3. Use logic and order when designing the navigation
4. Carefully structure each page
5. Manage each page’s search appearance
6. Use structured data when possible
7. Optimize images for speed
8. Never stop A/B testing

When you build 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.

Google Search Console tells us when Googlebot Smartphone mobile-first indexing is live.

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.

An intuitive online form removes friction and encourages conversion.

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.

A simple and predictable navigation menu.

4. Carefully structure each page

Page structure is essential for two reasons:

1. Scannability — so that visitors and Google can quickly determine what the page is about.
2. 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):

Why header tags are so important

When it comes to adding text to a web page, you don’t want it all to be paragraph text. It’s too difficult to read a wall of text without any visual breaks. This is one reason why header tags — like H2, H3, H4, and so on — are important.

But when you use headers while designing a page, it’s not just about adding a larger and stylized piece of text. They actually have to improve how easily the content can be scanned and understood by search engine bots.

So, the first thing to understand is how header tags help a web designer create a sense of hierarchy on the page.

Header tags help give structure to a blog post.

Let’s say you’re designing a web page that details the social media marketing services of an agency. The header tags might look like this:

<h1>Social Media Marketing Services</h1>

<h2>The Value of Social Media Marketing for Business</h2>

<h3>Increase Your Brand Visibility</h3>
<h3>Grow Your Authority and Become an Influencer in Your Space</h3><h3>Build a Community Around Your Brand</h3>

<h2>Social Media Marketing with Agency X</h2>

<h3>Social Media Strategy Development</h2>
<h3>Social Media Content Creation</h2>
<h3>Social Media Ad Campaign Management</h3>

<h2>Let Us Manage Your Social Media Marketing</h2>

The H1 tag is the title of the page. The H2 tags are the primary topics. The H3 tags are sub-topics of the corresponding H2s. Deeper analyses would use H4 and H5 tags as well.

There are billions of websites online, so it’s not as though Google bots can read through the content of each page and rank them based on that.

Instead, it uses header tags to get a summary of what was written. These tags also help those indexing bots figure out whether the content is properly organized and if the topic has been fully unpacked (based on other high-ranking pages for the same subject).

Of course, there’s the user experience to think about as well.

For longer pages, header tags are useful for establishing clear breaks in the text as well as sending signals to visitors when a change in topic (or moving into a sub-topic) is coming. Header tags are also helpful for web accessibility, enabling visitors who use screen readers to get a high-level overview of the page before diving into the content.

Other page structuring tips

There are other things you can do to give your content a more user-friendly structure, which encourages visitors to read more and, eventually, inspire them to take action:

• Use no more than two fonts to style the content on a page. This’ll keep visitors from feeling overwhelmed and their eyes from getting fatigued.
• Set the minimum font size to 16 pixels. This isn’t just necessary for readability, but also for accessibility so that all visitors can easily read your content.
• Include enough header tags to make the text scannable. This depends on how long the page is, but every couple hundred words is a good place to drop a header tag.
• Use bold and italics to call attention to important words or sentences. If there are certain words or phrases that need to be called out, stylize them with bold or italics.
• Use special callouts to highlight paragraphs. Highlight longer segments of text with special callouts, long quote blocks or click-to-tweet boxes.
• Break long paragraphs and sentences up. Your goal should be to keep your paragraphs to no more than three or four lines on both mobile and desktop.
• Turn lists into bullet points. If your writer has listed out a number of points in the text and it makes sense to do so, turn them into a bulleted or numbered list for easier reading.
• Include relevant images. Complementary visuals are useful for increasing comprehension as well as keeping readers engaged even when there’s a lot of content.

5. Manage each page’s search appearance

One of the first things we learn about how to improve SEO is search metadata.

While it needs to be paired with high-quality content and design, adding metadata to your content can really help improve a website’s visibility and ranking in search.

Although you won’t be responsible for writing metadata (most of it, anyway), you’ll be the one implementing it. So, it’s important to know what to include and how it plays a role in search.

There are two pieces of metadata that actually show up in Google search results:

• The title tag is also the H1 tag on the page. This is what appears as the title for the web page in search results. It should be under 60 characters.
• The meta description is what accompanies the title tag in the search results for the page. It should be under 160 characters.

Here’s how they appear in search results:

A title tag and meta description on search results.

As you can imagine, if these aren’t well written — and that includes staying under the required character limits — visitors might ignore a web page if it looks sloppily put together in Google search results.

Here are some general metadata rules to follow:

• Make it unique. You don’t want the pages on your website to compete with one another in search.
• Make it descriptive so searchers can easily make up their minds in Google if your page is worth clicking on or not.
• Make sure the focus keyword is included in the title, description, slug, and the first image on the page.

The focus keyword is the main word or phrase that a page is written around. Again, this is all about sending the right signals to Google as well as your visitors. If you can repeatedly convey to them that this particular keyword/topic is the central argument of the page, your chances of ranking for that focus keyword (as well as related keywords) will go up.

On a similar note, let’s look at how the slug and featured image factor into SEO:

The slug isn’t technically a piece of metadata. It’s the part of the URL that describes the specific page someone is on. Like this:

A slug is the end of a URL, referring to a specific web page.

While the slug doesn’t appear in search results, it does have an impact on how well the page ranks for the search topic. It should contain the same focus keyword as the title and description (so it’s consistent in conveying to Google what the page is about) and be short in length, but descriptive.

All images on a page should come with alt text. Basically, it’s a description about what’s happening in the content. The primary image on the page should include the focus keyword as part of its metadata, and provide a nice complement for the overall topic.

Alt text is a written description of a photo or visual on a website.

So, alt tags really do three things for us:

• They give Google more information about what a page is about.
• They give a page the chance to rank in Google Images as well as in regular Google search.
• They’re useful for accessibility since they clearly describe the content of the image.

One more thing:

Add metadata to every page, post, and product on your website. And if you run a blog or eCommerce site, remember to add it to your category pages as well. According to a presentation at SMX West 2020, category pages tend to rank for more keywords than sub-topic or product pages do on their own.

6. Use structured data when possible

The same Backlinko study I mentioned earlier also found that a quarter of all searches take less than five seconds to complete, while half of them take up to nine seconds.

So, it’s safe to assume that searchers are more likely to click on Google’s special SERP (Search Engine Results Page) features than organic results further down the page. These include:

• Featured snippet callout
• Top stories
• “People also ask” box
• Local Maps results
• “Images for” results
• Video carousel results
• Knowledge graph
• And more

While you can’t guarantee a top spot in search results unless you pay for a Google ad, you can work towards improving your chances of ranking by including structured data within your pages.

Structured data is similar to metadata in that it’s something you write into the code behind the scenes of a website. This structured data then gives search engines a special look at the content of the page.

For example, this is a featured snippet result that appears in a search for “what is Editor X”:

A featured snippet shows up at the top of search results.

This obviously isn’t your ordinary search result and is going to demand more attention because of its unique appearance. Now, Google can try and piece something like this together if header tags are properly used on a website. However, web designers can help Google out by also adding structured data that spells it out.

You’d write a “how to” snippet for search by organizing your schema markup with the help of tools like Schema.org, or with organized page structure such as headers, lists and bullet points.

Featured snippets can take on different forms:

• “How to” steps
• Image or video featurettes
• Information for a local listing in Google Maps
• Or some other highlight from the page

7. Optimize images for speed

For years, we’ve known that loading speed affects page rankings. And it’s not just because Google believes that websites should load quickly.

It’s because nearly half of all consumers don’t have the patience to wait more than a couple seconds for a page to load.

When we look at the assets that slow down a web page, images tend to be one of the biggest culprits.

But what can you do about that? It’s not like you can — or should — build a website without images. We already know how intimidating a lot of text can be for visitors, and images provide much-needed relief while also improving comprehension of the subject matter, on top of playing an important role in the page’s visual language.

A so-so loading speed score from Google PageSpeed Insights.

So, how do you improve SEO if you can’t compromise on images?

Here’s what you should do:

• Use images that contribute to telling your story in a consistent way while also supporting the overall message and mission of the site.
• Use lightweight image formats. WebP is best since it’s a lightweight format that compresses down smaller than any other image type. However, it isn’t compatible with all browsers. SVG and JPG are lightweight options you can use as a backup.
• Resize your images to fit their use of the page, especially if you only need a thumbnail or small image.
• Compress images to the point where their quality is optimally preserved, but the file sizes are lighter and much more manageable.

For some websites, you may also need to move your image files to a CDN using proxy servers and data centers (like news or eCommerce sites, where new images are added every day). By hosting them on your CDN, you’ll give your website’s server a break and help everything else load faster.

8. Never stop A/B testing

When someone wants to know how to improve SEO with web design, the seven tips above are non-negotiable. They respond to Google’s and consumers’ major complaints when it comes to websites in terms of quality, mobile-friendliness, speed, etc.

However, there’s so much more you can do as a web designer to improve your website’s ranking.

With A/B testing, you’ll take a calculated and incremental approach to both search engine optimization as well as conversion rate optimization.

By targeting areas of websites that are typically fraught with friction, you can slowly but surely improve the user experience and watch as bounce rates drop and page rankings increase.

You can also use A/B testing to help already successful pages perform even better in search and with visitors.

You might experiment with:

• Typography — Perhaps new fonts will make a page more readable?
• Photos — Do your visitors respond more positively to photos with people in them as opposed to abstract imagery?
• Forms — Are there certain non-required fields that never get filled in and are just wasting space?
• Buttons — Do your CTA buttons need to be a different color or size in order to get noticed more?

Don’t be afraid to start with the smallest of website elements. You may be surprised at what a big difference minor tweaks make to the overall performance of your website.

Regardless of where and why you actually need to use it, just make sure there’s ongoing A/B testing (one test at a time). This’ll keep SEO top-of-mind for you and your team and will ensure that your website never fails to impress Google or its visitors.

Bridging the gap between SEO and web design

I think the biggest lesson we’ve learned here is that you don’t have to sacrifice good design for SEO. In fact, a lot of these SEO design strategies will help you create more streamlined and user-friendly experiences while boosting your website’s visibility in search. It’s a win-win really.

There’s just one last thing I want to leave you with:

When it comes to the matter of how to improve SEO with web design, the trick is to put yourself into the shoes of your target audience.

That’s exactly what Google does when it decides what makes a website rank-worthy. If you take an empathetic approach to designing websites, you’ll naturally end up making design choices that are SEO-friendly.