Correcte opmaak navigatie - gouden tip verdiend stockphoto

**Nick I** · 22-12-2011, 01:14

Hallo iedereen,

Ik loop al een tijdje met deze vraag te stuntelen. Ik heb een menu, opgebouwd uit afbeeldingen (i.v.m. teksteffecten). Hoe ga ik dit SEO-technisch opmaken?

Dus hoe gebruik ik de afbeeldingen in combinatie met de <ul> , <li>, en <a> tags? Voor een optimale scripting van de navigatie.

Waar de ene website aangeeft <img> tags binnen de <li> aanbeveelt, geeft de andere aan om background-images te definiëren voor elke <a> tag terwijl je concrete tekst invoegt en "verstopt" met een negatiefe text-indent...

Degene die mij dit verhaal eindelijk een keer duidelijk uit weet te leggen mag op mijn kosten een stockphoto uitzoeken op depositphotos [dot] com

Alvorens bedankt!

**Peter.V** · 22-12-2011, 09:48

Wat ik persoonlijk gebruik is de "Sprite" methode.

Je hebt één afbeelding waarin infeite 3 menu's onder elkaar staan.
(in mijn voorbeeld zijn hover en selected gelijk)

1) Normaal menu in rust stand
2) Menu in Hover stand
3) Menu in Selected stand

Dit bouw je op via een <ul> en <li> methode:

Code:

<ul>
<li id="diensten"><a href="/diensten" title="Diensten"></a></li>
<li id="werkwijze"><a href="/werkwijze" title="Werkwijze"></a></li>
<li id="wiezijnwij"><a href="/wiezijnwij" title="Wie zijn wij"></a></li>
<li id="portfolio"><a href="/portfolio" title="Portfolio"></a></li>
<li id="contact"><a href="/contact" title="Contact"></a></li>
</ul>

Code:

#header_menu 	{ 		width: 471px; 		height: 22px; 		float: left; 	} 	 	#header_menu ul  	{ 		height: 22px; 		list-style-type: none; 		padding: 0; 		margin: 0; 	} 	 	#header_menu li  	{ 		float: left; 		height: 22px; 	} 	 	#header_menu li a  	{ 		display: block; 		text-indent: -9999em; 		height: 22px; 		background: url("images/menu.gif") no-repeat; 	} 		 	#header_menu #diensten a  { width: 86px; background-position: 0px 0; } 	#header_menu #diensten a:hover { background-position: 0px -22px; } 	#header_menu #diensten.current a { background-position: 0px -44px; } 	 	#header_menu #werkwijze a { width: 106px; background-position: -86px 0; } 	#header_menu #werkwijze a:hover { background-position: -86px -22px; } 	#header_menu #werkwijze.current a { background-position: -86px -44px; } 	 	#header_menu #wiezijnwij a { width: 114px; background-position: -192px 0; } 	#header_menu #wiezijnwij a:hover { background-position: -192px -22px; } 	#header_menu #wiezijnwij.current a { background-position: -192px -44px; } 	 	#header_menu #portfolio a { width: 90px; background-position: -306px 0; } 	#header_menu #portfolio a:hover { background-position: -306px -22px; } 	#header_menu #portfolio.current a { background-position: -306px -44px; } 	 	#header_menu #contact a { width: 75px; background-position: -396px 0; } 	#header_menu #contact a:hover { background-position: -396px -22px; } 	#header_menu #contact.current a { background-position: -396px -44px; }

Je styled het via CSS, waarbij je de exacte breedtes en hoogtes opgeeft:

En klaar, een menu dat volledig door google wordt geïndexeerd, maar toch uit afbeeldingen bestaat. zie voorbeeld op mijn site: http://www.leadweb.nl

**gast54443** · 22-12-2011, 09:54

De li als background de image geven en vervolgens de a tag daarbinnen gewoon de SEO tekst neerzetten.

Deze li a kun je dan op visibility: hidden;

Gemakkelijk en efficiënt.

**Stefan Visser** · 22-12-2011, 10:01

Wat voor SEO het beste is? Geen images, maar teksten d.m.v. Cufon. Heb bijna nog nooit een design gezien waar het niet mogelijk is om te werken met Cufon. Heb je misschien een voorbeeldje van wat voor knoppen je in je menu wilt ?

**Gregory Courtens** · 22-12-2011, 10:03

background-images te definiëren voor elke <a> tag terwijl je concrete tekst invoegt en "verstopt" met een negatiefe text-indent...

Op die manier werk ik ook. Je maakt eerst je menu met <ul> <li>, je steekt je tekst daar in

<ul><li>Voorbeeld1</li>
<li>voorbeeld2</li>
</ul>

