Images play an important part in the modern online user experience, and most users expect most online experiences to be at least somewhat visual. Most marketers understand this well, but when it comes to search engine optimization, a lot can get neglected. Google rarely has any ability to interpret an image on its own, and it's our job as SEOs to make sure search engines can understand images and their context in an effort to bring more quality visitors to our sites.
Google's Stated Best Practices For Images
Google's own image best practices address their recommendations to optimize images for their search engine.
Opting Out Of Full-Size Images In Search Results
You have the ability to prevent Google from displaying your full image in search results. This makes it so that users will need to click on the image and visit your site in order to see the full-sized image. Do this if your primary goal is to draw traffic to your website using images.
To opt out, your server should respond to the Google domain with an HTTP 200 or 204 and no content code.
Google will still crawl the page and see the image, but it will generate a thumbnail image in search results without displaying a full image.
Image Guidelines For User Experience
- Relevance: Use images only when they are relevant and add context to the page. They recommend using original images when possible.
- Placement: Place images near text that is relevant to the image if possible. Include more important images closer to the beginning of the page.
- No Text In Images: Do not use images to display text. Use HTML for text and CSS to style it. If you must use an image to display text, use an image alt tag with identical text. Remember that search engines, translators, and screen readers usually can't interpret the text in images.
- Include Informative and High-Quality Content: Images without context are typically less useful for users. The text makes images more actionable and can be used to generate text snippets for the image.
- Device-Friendly Design: More users search Google Images from mobile than desktop devices. Make sure your site and images display properly on all devices.
- URL Structure: Google uses the file path and file name to help determine what the image is a picture of, so use descriptive URLs that will make sense to users and help Google understand the image.
Follow Best Practices For Titles And Meta Descriptions
Use Structured Data
Structured data allows Google to display images as rich results. This means they can get a prominent badge with relevant information about the page that can better entice users to click through. Google Images uses the Product, Video, and Recipe structured data to provide image context like product prices, video length, and recipe ingredients. See our post about structured data for more details on how to do this.
Images often take up much more memory on a page than text and are one of the biggest reasons a page might load slowly. Hosting the image on an AMP page will attach an AMP logo letting users know that the page will load quickly and smoothly. You can analyze the page load speed with PageSpeed Insights for suggestions on how to improve image load speed. Consider Google's advice on image optimization and responsive image techniques.
It should go without saying that more aesthetically pleasing images and images that are in sharp focus stand out more and are usually more useful to users.
Optimize Image Titles, Captions, Filenames, and Text
Since Google generally does not interpret the image itself, only metadata and context can be used to identify the content of an image. Be sure to caption images with text explaining the contents of the image when relevant. Give the image a title that is descriptive of what is in the image.
Use an image alt tag that acts as a suitable replacement for the image. The intended purpose of an image alt is for screen readers for the visually impaired or as alternative text if the browser fails to load the image. A good image alt acts as a genuine replacement for the image itself. If an image acts as an image link, the image alt also becomes the link anchor text. Include keywords in a way that is useful to users.
Surround your image with text that is relevant if possible, since Google may analyze the text surrounding the image to better understand it and possibly use it in the snippet.
Be sure to use a descriptive filename if possible, rather than a filename that is merely a series of numbers and letters.
No CSS Images
Google indexes images within the <img> tag but not within <div> styles.
Use an image sitemap so that Google can easily discover, crawl, and index all of the images on your site.
Use A Supported Image Format
For Google to index an image, it must be a BMP, GIF, JPEG, PNG, WebP, or an SVG. It can also be a Data URI, although this can dramatically increase the size of the page. Google offers several pros and cons of Data URIs.
Optimize For SafeSearch
If your site doesn't host any "adult" images, these guidelines don't really concern you. However, since many users only use SafeSearch and wish to avoid adult content, if your site hosts any adult content at all it's very important to keep it segregated away from safe content, or your site will likely be blocked from all SafeSearch results.
Use a separate path for your adult images, for example:
for your safe images and:
for your adult images.
Label your adult pages as for adults in the metadata so that search engines don't think you are trying to sneak adult results into safe results:
<meta name="rating" content="adult" />
Keep these pages in a separate URL path as well if at all possible, and obviously, do NOT tag your safe results as adult under any circumstances.
Put the best practices in this post to use in order to bring in more traffic from image search results and to help search engines better understand your pages.