First Link Priority

There are a few methods for creating first link priority.

CSS Method

Using CSS you can have a simple anchor with desired text and replace the text with an image.

HTML Required

<a href="http://www.google.com" class="logo">Your link text</a>

CSS Required

.logo{
	display:block;
	text-indent:-1000em;
	background: url(images/noble-samurai-logo.png) no-repeat 0 0;
	width:90px;
	height:90px;			
}

Example

Your Link Text

Hybrid CSS/Image Method

This method gives you the benefits of the CSS method but also allows you to keep an image in the page.

HTML Required

<a href="http://www.google.com" class="logo">
	<span>Your link text</span><img src="images/noble-samurai-logo.png" alt="Alternative Text" />
</a>

CSS Required

.logo span{
	display:block;
	position:absolute;
	left:-1000em;			
}

Example

Your Link TextAlternative Text

JavaScript/CSS Method

Using JS enables you to hide the link from Google and pass the priority onto the next link on the page

HTML Required

<span class="logo">Your link text</span>

CSS Required

.logo{
	display:block;
	text-indent:-1000em;
	background: url(images/path-to-image.png) no-repeat 0 0;
	width:90px;
	height:90px;			
}

JS Required(using jQuery)

$(document).ready(function(){
	$(".logo").click(function(){
		window.location="http://www.google.com/"
	});				
});

Example

Your Link Text