How to check that Google can find and understand your images

How Google finds and understands an image

Why the way an image is coded matters

What you need to check your images

• A web browser
• A page on your site with several images, such as a gallery or a product page
• Access to Google Search Console with the site added as a property

Check your images, step by step

1. 1

   Pick a page and list its important images

   Choose one page where the images matter, such as a product page, and note the images you want people to find.

   You will know it worked when You have a short list of the images that matter on the page.

2. 2

   Check each is an image element

   Open View page source and search for <img. Each picture you listed should appear with its address in a src attribute. If a picture appears only inside a background-image style, Google does not index it.

   You will know it worked when Every important image has an <img> element with a src.

3. 3

   Read the alt text

   Look at the alt attribute on each image. Google asks for useful, information-rich text that uses keywords appropriately, and warns that filling it with keywords may make a site look spammy. A specific description of what the image shows is better than a single word.

   You will know it worked when Each important image has alt text that describes that image, not a list of search terms.

4. 4

   Look at the file names

   Look at the end of each src address. Google says short, descriptive file names give light clues and are better than generic ones such as image1.jpg.

   You will know it worked when You have noted which images have descriptive file names and which have generic ones.

5. 5

   Check the words around each image

   Google uses the content of the page, including captions, to understand an image. Check that each image sits near text that is about it.

   You will know it worked when Each important image has relevant text next to it, or you have noted which do not.

6. 6

   Check lazy-loaded images in Search Console

   Lazy-loading delays an image until it is about to be seen. Google says it must load when visible without a click or scroll. In Search Console, paste the page address, choose Test live URL, open View tested page and look at the HTML. Google says that if your image addresses appear in the src attributes there, the setup works. See Google’s lazy-loading guidance.

   You will know it worked when Your important images’ addresses appear in the src attributes of the tested HTML.

7. 7

   Check which image the page suggests as its preview

   In the page source, search for og:image. Google lets you suggest a preferred image this way, and advises a relevant, representative image, not a generic one such as a site logo.

   You will know it worked when You can see which image the page names, and it is relevant to the page.

Common mistakes with images and Google

• Putting the picture in a CSS background. Google does not index CSS images.
• Stuffing alt text with keywords. Google says it may cause a site to be seen as spam.
• Lazy-loading images that are visible straight away. Google says that makes them slower to show.
• Using srcset or a picture element without a fallback src. Google says to always give one.
• Choosing a site logo as the preferred preview image. Google advises against a generic image.

Terms used when you check your images

Alt text

A short description of an image, written in the page code, that screen readers read out and that Google uses to understand the image.

Lazy-loading

Delaying the loading of an image or other content until it is about to be seen on screen.

Responsive images

Images written with several sizes or formats so the browser can pick one that suits the screen. Google advises always including a fallback src.

Rendered HTML

The page code after a browser-like process has run the JavaScript.