Common SEO Mistakes (and How to Fix Them with Design)

Default avatar.
December 11, 2018
Common SEO Mistakes (and How to Fix Them with Design).
SEO

is a complex matter and one that web designers and developers might feel is best left to copywriters and search professionals to handle. That makes sense since many common SEO hacks revolve around the manipulation of content and the tagging of it for search. Here’s the thing though: there are certain choices you make as a web designer that ultimately affect the search-friendliness of your website. Which means you should be involved in the diagnosis and repair of a website’s SEO mistakes.

Repairing SEO Mistakes with Web Design

A click-through rate (CTR) tracking study from Advanced Web Ranking reported the following data, from as recent as September 2018Advanced Web Ranking CTR What this shows is the likelihood of users clicking on an organic link based on its position in search Organic Search Listings As you can see, Google is already stacking the odds against your website by filling its prime real estate with paid listings. That said, the data above is proof that search users are willing to sift through paid promotions to get to the genuinely good website recommendations. The only thing is… How do you repair a website’s SEO mistakes so it can get to the top of search?

Mistake #1: Non-Responsive Elements

We’re operating in a mobile-first world which means websites have to be designed primarily for that experience. That doesn’t mean leaving desktop users out in the cold, but it does mean dotting your i’s and crossing your t’s to ensure that every element fits within the truncated space of a mobile screen. Running your website through Google’s Mobile-Friendly Test isn’t enough. Mobile-Friendly Test Sample Open your mobile device and walk through every page of your website. Does everything fit between the two edges of your phone? Are the buttons correctly sized and placed? Are images displayed in full and without distortion? If not, then start here.

Mistake #2: Usability Issues

If we’re talking about usability issues that are severe enough to cause a high percentage of bounces — which communicates to Google that your website isn’t worth ranking — start by looking at the navigation. Let’s use this one from Hearth Kitchen as an example: Hearth Kitchen Navigation As you can see, the navigation is clearly laid out in a horizontal row. Labels are clear and all pages are present — there’s nothing confusing or hidden. In addition, the header provides users with other information they’d instantly want from a website of this nature. Since users’ eyes tend to track in a Z‑pattern (starting in the top-left and working their way across), your navigation is the first thing visitors see and realistically might be to blame for a lackluster performance in search.

Mistake #3: Low Readability

Although visual content enhances comprehension as well as memorability of what’s on a web page, your visitors eventually need to read the words on it. When that becomes a struggle, websites suffer from short times-on-page and high bounce rates. Look, you know that your visitors don’t have much of a patience for anything these days. The least you could do is make the reading experience easy for them. Has your website’s content violated any of these rules? 

  • Typefaces are black (or nearly black) on a white background.
  • Fonts are in the serif or sans serif families (i.e. be careful with decorative fonts).
  • The smallest font size should be 16 pixels or larger.
  • Lines are between 50 and 60 characters.
  • Paragraphs contain no more than 3 or 4 lines.
  • Images or lists break up large chunks of content (like I’m doing here).
  • Headers enables readers (and search bots) to more quickly decipher what a page is about.
WebDesignerDepot ArticleWebDesignerDepot

does a great job of adhering to these principles, so if you’re looking for inspiration on how to make content readable, start here.

Mistake #4: Bad Pop-Ups

Everyone hates an ill-timed, irrelevant, or pushy pop-up. Google has even gone so far as to penalize mobile websites that utilize what it deems to be bad and intrusive pop-ups. So, here’s what I’m going to say: Utilize the least amount of space possible for your pop-ups.  Yotel has a fantastic example of this on its desktop website: Yotel Pop-up And, if pop-ups need to appear on mobile, relegate them to a top or bottom banner. It keeps your promotional message out of the way.

Mistake #5: Overweight Images

Google rewards websites that are fast — and we’re talking load times under three seconds. While there are a number of things developers can do to get loading speeds under control, designers should look at images to improve performance and SEO. Specifically, look at file size.  There is only so much room an image can occupy on a website, especially in this age of mobile-first. So, why use a file that’s 12MB when it’s only going to show up as a thumbnail in the site’s news feed? I’m not saying you should stop using oversized high-resolution images. Just be sure to resize and run them through a compression software like TinyPNG to ensure you’re not overloading your web server. TinyPNG Savings

Mistake #6: Text Inside Images

There are two reasons why text inside images is a bad idea for SEO. The first has to do with readability. Think about what happens when text is laid atop an image. If there’s a distinct contrast between the two, readability should be fine. But what if text is placed over an otherwise mundane part of an image on desktop? On mobile, it shrinks down and may end up appearing over a busier and more distracting part of the photo. Then there’s how the text is added. If text is pasted into an image file, search bots won’t be able to detect it. If your copywriters wrote that particular string of text with a search keyword embedded in it, you’ve just removed it from Google’s view. Instead, you should work with your content management system to add text using custom fields meant to go on top of images. In my opinion, it’s best to stay away from text on images unless you can ensure uncompromized readability and that Google bots can read it. Culture Trip shows how this can be done: Culture Trip Text 1 It also has links lower on the page where the text is removed from the photo altogether (which I think looks even better): Culture Trip Text 2

Mistake #7: Lack of Trust Marks

The last mistake has to do with security. This is something Google cares about greatly, but a lot of it falls to a web developer to implement. To do your part, find opportunities to include trust marks to boost the confidence of visitors as they travel around your website. Uncommon Goods includes a number of these at the bottom of the site: Uncommon Goods Trust Marks Trust marks may differ based on your website’s business type, but they do exist. Anti-malware software. SSL certificate. Secure payment gateway. These are the kinds of symbols that put your visitors’ minds at ease and allow them to stay longer and convert.

Wrap-Up

Now that you know some of the more common SEO mistakes caused by web design, be sure to account for them in your workflow going forward. You’d be amazed what improved performance, security, and usability will do for a website’s ranking!

Suzanne Scacca

Suzanne Scacca is a freelance writer by day, specializing in web design, marketing, and technology topics. By night, she writes about, well, pretty much the same thing, only those stories are set under strange and sometimes horrific circumstances.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…