SEO for Infographics

By Susan Metoxen | November 13, 2022

Human readers love infographics. Infographics make it easier to teach your readers by laying out the answers with a combination of text and images.

However, there is a bit of a problem with SEO for infographics. Google will be reading the alternative text for the image to decide what is in the image. The image content from Google’s perspective is limited to what is in the alternative text. If your infographic is too complex to describe in the alternative text, what should you do?

We have two problems to solve:

  1. Website visitors relying on screen readers can’t use the information in your infographic.
  2. Google search bots and the other browsers can’t read your infographic for indexing your website.

In addition, the infographics must always be legible on a smartphone.

The Alternative Text for an Infographic

Alternative text should be under 140 characters per image. Generally, an infographic is too complex to be described in the alternative text. The reason you made the infographic in the first place is because you are trying to use a combination of text and images to explain a complex concept.

What is the alternative text, anyway? The alternative text is an HTML attribute that you add to all embedded images on your website. The code for an embedded image looks like this:

<img src="images/my-pet-rat" height="200" width="200" alt="white rat with red eyes">

As you can see the alternative text goes into an HTML attribute called “alt”.

When a screenreader comes to the image, the screen reader reads the alternative text aloud. While alternative text is also important for SEO, as a writer you should never forget that the primary purpose of the alternative text is to describe the image to someone who can’t see. it.

As a rule of thumb, keep alternative text under 140 characters. Because of this character limit, you should describe the infographic at a high level. Hence, we have a problem. We have an image that has not been described to users of screen readers or to Google for SEO purposes

Four Possible Solutions

To use infographics effectively, we need a way to describe them in detail in the text, including all the words and describing all the images. Here are a couple of ideas:

  1. Add a longer caption in fine text. Your readers with vision with glance over the fine print, but the screen readers will read them aloud.
  2. Add a footnote with the description of the images. Click on the footnote to see it. 1
  3. Describe the image in detail in a paragraph underneath or above the infographic.
  4. If possible, export your Infographic to HTML instead of as a PNG image. The HTML will be a combination of text and images.

A bit more explanation of the 4th option. Infographics can either be in the form of an image, or in the form of HTML with a combination of text and images. If you tool you use to make the infographic has the option to export HTML, that will be much more desirable for SEO. Rather than inserting an image on your website, you would be inserting Custom HTML with the WordPress block.

Infographics for Mobile Devices

If you are creating infographics, you a probably working on a desktop, laptop or perhaps an iPad or tablet. However, your readers will more than likely be viewing your infographic from a smartphone. With that in mind, as you design your infographics, make sure they are completely legible on a smartphone.

Infographics Benefits

In spite of these potential problems with SEO, anything that you can do to help your readers understand concepts must be seen as desirable, and Google understands that as well. With that in mind, I highly doubt Google would penalize a website for the use of Infographics, as long as they are fully explained somewhere on the website. In addition, there could be an offsetting SEO benefit if people come to your website via Google Images. I know I frequently go straight to images.google.com when I expect explanations in the form of charts and graphs rather than text.

1This is a footnote. You can provide a link to your footnote with by using internal links. Add an HTML Anchor in the Advanced section. Give your HTML a short lower-case name with no spaces in it, like “my-footnote”. Then you can link to it from the text with #my-footnote

Posted in SEO Copywriting