2SO Logo

Please share to:

Google Images best practices

Google Images best practices

Google Images is a way to visually discover information on the web. Users can quickly explore information with more context around images with new features, such as image captions, prominent badges, and AMP results.

By adding more context around images, results can become much more useful, which can lead to higher quality traffic to your site. You can aid in the discovery process by making sure that your images and your site are optimized for Google Images. Follow our guidelines to increase the likelihood that your content will appear in Google Images search results.

To boost your content's visibility in Google Images, focus on the user by providing a great user experience: make pages primarily for users, not for search engines. Here are some tips:

  • Provide good context: Make sure that your visual content is relevant to the topic of the page. We suggest that you display images only where they add original value to the page. We particularly discourage pages where neither the images or the text are original content.
  • Optimize placement: Whenever possible, place images near relevant text. When it makes sense, consider placing the most important image near the top of the page.
  • Don't embed important text inside images: Avoid embedding text in images, especially important text elements like page headings and menu items, because not all users can access them (and page translation tools won't work on images). To ensure maximum accessibility of your content, keep text in HTML, provide alt text for images.
  • Create informative and high quality sites: Good content on your webpage is just as important as visual content for Google Images - it provides context and makes the result more actionable. Page content may be used to generate a text snippet for the image, and Google considers the page content quality when ranking images.
  • Create device-friendly sites: Users search on Google Images more from mobile than on desktop. For this reason, it is important that you design your site for all device types and sizes. Use the Mobile-Friendly Test to test how well your pages work on mobile devices, and get feedback on what needs to be fixed.
  • Create good URL structure for your images: Google uses the URL path as well as the file name to help it understand your images. Consider organizing your image content so that URLs are constructed logically.
Single image result in Google ImagesGoogle Images search results page

Google Images automatically generates a title and snippet to best explain each result and how it relates to the user query. This helps users decide whether or not to click on a result.

We use a number of different sources for this information, including descriptive information in the title, and meta tags for each page.

You can help us improve the quality of the title and snippet displayed for your pages by following Google's title and snippet guidelines.

If you include structured data, Google Images can display your images as rich results, including a prominent badge, which give users relevant information about your page and can drive better targeted traffic to your site. Google Images supports structured data for the following types:

Follow the general structured data guidelines as well as any guidelines specific to your structured data type; otherwise your structured data might be ineligible for rich result display in Google Images. In each of these structured data types, the image attribute is a required field to be eligible for badge and rich result in Google Images.

Product rich result in Google ImagesVideo rich result in Google Images

Images are often the largest contributor to overall page size, which can make pages slow and expensive to load. Make sure to apply the latest image optimization and responsive image techniques to provide a high quality and fast user experience.

On Google Images, the AMP logo AMP logo helps users identify pages that load quickly and smoothly. Consider turning your image host page into an AMP to decrease page load time (where the target page is the page the user lands after clicking on a result in Google Images).

Analyze your site speed with PageSpeed Insights and visit our Web Fundamentals page to learn about best practices and techniques to improve website performance.

High-quality photos appeal to users more than blurry, unclear images. Also, sharp images are more appealing to users in the result thumbnail and increase the likelihood of getting traffic from users.

Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter.

Likewise, the filename can give Google clues about the subject matter of the image. For example, my-new-black-kitten.jpg is better than IMG00023.JPG. If you localize your images, make sure you translate the filenames, too.

Alt text (text that describes an image) improves accessibility for people who can't see images on web pages, including users who use screen readers or have low-bandwidth connections.

Google uses alt text along with computer vision algorithms and the contents of the page to understand the subject matter of the image. Also, alt text in images is useful as anchor text if you decide to use an image as a link.

