After reading the following post over at html5rocks.com I decided to play around and see if there were any uses for theses tricks to visually aid SEO work on a website. I came up with the following:

Check for missing img alt tags:

#seo img:not([alt]), #seo img[alt = ""] {
  /*border: 10px solid cyan;*/
  -webkit-transform: rotate(180deg);
}

This will just rotate any image that doesn’t have an alt tag (or an empty one) 180 degrees. You can uncomment the border style, but this could cause layout issues on the page. Just rotating shouldn’t affect the layout at all and is hopefully a noticeable signal that there’s an issue.

Highlight internal links:

#seo a:not([href ^= http]),
#seo a[href *= 'websiteaddress.com'] {
  background: green !important;
  color: white !important;
}

Just replace “websiteaddress.com” with the URL of the site you’re checking and all internal links will be coloured green.

Highlight external links:

#seo a[href ^= 'http']:not([href *= 'websiteaddress.com']){
  background: red !important;
  color: white !important;
}

As above, just replace “websiteaddress.com” with the URL of the site you’re checking and all external links will be highlighted in red.

Highlight links with a blank href:

#seo a[href = ""]{
  background: purple !important;
  color: white !important;
}

This is probably most useful as it highlights any hyperlinks with a blank href.

Here’s all the CSS together. Add this to your stylesheet and then add id=”seo” to your

<html>

or

<body>

/*
 * SEO Helper Colours
 *
 * Cyan  = No Alt Tag
 * Green = Site Relative Link
 * Red   = External Site Link
 */

/* Flip the image upside down if there is no alt tag */
#seo img:not([alt]), #seo img[alt = ""] {
  /*border: 10px solid cyan;*/
  -webkit-transform: rotate(180deg);
}

/* The link points to another area of the site */
#seo a:not([href ^= http]),
#seo a[href *= 'websiteaddress.com'] {
  background: green !important;
  color: white !important;
}

/* The link points to an external site/file */
#seo a[href ^= 'http']:not([href *= 'websiteaddress.com']){
  background: red !important;
  color: white !important;
}

/* There's a blank href on the link */
#seo a[href = ""]{
  background: purple !important;
  color: white !important;
}