Image SEO Best Practices - Optimisation For Visibility

‍

‍

‍

Image SEO Best Practices - Optimise For Visibility

‍

It’s no secret that SEO optimisation is the backbone of effective digital marketing, but if you’re not applying the same approach to your image content, you could be missing out on roughly a third of all Google searches. This puts your site at a significant disadvantage, especially considering that optimising photos for higher visibility is a straightforward process.

By using embedded HTML image elements in tandem with descriptive file names and alt attributes, Google can easily locate and index your image content. Then, by anchoring links with detailed but succinct alt descriptions, Google will better understand the intent of your site. Finally, using standard photo formats and creating an image map will increase the likelihood that your content appears on Google Image Search.

In short, I would summarise image SEO into four image attributes optimisation:

<img src="image-name.jpg">

<img alt= "image description">

<img title= "image title"/>

<figure>
<img src="image-name.jpg"
alt= "image-description" title= "image-title"/>
<figcaption>
Be catchy, descriptive and keyword-based!
</figcaption>
 </figure>

Embed Photos With Short But Descriptive File Names

According to imageseo.com(2021), images that are performing the most have a length of about 12 characters with 2-3 keywords. But when I name my file, I do a bit longer to make it easy-to-document & search-friendly. When Google first crawls a site, it looks for clear markers that explain the content of the images. It then uses this information to properly index the photos under the appropriate keywords. So, by attributing specific and succinct file names to your images, you can help Google identify and link your site to your intended keywords and audience. 

‍

• ‍Pro Tip: Use Vision AI to get some ideas of how Google’s API or Algo read about your images.
• ‍Pro Tip: I have my own template in terms of the image file name: {Tactical/BAU}_{Keyword}_{Placement}_{Size}_{Creator}_{Date}.  For example, BAU_BlackFriday_Facebook_1080x1080_Dean_20221108.jpg. It helps you locate your image file by searching keywords and contains enough context for Google’s AI.

‍

‍

For example, using an ambiguous file name such as “image1.jpg” will not provide enough information for Google to understand the content, and, thus, it will not properly index the images. However, by transparently naming the content with descriptors such as “dalmatian-playing-fetch.jpg”, Google will know exactly what it’s looking at.

‍

For this to be effective, though, you must be strategic and avoid making beginner mistakes:

‍

• Do NOT write extremely lengthy file names. Be short and clear with your descriptions.
• Do NOT use generic file names, such as pic1.jpg or image23.gif.
• Do NOT stuff the descriptions with random keywords. Google will demote this type of content.

Additionally, it’s fair to point out that Google only crawls image content every few months, so it’s in your best interest to upload optimised images from the get-go. Changing an image’s file name after it’s already been indexed will not affect your SEO immediately and could take several months to update.

Use HTML Semantics to Embed Images

‍

All the image attributes you need for SEO:

‍

<img src="image-name.jpg">

<img alt= "image description">

<img title= "image title"/>

<figure>
<img src="image-name.jpg"
alt= "image-description" title= "image-title"/>
<figcaption>
Be catchy, descriptive and keyword-based!
</figcaption>
 </figure>

Coding your website with the correct semantics will help Google easily identify images on your site. This means using HTML tags to properly display your images, NOT CSS. For example, if you have an image of a dog, you would use the following code: <img src= “dog.jpg”> Alternatively, you could use html <picture> tag to include various size options or “loading” =” lazy” to help the page load more efficiently.

‍

The <picture> element contains two tags: one or more <source> tags and one <img> tag.

The browser will look for the first <source> element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute). The <img> element is required as the last child of the <picture> element, as a fallback option if none of the source tags matches.

Tip: The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.

Source W3C : HTML <picture> Tag

‍

Then, as Google crawls your site, it will automatically understand that the image is related to dogs and index it under the keyword. From then on, whenever someone searches for an image of a dog, your site will be more likely to appear on Google Images and attract new interactions.

Use Descriptive Attributes

In addition to using HTML tags to embed your images, you should also use alt attributes. This text appears in place of an image when it fails to load on a page. Visually impaired or blind users using screen readers will read the alt text’s content, allowing the image to be accessible to those with visual disabilities. In addition, It helps search engines to determine the content of the image and improve the semantic meaning of your page. 

<img title=””> Title image tag is what appears when you hover your mouse over an image. It can be nice for the user experience. But DO NOT spend much time on title text optimisation. They are NOT important for SEO. 

While the main purpose of alt attributes is to provide context for users with visual impairments, they also play a role in image SEO. Essentially, they’re another opportunity for you to include keywords and explain the contents of your photo. So, when adding an alt attribute, be as specific as possible without doing the following:

