Google image SEO best practices
Google provides several Search features and products that help users visually discover information
on the web, such as the
text result images
,
Google Discover,
and Google Images. While each feature and product looks different, the general recommendations
for getting images to appear in them is the same.
You can optimize your images to appear in Google's search results by following these best
practices:
- Help us discover and index your images
- Optimize the image landing pages
Help us discover and index your images
The
technical requirements
for getting your
content in Google's search result applies to images too. Since images are a substantially
different format compared to HTML, it means there are additional requirements for getting images
indexed; for example, finding the images on your site is different, and the presentation of the
images also influences whether an image is indexed at all, and for the right keywords.
Use HTML image elements to embed images
Using standard HTML image elements helps crawlers find and process images. Google parses the HTML
<img>
elements (even when they're enclosed in other elements such as
<picture>
elements) in your pages to index images, but doesn't 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>
Use an image sitemap
You can provide the URL of images we might not have otherwise discovered by
submitting an image sitemap
.
Unlike regular sitemaps, you can include URLs from other domains in the
<image:loc>
elements of the image sitemaps. This allows you to use CDNs (content
delivery networks) to host images. If you're using a CDN, we encourage you to
verify ownership
of the CDN's domain name in Search Console so that we can inform you of any crawl errors that we
may find.
Responsive images
Designing responsive web pages leads to better user experience, since people can access them
across a plethora of device types. Refer to our
guide to responsive images
to learn about the best practices for handling images on your website.
Web pages use the
<picture>
element or the
srcset
attribute of an
img
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
src
attribute.
The
srcset
attribute allows specifying different versions of the same image,
specifically for different screen sizes. For example:
<img
srcset="maine-coon-nap-320w.jpg 320w, maine-coon-nap-480w.jpg 480w, maine-coon-nap-800w.jpg 800w"
sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px"
src="maine-coon-nap-800w.jpg"
alt="A watercolor illustration of a maine coon napping leisurely in front of a fireplace">
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.
Per
section 4.8.1 of the HTML Standard
,
make sure that you provide an
img
element as a fallback with a
src
attribute when using the
picture
element using the following format:
<picture>
<source type="image/svg+xml" srcset="pyramid.svg">
<source type="image/webp" srcset="pyramid.webp">
<img src="pyramid.png" alt="An 1800s oil painting of The Great Pyramid">
</picture>
Google Search supports images referenced in the
src
attribute of
img
in
the following file formats:
BMP, GIF, JPEG, PNG, WebP, and SVG. It's also a good idea to have the
extension of your filename match with the file type.
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
attribute 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.dev page
.
Optimize for speed and quality
High-quality photos appeal to users more than blurry, unclear images. Also, sharp images are more
appealing to users in the result thumbnail and can increase the likelihood of getting traffic from
users. That said, 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.
Analyze your site speed with
PageSpeed Insights
and visit our
Why does speed matter?
to learn about best practices and techniques to improve website performance.
Optimize the image landing pages
While not immediately obvious, the content and metadata of the pages where an image is embedded
can have a great influence on how and where the image may appear in Google's search results.
Check your page title and description
Google Search automatically generates a title link 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.
Here are two examples how the title links and snippet might look like on a Google search result
page:
We use a number of different sources for this information, including information in the
title
and
meta
tags for each page.
You can help us improve the quality of the title link and snippet displayed for your pages by
following Google's
title
and
snippet
guidelines.
Add structured data
If you include structured data, Google can display your images in certain
rich results
, including a
prominent badge
in
Google Images, which give users relevant information about your page and can drive better targeted
traffic to your site.
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 a badge and rich result in Google
Images. Here are two examples how rich results might look like on Google Images:
Use descriptive filenames, titles, and alt text
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 very light clues about the subject matter of the image.
When possible, use filenames that are short, but descriptive. For example,
my-new-black-kitten.jpg
is better than
IMG00023.JPG
. Avoid using generic
filenames like
image1.jpg
,
pic.gif
,
1.jpg
when possible.
If your site has thousands of images, you might want to consider automating the naming of the
images. If you localize your images, remember to also translate the filenames, keeping in mind the
URL encoding guidelines
if you're using
non-latin or special characters.
The most important attribute when it comes to providing more metadata for an image is the alt text
(text that describes an image), which also 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 writing 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 (also known as
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
"/>
Also consider the accessibility of your alt text, per
W3 guidelines
.
For the
<img>
element, you can add the
alt
attribute of the
element, while for inline
<svg>
elements, you can use the
<title>
element. For example:
<svg aria-labelledby="svgtitle1">
<title id="svgtitle1">Googlebot wearing an apron and chef hat, struggling to make pancakes on the stovetop</title>
</svg>
We recommend testing your content by
auditing for accessibility
and
using a slow network connection emulator
.
Opt out of Google Images inline linking
If you choose, you can prevent the full-sized image from appearing in the Google Images search
results page by opting out of inline linking in Google Images search results.
To opt out of inline linking:
-
When your image is requested, examine the
HTTP referrer header
in the request.
-
If the request is coming from a Google domain, reply with a
200
HTTP status code,
or a
204
HTTP status code and no content.
Google will still crawl your page and see the image, but will display a thumbnail image generated
at crawl time in search results. This opt-out is possible at any time, and doesn't require
re-processing of a website's images. This behavior isn't considered image
cloaking
and won't result in manual
actions.
Alternatively, you can
prevent the image from appearing in search results entirely.
Optimize for SafeSearch
SafeSearch is a setting in Google user accounts that specifies whether to show, blur, or block
explicit images, videos, and websites in Google Search results. Make sure Google understands the
nature of your site so that Google can apply SafeSearch filters to your site if appropriate.
Learn more about labeling pages for SafeSearch
.