E 'possibile avere collegamenti di ancoraggio senza testo all'interno che abbia un'immagine di sfondo e dimensioni fisse e sia comunque buono per la SEO?Link di ancoraggio XHTML con immagine di sfondo e senza testo
Esempio CSS:
a{display:block;width:50px;height:20px;background-image:url('images/background.jpg');background-repeat:no-repeat;background-position:0 0;}
a:hover img{background-position:0 -20px;}
Esempio HTML:
<a href="#"></a>
Se l'immagine contiene del testo o semplicemente si desidera aggiungere la sua descrizione, una cosa che si può fare per aiutare SEO e accessibilità è dare all'ancora un titolo e un contenuto con un ampio testo negativo, come aggiungere questo al tuo a CSS:
display:block;
text-indent:-9999em;
... con il seguente codice HTML:
<a href="#" title="IMAGE TEXT">IMAGE TEXT</a>
Questo è qualcosa che potrei fare grazie, tuttavia non sono mai stato un fan di questo tipo di nascondigli di testo. Grazie ancora! – Francisc
Se il testo si trova nell'immagine di sfondo ma non si nasconde, lo fornisce per gli screen reader che altrimenti non lo vedrebbero senza influire negativamente sul design. – mVChr
Sì, conosco bene questo metodo, mi è appena sfuggito di mente. Solo che non mi piace troppo, ma potrebbe essere il modo migliore per farlo ora. – Francisc
Il motore di ricerca non può leggere, così come sarebbe un bene per SEO? Ancora più importante, perché vuoi fare questo, cosa stai cercando di fare?
Voglio usare sprite, questo è lo scopo principale. Molto bene sul fatto che i motori non fossero in grado di leggere il contenuto, stavo pensando che avrebbero seguito il link e letto il contenuto della pagina, non ci pensavano come lo metteste. Grazie! – Francisc
Dopo aver letto i tuoi altri commenti, solo un rapido pensiero. Potresti forse inserire la tua immagine di sfondo/sprite nel link, come un'immagine all'interno della a, e quindi sfalsare l'immagine all'interno di un tag usando i CSS sul passaggio del mouse. (Non ho pensato a questo, ma potrebbe essere qualcosa da guardare se si vuole intraprendere questa strada).Sto solo usando sprite per pulsanti/link quando il sito non è ricercabile personalmente. – plebksig
Usa alt e titolo attributo, ma che non hanno contenuti all'interno dei tag è pointless.I pensare che ci sia un serio rischio di essere penalizzato nei risultati di ricerca!
Ancora una volta, perché stai provando questo. Stai facendo pulsanti che collegano ad un'altra pagina o che esegui una funzione javascript?
Sono fondamentalmente link con immagini, solo che volevo che le immagini fossero sprite a causa di un problema con la larghezza di banda del client e la grande quantità di tali collegamenti. Normalmente inserisco le immagini all'interno dei link e lascia che JavaScript scambi le immagini. – Francisc
Inoltre, sono pulsanti normali, ma il testo è sull'immagine e voglio avere sprite dove il passaggio del mouse cambia posizione di sfondo. – Francisc
Ispirato al commento di neXib su un'altra risposta.
HTML:
<a href="/home" title="Homepage" class="home">
<div><img src="/images/sprite.png" alt="Home" /></div>
</a>
CSS:
a {
display: block;
}
.home div {
width: 84px;
height: 27px;
overflow: hidden;
position: relative;
}
.home div img {
position: absolute;
top: -65px;
left: -20px;
}
Finché il div ha 'overflow: hidden' e dimensioni fisse l'immagine all'interno può essere posizionata all'interno di visualizzare solo la parte del sprite che vuoi
Anche la SEO è stata una preoccupazione e penso che questa soluzione funzionerà correttamente.
L'unico problema è che se le immagini sono disattivate o impossibili da trovare, il testo alternativo verrà nascosto a causa del posizionamento. Ma è ancora meglio di un tag di ancoraggio vuoto e utilizzando il posizionamento dell'immagine di sfondo css. – benjovanic
Non risolverà questo problema?
<a href="#"> </a>
Beh, questa è una domanda un po 'vecchia ma voglio solo un'opinione su questo!
Il mio approccio iniziale era sbagliato, nessun testo è privo di significato per l'accessibilità e i motori di ricerca. L'aggiunta di ' ' non aiuta, pubblicizza solo alcuni caratteri extra. – Francisc
Se si tratta di un collegamento, quindi fa qualcosa quando si fa clic su di esso. Se fa qualcosa, l'utente deve sapere cosa fa. Quindi ha bisogno di contenuti. Un'immagine ** di sfondo ** non è contenta. Usa un '![]()
' con un attributo 'alt' e smetti di ossessionare le micro-ottimizzazioni contro gli algoritmi segreti. –
Quentin
Ho dei motivi per chiederlo, grazie per il tuo commento però. – Francisc