11 Ways to SEO Optimize Images

The file name, alt attribute of the img tag, and placement location of the image on the page are essential for SEO.

It is because search engines, although evolving daily, cannot accurately determine the content or value depicted in an image.

This article summarizes how to write and where to place alt attributes to help search engines understand images.

Google's recommendations regarding images include the following.

Do not embed text in images
Image file names should be English words
Describe alt attribute describing the content of the image in the img tag
Embed keywords in the alt attribute of img tag
Describe the content of the linked page in the alt attribute of the img tag
Empty alt attribute for images for decorative purposes
Place images in highly relevant positions
Place important images at the top
Reduce file size
Do not specify images in CSS
Use an image sitemap

This article is based on the official Google documents "Search Engine Optimization (SEO) Starter Guide" and "Google Images best practices."

1. Do not embed text in images

Google understands content primarily based on the information described in text, such as title tag and heading tag.

If you include important text such as product name, service name, tagline, or headline in an image, it will be difficult for Google to recognize the information accurately.

Therefore, avoid including important text in images and use HTML tags for text.

Thumbnails are an exception.

2. Image file names should be English words

Google interprets file names as English to understand the content of the image.

File names should be hyphenated English words.

Try to include as many common English names as possible to describe the image.

Also, include model numbers and proper nouns in the file name.

Example: iPhone 13 case image file

〇	iphone13-case.jpg
×	img20200320-201923.jpg

３. Describe alt attribute describing the content of the image in the img tag

In addition to the image file name, Google uses the description written in the alt attribute of the img tag to understand what is depicted in the image.

Search engines can understand that the page is clearly explained using the image if the alt attribute text is relevant to the page's content.

Google image search also uses alt attributes, and the alt attribute or the title of the page containing it will be displayed in the search results.

Thus, the alt attribute of the img tag is an attribute closely related to SEO.

Compared to file names, alt attributes have the advantage of long strings.

Example: How to write alt attribute

〇	<img alt=”Features of digital nomad” src=”digital nomad-overview.png”>
×	<img src=”digital nomad-overview.png”>

4. Embed keywords in the alt attribute of img tag

When searching for images on Google, the alt attribute of the img tag is matched with keywords, and images with high relevance are displayed first.

The alt attribute of an image has the same role as the page title in a Web search, and it is important to include search and related keywords in the alt attribute of img tag for SEO in Google image searches.

In web searches, if an image contains keywords in the alt attribute, search engines can understand that the page has images related to the keywords.

It is essential for images such as "clothes," often searched for.

In WordPress, when you upload an image file, the file name is set to the alt attribute, so don't forget to change it.

Example: How to write alt attribute (image of clothes)

〇	<img alt=”Spring polka dot dress, beige” src=”…”>
×	<img alt=”img20200320-201923″ src=”…”>

5. Describe the content of the linked page in the alt attribute of the img tag

For image links, the alt attribute of the img tag is used in place of the anchor text. The anchor text serves to indicate the content of the linked page.

In the case of image links, the alt attribute describes the description of the link destination, not the description of the image itself.

The description should include search or related keywords.

Example: How to write alt attribute (banner image)

〇	<a href=”…”> <img alt=”SEO Analysis Tools” src=”…”> </a>
×	<a href=”…”> <img alt=”Promotional Banners” src=”…”> </a>

6. Empty alt attribute for images for decorative purposes

Empty alt attribute for images for decorative purposes.

Specifying an empty string for the alt attribute, such as alt="", indicates that the image is "not contextually important.

However, omitting the alt attribute in the img tag indicates a "contextually important image" according to the HTML5 specification.

<img>: Image Embedded Element - HTML: HyperText Markup Language | MDN

If you use an image for decorative purposes, set alt="" in the img tag.

Example: How to write alt attribute (image for decoration purpose)

<img alt="" src="images/border.png">

7. Place images in highly relevant positions

Search engines examine the relationship between the image description (alt attribute) and the surrounding text to determine if the image is appropriately placed for the content of the text.

If the image is related to the main text, the img tag is used near where it is mentioned, and the alt attribute should also include a description that shows the image's relevance.

If an image is placed in a location unrelated to the main text, search engines will not appreciate it.

If an image is placed in a location that has little relevance to the main text, such as a banner image from another site, the search engines may conclude that the image is not valuable.

Example: Placing a relevant image in the middle of the description

<h2>What is Rich Results? </h2>
<p>A Rich Result is a Google search result with more additional information than usual.</p>
<img alt="Example of Rich Result for a product" src="...">

8. Place important images at the top

Users browse pages in order from the top, so Google also places more importance on the quality of information at the top of the page.

The same is true for images: place high-value images at the top of the page as much as possible.

Example

Place an image that represents the page's content in the primary visual.
Add an overview section to the page and place important images in that section.

9. Reduce file size

Google uses page display speed as one indicator of search ranking.

If the file size of an image is large, it will take longer to transfer over the network, which will affect the page display speed;

Google places great importance on the display speed of the first view, which is the most critical aspect of display speed.

To improve display speed, reduce the file size of images.

There are several ways to reduce file size, including "reducing height and width," "optimizing image files," and "changing image formats.

Of these, "optimizing image files" is the easiest to tackle since file size can be reduced simply by using an image optimization tool such as compressor.io.

Depending on the image, file sizes can be reduced by 80%, making it highly effective.

In addition, PageSpeed Insights is a helpful tool because it provides a list of which images need to be improved.

10. Do not specify images in CSS

Google does not index images specified with CSS's background image or content properties, and images specified with the style attribute are likewise not indexed.

Therefore, do not specify images in CSS, except for background images and decorative images.

Example

〇	<img alt=”Technical SEO Tools” src=”technical-seo-tool.png”>
×	<div style=”background-image: url(‘technical-seo-tool.png’)”></div>
×	.mainvisual::before { content: url(‘technical-seo-tool.png’); }

11. Use an image sitemap

An image sitemap is a sitemap with additional image URLs and meta information.

It helps search engines recognize images more efficiently and thus can be expected to rank higher in image searches.

An image sitemap is particularly effective when using complex images for search engines to detect, such as images dynamically generated by JavaScript.

An example of an image sitemap description is as follows.

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://technical-seo.jp/</loc>
    <image:image>
      <image:loc>https://technical-seo.jp/img/foo.png</image:loc>
      <image:title>SEO based on search index analysis</image:title>
    </image:image>
    <image:image>
      <image:loc>https://technical-seo.jp/img/bar.png</image:loc>
      <image:title>SEO for B-to-B business</image:title>
    </image:image>
  </url> 
</urlset>

The image information is appended to the XML sitemap with the following rules.

Define the namespace xmlns:image="http://www.google.com/schemas/sitemap-image/1.1".
Use the <image:image> tag per image to fill in the information.
The URL of the image is described by the <image:loc> tag, the title by the <image:title> tag, and a short description by the <image:caption> tag.