How to publish images in a search engine friendly way

Learn how images can help you attract more clicks and views.

It will not come as a surprise that the images accompanying online articles are really important. They attract attention, increase ‘shareability‘, they can make the visitor feel at home or support what the author is trying to say.

What we tend to forget however is that, apart from the actual image, we also need to add text to help search engines understand what the image is about. This increases the chance the image shows up in a Google image search (or any other image search engine) and bring ‘extra’ visitors to our pages. It will also add relevancy to the page on which the image is published.

So where do you put that text and which fields are most important? While every CMS might be a little different, some elements should always be present. A summary of the best practices.

TLDR

BEFORE UPLOADING

  • Check your backend image library, has the image been used before on your website? No need to duplicate the upload, just reuse if possible. Note that adding relevant metadata also helps you retrieve an image from the library.
  • When using a new image, you first store it on your computer. Find the image and make sure that any filename resembling  ANP-3235-0.jpg  is changed into something useful:  protesters-dam-square-amsterdam.jpg. Put dashes (-) in between words, and only use western characters (Arabic, Chinese, Hindi scripts etc would mess-up the URLs of uploaded image files).
  • Pay attention to image size. In most cases you really don’t need images larger than 100 kb.

WHEN UPLOADING

  • Apart from the file name, the alt text (or alternate text) is the most important location to add relevant text to the image. Make sure this is an adequate, short description of what you see. And in contrast to the filename, you should use the language of the website.
  • The title text is a nice-to-have element. The text will be shown when a user hovers over the image. In most cases you can just copy the alt text.
  • Depending on the CMS you’re using, there might be an option to fill in a credit link. If you don’t own the copyrights of the image you should use this option, or mention the copyright owner somewhere else on the page.

WordPress: which title text?

Each CMS has its own set of fields for uploaded images, which can be confusing sometimes. For instance, WordPress uses a title text field that is only used for backend retrieval. The ‘image title attribute’ field, the title that is shown to website visitors, is only available under advanced settings.

This is the internal title field, the one that you see immediately after uploading:

Wordpress Image Title field

And here’s the image title attribute, only available in image details, advanced options (or in HTML directly)

Wordpress image title attribute

Remember, filename and alt text are the most important fields. Caption is nice too, use it for descriptive text shown right below (attached to) the image. Most other fields will be stored for backend retrieval.

How to quickly check the quality of metadata on images

There’s a quick way to check if the images on a page have a relevant filename, alt & title text. Right-click on the image and select ‘inspect element’. You will see something like this:
Metadata images inspect element

To wrap up, a funny exercise

Try this: search for your own name on Google image search. Can you find colleagues, or pictures that are familiar – but you’re not featured in those pictures yourself? This proves that, if Google can’t find a match in filename or alt text, it will look for captions and text located near the image.

Arne van Elk on Google image search

Don’t forget to check out 1000 Words About Images , a post from the Official Google Webmaster Central Blog.

Do you agree with above best practices? Have any tips yourselves? Please add your comments below.

Bewaren

Bewaren

Bewaren

Bewaren

Bewaren

Bewaren

Leave a Comment