Christian Hänsel

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!

Stylesheets included via link tags can cause rendering delays because the browser waits for the CSS to be fully downloaded and parsed before displaying any content. This can result in significant delays, especially for users on high latency networks like mobile connections.

To optimize page loading, PageSpeed recommends splitting your CSS into two parts. The first part should be in-line and responsible for styling the content that appears above the fold (initially visible portion of the page). The remaining CSS can be deferred and loaded later, reducing the impact on initial page rendering.

Ja, wir wissen alle, dass wir unser CSS optimieren sollten. Das sog. „Crucial CSS“, also die wichtigsten Klassen, sollten wir inline einbauen, und den Rest der Stylesheets deferen. Aber wie findet man einfach die CSS-Klassen, die above the fold genutzt werden?

This is my list of the best SEO bookmarklets to use. My focus is on technical SEO, so this list will most likely contain many SEO bookmarklets which fall into the technical topic.

aka: the #titlegeddon bookmarklet

Google has stirred up some dust all around the SEO world with their rewriting of websites‘ titles.

SEO folks are now trying to figure out how Google is rewriting their titles.

Google Sheets is my love. They haven’t been before – to be honest: I avoided spreadsheets as much as I could. But ever since I started my current job, I have learned to love working with spreadsheets.

Lately, I have been playing around with Google Sheets to get a quick overview of live webpage data without using any other tools.