While I’m a fan of putting things out in front where everyone can see them, kinda like truth in advertising, an oxymoronic phrase, there is a growing interest in including Technorati Tags within your posts that are there, but not there. Enter the Invisible Technorati Tags.

Consuming Experience’s Technorati Tags Invisible Tags and Easily Generating Invisible Technorati Tags are tutorials on how to make your Technorati Tags disappear.

The idea is to allow tagging on your site without links to the tags which will cause the visitor to leave your site when they click the tag link. This gives you the tags you need to get into Technorati’s directory, but hides them from the visitor’s view. Another reason you might want to use this technique is if you want to include tags within your post content, but you don’t want them to be obvious links.

Basically, there are three methods to hide your Technorati tag links. One is to create a tag without the link and the other is to use CSS to hide the link.

To create a tag link without the text link, use the following format, replacing the tagname with the tag name of your choice. You can put this anywhere in your post, at the beginning, middle or end.

<a href="http://www.technorati.com/tag/tagname" rel="tag"></a>

To hide your Technorati tag with CSS, create a CSS selector with the display:none or use the visibility:hidden (if the browser recognizes this) and use the class in your tag. The CSS might look like these two choices.

.invisible {display:none}

or

.invisible {visiblity:hidden}

And the HTML in the tag lin would look like this:

<a href="http://www.technorati.com/tag/tagname" class="invisible" rel="tag">tagname</a>

The third method involves using CSS, but instead of hiding the link, you change the link to resemble the color of your text. For example, let’s say you are using black text on a white background but your links are colored blue. We assign the “technorati” class to the link which changes the link format to black text with no underlining or any other indicators of the link being a link.

Be sure and style the “technorati” class to remove all styling normally found within your blog’s links.

a.technorati {color:black; text-decoration:none}
a:hover .technorati {color:black; text-decoration:none)

The HTML in the tag would look like this:

...in a sentence would be <a href="http://www.technorati.com/tag/tagname" class="technorati" rel="tag">tagname</a> as an invisible link...

Whatever your reason to want to hide your Technorati links, these examples should help you keep your Technorati tags invisible.