Daarna zet je in css een achtergrond afbeelding erin en dan kan je de tekst door middel van het te positioneren, verstoppen. Het voordeel hierbij is dat het goed voor SEO is aangezien het nog steeds op je site bevindt en niet weg is. Het is alleen verstopt.

**Nick I** · 22-12-2011, 10:09

Origineel gepost door Gregory Courtens

Op die manier werk ik ook. Je maakt eerst je menu met <ul> <li>, je steekt je tekst daar in

Daarna zet je in css een achtergrond afbeelding erin en dan kan je de tekst door middel van het te positioneren, verstoppen. Het voordeel hierbij is dat het goed voor SEO is aangezien het nog steeds op je site bevindt en niet weg is. Het is alleen verstopt.

Waar laat je je <a> tags dan?

Het betreft overigens bijgevoegde (transparante) button, het is echt naar mijn weten onmogelijk om zonder het als een afbeelding op te nemen goed te laten weergeven. Tekst bevat een shaduw-binnen/emboss.

**Peter.V** · 22-12-2011, 10:11

Dat staat dus precies beschreven in mijn Post, je "echte" link tekst wordt wel door de zoekmachines gelezen, maar je laat in plaats van tekst een gelikte button / menu item zien.

**Nick I** · 22-12-2011, 10:16

Origineel gepost door Peter.V

Dat staat dus precies beschreven in mijn Post, je "echte" link tekst wordt wel door de zoekmachines gelezen, maar je laat in plaats van tekst een gelikte button / menu item zien.

Het was een reply op de geciteerde tekst ;)

Voor wat betreft jouw oplossing, deze ben ik al wel eens tegengekomen, de sprite-methode is effectief alleen is afgezien daarvan niet wat ik nu zoek. Het gaat me voornamelijk om de SEO van het menu.

Op de manier die je aanbeveelt heeft google volgens mij niet iets concreets te indexeren behalve een <a> tag. Dat moet beter kunnen volgens mij.

Anyway, bedankt voor je reactie ;)

**Peter.V** · 22-12-2011, 10:22

Een link is een link, daar is verder geen poespas aan toe te voegen.
html kent één officiële manier van linken en dat is simpelweg de <a href="url" title="omschrijving">titel</a> methode. Uiteraard kan je ook via javascript/flash etc. verwijzingen maken maar dan kom je inderdaad uit bij het feit dat zoekmachines dat niet zo leuk vinden.

**Gregory Courtens** · 22-12-2011, 10:26

Origineel gepost door Nick I

Waar laat je je <a> tags dan?

Het betreft overigens bijgevoegde (transparante) button, het is echt naar mijn weten onmogelijk om zonder het als een afbeelding op te nemen goed te laten weergeven. Tekst bevat een shaduw-binnen/emboss.

#navigatie ul li a
{

background-image:url(Images/Buttons.png);
background-repeat:no-repeat;
}

**Nick I** · 22-12-2011, 10:31

Origineel gepost door Gregory Courtens

Haha, oke ik snap het. Nu moet je alleen nog de "tekst" verstoppen. Alleen wanneer ik nu dus probeer de werkelijke "tekst" probeer te verstoppen, verdwijnt mijn hele link.. Moet je de tekst weer voorzien van een <span> en vervolgens die span een negatieve text indent?

**Gregory Courtens** · 22-12-2011, 10:34

Origineel gepost door Nick I

Haha, oke ik snap het. Nu moet je alleen nog de "tekst" verstoppen. Alleen wanneer ik nu dus probeer de werkelijke "tekst" probeer te verstoppen, verdwijnt mijn hele link.. Moet je de tekst weer voorzien van een <span> en vervolgens die span een negatieve text indent?

Jep, je moet een span voorzien ;) normaal gezien moet dat werken.

**Nick I** · 22-12-2011, 10:36

Origineel gepost door Gregory Courtens

Jep, je moet een span voorzien ;) normaal gezien moet dat werken.

Ik ga het vanmiddag proberen!

Als je er belang bij hebt kan ik je belonen met een stockphoto afkomstig van depositphotos [dot] com. Pm me een eventuele keuze maar.

Thnx!

**Gregory Courtens** · 22-12-2011, 10:38

Origineel gepost door Nick I

Ik ga het vanmiddag proberen!

Als je er belang bij hebt kan ik je belonen met een stockphoto afkomstig van depositphotos [dot] com. Pm me een eventuele keuze maar.

Thnx!

Hier is voor het verstoppen van je tekst:

.ship
{
position:absolute;
top:-10000px;
left:0px;
overflow:hidden;
height:1px;
width:1px;
}

ik had <span class="ship">Tekst die verstopt wordt</span> gebruikt

Correcte opmaak navigatie - gouden tip verdiend stockphoto