Blog Post Images Instructions for SEO
This text is an addition to our talk with awesome Jason Barnard on Kalicube Tuesdays. If you were looking for the video on Reputation Management in Google SERPs, then go to this page.
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. This tip was proposed a few months ago by Marko Fedorenko.
==
Validate as proposed by Murych: 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 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
- wrong image format: avoid vector formats
- image not loaded for Google, not in HTML render
- a very small image 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, for instance myself am using the following command line for targeting national (not local) rankings for changing images in bulk in one of directories:
exiftool -iptc:by-line=”Olesia Korobka” -creator="Olesia Korobka" -artist="Olesia Korobka" -copyright="Fajela.com" -copyrightNotice=”Fajela.com” -source=”https://fajela.com/” -credit=”https://fajela.com/” -UserComment=”Find more useful SEO content on fajela.com” -licensorID=”fajela.com” -licensorName=”Fajela - Semantic Markup” -licensorURL=”https://fajela.com/” D:\fajela\
Make sure you change all the details above on those you need for yourself.
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
Use Vision API to check how Google recognizes your image entities. For ease, 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
Grab Google Images entities with SEO Ruler extension. The tools works wonders and it’s just a tiny bite of what it really does.
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.
