Creating a website is a serious business, but sometimes you may forget about some important details. This class will help you. It will let you know when you haven't put an alt attribute on image or kept that attribute empty, when you haven't typed a URL in anchor or when anchor link has rel=nofollow attribute. It will also show you an alert message if you don't have a <title> tag and description or left them empty*.

If any of the errors described above happens, according element will get a red outline border drawing your attention and asking for some love or you will get a message with the same purpose.

The <title> reminder can alert you even if you have a <title> tag. This happens if you have a <link> tag (usually used for style sheets) before <title> in your HTML. Just change the order of <link> and <title> and you're cool.

Place the .seo-helper class in html element. That's it!

*** Example: html {.seo-helper}

That way every element on your page will be affected by this rule. You can also place it in any other container class element in your code (body, div.wrapper, article and so on) if you don't want for some reasons to check for bugs on whole page but in single area.

Caution! Do not forget to delete this class before finishing your project, unless you want to keep it in continuous project (like blog) and debug every new content on your site. But then you might consider restyling this class to be a bit more eye-pleasing.

This may not work in every browser, but since you are a web developer/designer you're probably already using a bleeding edge nightly alpha back-door version of browser, so no problem! It's probably the only class you don't need to care about how your visitors will see it!

Section only for people who don't know yet what attribute selectors and negation pseudo-class are.

Using negation pseudo-class is like saying "target every element x that doesn't have attribute y" or "target every element exept (but 'not') z". You can read more about that here ->www.w3.org/TR/selectors/#negation.

Attribute selectors are rules that target elements that have some specified attributes (rel, alt, href etc.) and/or specified value of this attributes. Read more on this topic here -> www.w3.org/TR/selectors/#selectors.

For a further explanation and a demo, refer to: -> http://radiatingstar.com/how-to-improve-seo-with-css

First targets images that don't have an alt attribute, second targets ones that have this attribute but it's left empty (probably left by automatic completion of html editor), third is just in case - it might have been left by html editor or manually "to do it later" (clearly a space at the beginning of an alt can't be anything good).

If you write an anchor text and leave href to copyPaste URL later, it will reminding you about that.

For some reasons links on your site may have this attribute and this may generate a huge SEO problem. Better fix it ASAP. (On the other hand nofollow links might be useful in some situations. See here: -> http://en.wikipedia.org/wiki/Nofollow#Control_internal_PageRank_flow)

---

###Code .seo-helper () { img:not([alt]), img[alt=""], img[alt^=" "], a[href=""], a[href^=" "], a[rel*="nofollow"] { outline: 2px solid red !important; outline-offset: 3px !important; } head, title:empty, link, meta {display: block;} title:empty:before {content: "You've left the <title> empty!"} link:before {content: "You don't have a <title>!"} title ~ link {display: none;} meta[name="description"][content=""]:before, meta[name="description"][content=" "]:before {content: "You've left description empty!";} }