• Do NOT write too much. Keep your descriptions below 100 characters.
• Do NOT rely solely on keywords for descriptions.
• Do NOT add unnecessary words such as “an image of. . .”
• Do NOT use the same terms to describe multiple images.

It’s also important to note that you should never use alt attributes for decorative images. These are the images that don’t contribute to the overall message of your page. For example, if you have a photo of a company logo or an image that’s used as part of your website’s design, you should simply include an empty alt attribute, such as <img src= “logo.jpg” alt=””>

Figure And Figcaption are Meaningful for SEO

‍

The figure element represents a unit of content, optionally with a caption, that is self-contained, that is typically referenced as a single unit from the main flow of the document, and that can be moved away from the main flow of the document without affecting the document’s meaning.

Source W3C : HTML: The Markup Language (an HTML language reference)

‍

For Search Engines, the content that surrounds your images is more likely to be in connection with it. It’s therefore important to use the keywords you are targeting in the figcaption or just before or just after the images.

‍

PNG or JPEG For SEO? (Source: Imageseo.com)

‍

Standard Image Formats are More Commonly Accepted

‍

It’s important to use standard image formats when possible. These are the image types that are universally accepted by web browsers and, as a result, are more likely to appear on Google Image Search. The three most common and widely accepted formats are:

‍

• JPEG (.jpg)
• GIF (.gif)
• PNG (.png)
• Webp(.webp)

Best SEO Practices for JPEG or JPG

‍

JPEG (Joint Photographic Experts Group) is the most common image format on the internet. You should use it for images where the quality matters: photography, product sheet, etc.

JPEG files can be compressed tremendously, which leads to quality images with relatively small file sizes. You should always compress your image.

‍

Spoiler alert: WebP are better than JPEG for SEO. - ImageSEO.com

‍

Best SEO Practices for PNG

‍

PNG (Portable Network Graphics) was created to replace GIF. PNG pictures have better quality and size than GIF. PNG files support transparency making them really useful for graphics or icons.

You should not use PNG for pictures or photography because the ratio quality/size is much better with JPEG.

Best SEO Practices for SVG

‍

SVG (Scalable Vector Graphics) is a kick-ass format for SEO for two reasons: it’s light and it’s responsive. SVG images are also awesome on a retina screen.

SVG images and their behaviors are defined in XML text files which means that they can be created and edited with any text editor. You should try to use SVG images as often as possible for your SEO optimization.

EXIF Metadata Impacts Image SEO

EXIF metadata is used by cameras to store information in photos, during image compression. They embed data such as date, time, camera model and settings, geolocation, etc. They are sometimes used by the police to find out where a picture was taken. They are useful for Google algorithms because they carry out specific data about your picture. IPTC / EXIF data might be extremely relevant for local SEO.

‍

” It is something that Google is able to parse out and I think we do reserve the right to use it in ranking! “

‍

Note that Exif and IPTC data are also important for Google Lens. They can be edited by using GIMP or Adobe Photoshop, or Adobe Lightroom.

Create an Image Map to Guide Google’s Indexing Process

Note: As of May 2022, Google removed the following tags and attributes from their documentation: <image:caption>, <image:geo_location>, <image:title>, <image:license>. This means Google has depreciated these image attributes in indexing.

An image map is an HTML(XML) code that allows you to hyperlink various sections of a single image. This is especially useful if you have a photo with multiple products, such as a clothing store or makeup brand. By creating an image map, you can help Google index each item individually and locate non-standard images, such as JavaScript codes.

‍

Creating an image map is a little more intensive than simply naming files and writing quality alt text but Google has fortunately provided a comprehensive guide to creating image maps, along with a complete example and several best practice tips. Using their outline, you can upload up to 1,000 images per page, helping to increase your site’s overall keyword percentages and the quality of your SEO.

Conclusion

Image SEO is a process that’s often overlooked but, as we’ve seen, it’s a crucial element of any effective digital marketing strategy. By following the tips and best practices outlined in this article, you can ensure that your images are properly indexed by Google and appear more frequently on Image Search. As a result, you’ll be able to attract more site visitors, generate more leads, and convert more customers.

‍

References

• https://developers.google.com/search/docs/appearance/google-images
• https://www.searchenginejournal.com/google-on-image-filenames-a-surprising-seo-mistake/468366/
• https://developers.google.com/style/semantic-tagging
• https://developers.google.com/search/blog/2007/12/using-alt-attributes-smartly
• https://developers.google.com/search/docs/crawling-indexing/sitemaps/image-sitemaps
• https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Image_types
• https://imageseo.io/images-seo-optimization/
• https://www.searchenginejournal.com/google-on-image-filenames-a-surprising-seo-mistake/468366/
• https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=en&visit_id=638023007386947361-2430922311&rd=1#images

‍