Make Your Technorati Tags Invisible

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.

I want to emphasize that hiding anything on your blog within your blog’s design can get your blog punished by Google’s PageRank, so use this carefully and cautiously. This article arose to answer the question of how to hide tags on a WordPress blog because the blog administrator didn’t want to change the WordPress Theme code, just the CSS, removing the tags from view.

Another person wanted to put tag links in their blog post content, but not make the words appear as links. They just wanted them recognized as tags. Their intent wasn’t to hide the words, but make them visible as words, not links.

In both cases, their intentions were honest, but Google and other search engines might not see it that way.

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.

---

Site Search Tags: wordpress tips, web page design, web design, css, invisible, hidden, hidden text, hidden links, hidden tags, invisible tags, invisible links, technorati, technorati tags, hide technorati tags

Subscribe Via Feedburner Subscribe by Email Visit
Copyright Lorelle VanFossen, the author of Blogging Tips, What Bloggers Won't Tell You About Blogging.