SEO Bookmarklet: Find images without alt attribute

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!