4coders

Zazwyczaj na stronach jest jakiś element, który możemy nazwać logiem. Idealnie dla wyszukiwarki jak będzie to tekst umieszczony w znaczniku h1. Tekst jest jednak mało atrakcyjny wizualnie jeśli chodzi o logo, zaś grafika mało atrakcyjna dla bota wyszukiwarek. Istnieje jednak ciekawe rozwiązanie przy użyciu CSS.

Logo umieszczamy w takim kodzie:

<h1><a href="http://4coders.info">dla programistów</a></h1>

Do tego dorzucamy CSS:

h1 {
	text-decoration:none;
	border:0;
	width : 200px;
	height : 100px;
	margin : 0;
	padding : 0;
	background : url(logo.jpg) no-repeat 0 0;
}
 
h1 a {
	display : block;
	height : 100px;
	text-indent : -9999px;
}

Co się stanie?

• jak to zadziała bez CSS to wiadomo, widać
• z CSS, h1 otrzyma w tle nasze logo z pliku logo.jpg (wysokość i szerokość h1 ustawiamy na wysokość i szerokość loga)
• tekst w kotwicy przesuwamy gdzieś w “nieskończoność”

Można sobie sprawdzić jak to zadziała w przeglądarce, która obsługuje CSS oraz np. w przeglądarce links (lub bez kodu CSS). Generalnie, enduser będzie zadowolony bo widzi ładne logo, a google bot nakarmiony tekstem …