When choosing alt text, focus on creating useful, information-rich content that uses keywords appropriately and is in context of the content of the page. Avoid filling alt attributes with keywords (keyword stuffing) as it results in a negative user experience and may cause your site to be seen as spam.

  • Bad (missing alt text): <img src="puppy.jpg"/>
  • Bad (keyword stuffing): <img src="puppy.jpg" alt="puppy dog baby dog pup pups puppies doggies pups litter puppies dog retriever labrador wolfhound setter pointer puppy jack russell terrier puppies dog food cheap dogfood puppy food"/>
  • Better: <img src="puppy.jpg" alt="puppy"/>
  • Best: <img src="puppy.jpg" alt="Dalmatian puppy playing fetch"/>

We recommend testing your content by auditing for accessibility and using a slow network connection emulator.

Google parses the HTML of your pages to index images, but does not index CSS images.

  • Good: <img src="puppy.jpg" alt="A golden retriever puppy" />
  • Bad: <div style="background-image:url(puppy.jpg)">A golden retriever puppy</div>

Images are an important source of information about the content on your site. You can give Google additional details about your images, and provide the URL of images we might not have otherwise discover by adding information to an image sitemap.

Image sitemaps can contain URLs from other domains, unlike regular sitemaps, which enforce cross-domain restrictions. This allows you to use CDNs (content delivery networks) to host images. We encourage you to verify the CDN's domain name in Search Console so that we can inform you of any crawl errors that we may find.

Google Images supports images in the following formats: BMP, GIF, JPEG, PNG, WebP, and SVG.

You can also inline images as Data URIs. Data URIs provide a way to include a file, such as an image, inline by setting the src of an img element as a Base64 encoded string using the following format:

<img src="data:image/svg+xml;base64,[data]">

While inlining images can reduce HTTP requests, carefully judge when to use them since it can considerably increase the size of the page. For more on this, refer to the section on pros and cons of inlining images on our Web Fundamentals page.

Designing responsive web pages leads to better user experience, since users use them across a plethora of device types. Refer to our Web Fundamentals on Images to learn about the best practices for handling images on your website.

Webpages use <img srcset> attribute or <picture> element to specify responsive images. However, some browsers and crawlers do not understand these attributes. We recommend that you always specify a fallback URL via the img src attribute.

The srcset attribute allows specifying different versions of the same image, specifically for different screen sizes.

Example: <img srcset>

<img srcset="example-320w.jpg 320w,
       example-480w.jpg 480w,
       example-800w.jpg 800w"

   
sizes="(max-width: 320px) 280px,
      (max-width: 480px) 440px,
      800px"

   
src="example-800w.jpg" alt="responsive web">

The <picture> element is a container that is used to group different <source> versions of the same image. It offers a fallback approach so the browser can choose the right image depending on device capabilities, like pixel density and screen size. The picture element also comes in handy for using new image formats with built-in graceful degradation for clients that may not yet support the new formats.

We recommend that you always provide an img element as a fallback with a src attribute when using the picture tag using the following format:

Example: <picture>

<picture>
 
<source type="image/svg+xml" srcset="pyramid.svg">
 
<source type="image/webp" srcset="pyramid.webp">
 
<img src="pyramid.png" alt="large PNG image...">
</picture>

SafeSearch is a setting in Google user accounts that specifies whether to show or block explicit images, videos, and websites in Google Search results. Make sure Google understands the nature of your videos so that Google can apply SafeSearch settings to your videos if appropriate.

If your site contains adult images, we strongly recommend grouping the images separately from other images on your website. For example: http//www.example.com/adult/image.jpg.

Our algorithms use a variety of signals to decide whether an image or a whole page gets filtered from the results when the user's SafeSearch filter is turned on. In the case of images, some of these signals are generated using machine learning, but the SafeSearch algorithms also look at simpler things such as where the image was used previously and the context in which the image was used.

One of the strongest signals is self-marked adult pages. If you publish adult content, we recommend that you add one of the following meta tags to your pages:

<meta name="rating" content="adult" />
<meta name="rating" content="RTA-5042-1996-1400-1577-RTA" />
https://developers.google.com/


This website uses cookies to ensure you get the best experience on our website.