How to improve SEO with web design

A plastic bag with different stickers and items relating to the field of SEO
Illustration by Anita Goldstein
  • 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
Google search results including paid ads, Maps and organic results

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

1. Design for mobile-first indexing

A mobile website design and it’s indexing crawler on Google Search Console
Google Search Console tells us when Googlebot Smartphone mobile-first indexing is live.

2. Remove the friction from conversion

  • 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 newsletter sign up form in a website design
An intuitive online form removes friction and encourages conversion.

3. Use logic and order when designing the navigation

  • 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.
A fullscreen navigation menu in a website design
A simple and predictable navigation menu.

4. Carefully structure each page

  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.
Header tags in a blog post, starting with H1 for the title, H2 for the subheader, and followed by the body text.
Header tags help give structure to a blog post.
  • 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

  • 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.
A title tag and meta description on Google search results
A title tag and meta description on search results.
  • 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.
A slug is the end of a URL, referring to a specific web page.
A photo of two hands holding and reaching for and Alloy Beauty product, and alt text describing it
Alt text is a written description of a photo or visual on a website.
  • 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.

6. Use structured data when possible

  • Featured snippet callout
  • Top stories
  • “People also ask” box
  • Local Maps results
  • “Images for” results
  • Video carousel results
  • Knowledge graph
  • And more
A featured snippet to the query ‘what is editor x’
A featured snippet shows up at the top of search results.
  • “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

A screenshot from Google PageSpeed Insights showing a score of 65.
A so-so loading speed score from Google PageSpeed Insights.
  • 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.

8. Never stop A/B testing

  • 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?

Bridging the gap between SEO and web design



Shaping Design is a publication from Editor X. We cover a wide range of creative fields at the intersection of design and technology, predominantly web design and UX.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Suzanne Scacca

By day, I write about technology and business. By night, my mind goes to very strange places. You’ll discover some of those oddities here.