Img src

Blog Post Images Instructions for SEO

Below you’ll find key points on image optimization for your blog posts for search engines. These instructions were created as a summary for my Kalicube Tuesdays video on Image SEO with Jason Barnard. But I’ve updated it on January 2025. We’ve recorded a new one though back in 2023. It is also on content optimization and major part is on images.

Coding and layout for images

  • Use HTML5 best practices. You can find documentation on img element in HTML Standard.
  • Specifically, check that image has mandatory alt and src attributes.
  • In short, src attribute should point to your image best quality and size version. Alt attribute should describe what there is on the image, what it’s about, have a keyword (preferably, but not obligatory), and be within or next to the text it refers to and serve as a text.
  • Try to use responsive images. You can safely use this documentation on Mozilla.
  • Check if the images on the page are loaded correctly with Rich Results Testing Tool – get the HTML render there if it is not blocked. Now, some websites block this option.
  • Validate : https://validator.w3.org/#validate_by_input
  • Make sure you are serving images in the correct format. It is better not to use vector images for your valuable content. Use vector formats for service images and decoration. If it’s possible for you try to serve images in webp format for browsers that can read the format.
  • It’s mostly good to use decode async.
  • If you need to deliver images in many sizes, transform them on the fly, crop, manage user-uploaded images, consider using such tools as Uploadcare.
  • Make sure the images are compressed correctly and coded in a way to not mess your web vitals measurements.

Pitfalls to avoid and common errors:

  • using service images with <img> element
  • empty or misleading alt, keyword stuffing, etc.
  • image detached from the text it refers to or out of context
  • wrong image format: avoid vector formats in most scenarios
  • image not loaded for Google and Bing, not in HTML render
  • a very small image, blurred or smaller image version in src.

Meta Tags

Meta tags should be added to each image you consider to be important. You can use Python to add the meta tags required.

Alternatively, you can use Photoshop’s xmp template, just remember to change the details for each image. Or ExifTool.

In ExifTool, you can bulk edit meta tags for a stack of images.

If you are working with one image, consider adding a headline. It works very well. You can view the meta data overview on IPTC org website with lots of different applications to point to certain entities, news categorization, person identification, etc.

Easy check your meta tags for images: https://getiptcpmd.nitsvc.net/getpmd/html/stds/ipmd/

Entities

What is an entity and how to optimize your content with entities in mind, you can find  out in this post.

Otherwise…

You may use Vision API to check image entities recognition. However, it has nothing to do with how Google recognizes them. Google doesn’t use the same technology for search. Anyways, I’m showing my code with Google Cloud SDK:

gcloud ml vision detect-web https://fajela.com/wp-content/uploads/2021/04/jason-barnard-sitting.jpg

Reverse lookup on entities with Google Knowledge Graph can be done with Kalicube: https://tools.kalicube.pro/knowledge-graph-explorer-reverse

Check Kalicube website – you’ll find a lot of handy and useful tools there + courses and manuals. Sign up for Kalicube’s Beta to trigger and manage knowledge panels.

Similar Posts

Leave a Reply

Your email address will not be published.