Here’s a quick one for you SEO folks out there.
This browser bookmarklet will highlight all images without an “alt” attribute and those with an empty alt attribute in red, and download a list of the images.
It will help you get a very quick overview over where the alt attributes are missing, so you can easily edit them without having to check each image manually.
javascript:(function() {
var images = document.getElementsByTagName('img');
var highlightedImages = [];
for (var i = 0; i < images.length; i++) {
var image = images[i];
var altText = image.getAttribute('alt');
if (!altText || altText.trim() === '') {
image.style.border = '2px solid red';
var overlay = document.createElement('div');
overlay.style.position = 'absolute';
overlay.style.top = image.offsetTop + 'px';
overlay.style.left = image.offsetLeft + 'px';
overlay.style.width = image.offsetWidth + 'px';
overlay.style.height = image.offsetHeight + 'px';
overlay.style.background = 'rgba(255, 0, 0, 0.5)';
overlay.style.pointerEvents = 'none';
image.parentNode.insertBefore(overlay, image);
highlightedImages.push(image.src);
}
}
console.log('Highlighted Images:', highlightedImages);
var date = new Date();
var dateString = date.toLocaleString();
var content = 'Page URL: ' + window.location.href + '\n';
content += 'Date and Time: ' + dateString + '\n\n';
content += 'Highlighted Images:\n' + highlightedImages.join('\n');
var blob = new Blob([content], { type: 'text/plain' });
var link = document.createElement('a');
link.download = 'highlighted_images.txt';
link.href = URL.createObjectURL(blob);
link.click();
})();
Code-Sprache: JavaScript (javascript)
I also have a list of really cool SEO bookmarklets – check it out!