Image SEO Best Practices - Optimisation For Visibility

Image SEO Best Practices - Optimisation For Visibility

November 24, 2022
Marketing Two Cents
Data Analysis Skills | DEANLONG.io
10.54%

Monthly
Active User Rate

Daily Budget
$5000

Daily
Campaign Budget

Click-through rate increase
60%

Increase
Click-through Rate

an icon shows a lightbulb that indicates being creative | DEANLONG.io
15%

Growth
Return on Investment

Data Analysis Skills | DEANLONG.io
#1

Customer
Segmentation

Daily Budget
#2

Prioritisation of
Limited Resources

Click-through rate increase
#3

Competitive
Responses

an icon shows a lightbulb that indicates being creative | DEANLONG.io
#4

Consumer
Change

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:

Image Attributes HTML Tag Definition Best Practices
Image Name
<img src="image-name.jpg">
Specifies the path to the image {Tactical/BAU}_{Keyword}_{Placement}_{Size}_{Creator}_{Date}
Alt Text Attribute
<img alt= "image description">
Specifies an alternate text for an image, if the image cannot be displayed Your ALT must describe your image (= content) and explain why you use it for (= function)
Title Text Attribute
<img title= "image title"/>
Adds a tooltip with title text to the image. Hovering the mouse over the image will display the tooltip. Give more context and describe what this image is all about
Figcaption Tag
<figure>
<img src="image-name.jpg"
alt= "image-description" title= "image-title"/>
<figcaption>
Be catchy, descriptive and keyword-based!
</figcaption>
</figure>
Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo Be catchy, Use, in one sentence, your best punchline, if possible using optimized keywords for SEO, but think about UX first


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.

image naming convention example for one of the DEANLONG.io articles "optimise iframe for SEO"
My own way of naming an image file for code extraction & machine-reading


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:

Image Attributes HTML Tag Definition Best Practices
Image Name
<img src="image-name.jpg">
Specifies the path to the image {Tactical/BAU}_{Keyword}_{Placement}_{Size}_{Creator}_{Date}
Alt Text Attribute
<img alt= "image description">
Specifies an alternate text for an image, if the image cannot be displayed Your ALT must describe your image (= content) and explain why you use it for (= function)
Title Text Attribute
<img title= "image title"/>
Adds a tooltip with title text to the image. Hovering the mouse over the image will display the tooltip. Give more context and describe what this image is all about
Figcaption Tag
<figure>
<img src="image-name.jpg"
alt= "image-description" title= "image-title"/>
<figcaption>
Be catchy, descriptive and keyword-based!
</figcaption>
</figure>
Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo Be catchy, Use, in one sentence, your best punchline, if possible using optimized keywords for SEO, but think about UX first


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 <picture> to include various size options or “loading” =” lazy” to help the page load more efficiently.

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.

You can see my <figcaption> right here right now with the best tips | DEANLONG.io


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

Standard Image Formats are More Commonly Accepted

Image optimization format for SEO
Image Format SEO Recommendations
JPG / JPEG Prioritize the use of WebP.
PNG Only use PNG when you need the transparency or for really small images.
GIF Only use GIF when you need to animate an image.
SVG Use SVG as often as possible but don’t download SVG from websites you don’t trust.
WebP You should always try to use WebP over other formats when you are not restricted by transparency or animation.


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.

Required Tags in Image Sitemap
Required tags
<image:image> Encloses all information about a single image. Each <url> tag can contain up to 1,000 <image:image> tags.
<image:loc>

The URL of the image.

In some cases, the image URL may not be on the same domain as your main site. This is fine, as long as both domains are verified in Search Console. If, for example, you use a content delivery network such as Google Sites to host your images, make sure that the hosting site is verified in Search Console. In addition, make sure that your robots.txt file doesn't disallow the crawling of any content you want indexed.


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.

End


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

Best Practices
E-Commerce
Google
SEO
Technical SEO
Dean Long | Expert in Growth MarketingHongxin(Dean) Long

Dean Long is a Sydney-based performance marketing and communication professional with expertise in paid search, paid social, affiliate and digital advertising. He's also a distinct MBA Graduate from Western Sydney University.

Related Posts