The Biggest Mistake Most Small Businesses Make on Their Website

Consider this a Website PSA. Or maybe an intervention. Some tough love from one caring, small-biz owner to another.

It’s not meant to be mean, and it’s not meant to hurt your feelings. I want you to succeed. I want you to have the best, most amazing website you can possibly have. But darling, it’s quite possible your website has a major problem. And you might not even realize you have a problem.

You see, it’s the kind of problem that hides in plain sight.

It looks really good.

And a lot of other people do it, so it can’t be that bad, right?

Wrong.

The problem? You’re putting your text in images.

I see this every single day. On all sorts of different websites. Coaches, designers, marketers, even fellow web developers have been known to do this.

It’s easy to see why it’s such a popular tactic. Creating images out of your text gives you 100% creative control over its display.

It allows you to be creative with your copy, and do something “unique” and “on brand”, without having to know any code. Which means it’s an easy way to create eye-catching pages without the need for a developer.

But there are some major problems with this approach to design.

It’s Not Google-Friendly (aka It’s Horrible for SEO)

Everyone knows that SEO is important. If people can’t find you on Google, your business might as well not exist.

When people talk about SEO, they usually focus on your content – making sure it’s relevant, making sure your keywords are where they should be, writing good copy aimed at people, not bots, etc. But the way your website is built, and the way that your content is displayed, also plays a huge role SEO.

You see, Google totally can read the text in your images. It’s smart enough for that.

But it doesn’t want to.

When you’re putting text into an image, you’re effectively telling Google “Hey, I don’t want you to read or index this.” Which is fine if it’s a decorative element. But if you’re putting your page’s body copy, or your headers, into an image, Google isn’t reading it. And what Google doesn’t read, it doesn’t index – meaning there could be whole pages of your website that aren’t able to be found via search.

And if people can’t find you, they can’t buy from you. You could easily be losing out on clients or customers, because your text-on-images-laden website can’t be found on Google.

It’s also an accessibility nightmare.

There are hundreds of millions of people worldwide (myself included!) with some sort of vision problem or impairment. Many of us are fortunate enough that with a pair of glasses or contacts, we can go about our daily lives like our eyes aren’t horrible. However, there are still millions of people worldwide who can’t use a computer, or browse the internet, without assistive technologies like screen readers.

Most screen readers aren’t as smart as Google – they literally can’t read your images.

So if you’re embedding important copy (such as your pricing or your “about me”) into an image, you’re literally making it inaccessible to people who use screen readers. While, as far as I know, that isn’t illegal, it is unfair to persons with disabilities who may want to enjoy your content.

So how do you fix the problem?

It’s really simple – text on websites should be, well, text. If you want it to look a certain way, you should be styling it with CSS. (In fact, all my funky examples above are just that – regular ol’ text styled with CSS. Even the rainbow one.)

But if you absolutely must put text in an image, you need to make sure you’re using your ALT tags correctly. ALT tags (or “alternative text”) are read by Google and screen readers, and allow you to specify what an image is, or is about, in a way that’s accessible and indexable.

Adding an alt tag to an image is actually pretty easy. You just add it to your image’s HTML code:

<img src="IMAGE URL" alt="ALTERNATIVE TEXT" />

If you’re using WordPress, it’s even easier:

But simply having alt text isn’t enough. You should be doing your best to make sure it’s useful. If possible, include the text in the image as the alt text. If it’s too long to include there, you should still try and make your alt as relevant as possible. Here’s a great resource on alt text, and how to write good alt text, from Moz.

Hopefully this was eye opening. If you have any questions about text in images, ALT tags, or anything else, let me know in the comments!