SEO obrázky
19. 12. 2005 | Redakce Interval.cz | Pro CSS | Komentáře: 1
Pomocí tohoto řešení dosáhneme toho efektu, že se obrázek zobrazí klasicky a kvůli SEO pod něj vložíme jeho ekvivalent v textové podobě. Toto řešení zajistí, že je text viditelný i tehdy, když máme vypnuté obrázky, nelze ho ale použít u průhledných obrázků, jak ukazuje druhý obrázek v příkladu.
Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Dave Shea. Bližší popis najdete v článku Revised Image Replacement.
CSS
.obrazek
{
float: left;
margin: 10px;
}
h3
{
margin: 0;
padding: 0;
}
.obrazek .logo
{
width: 240px;
height: 30px;
position: relative;
border: solid #ddd 1px;
}
.obrazek .logo span
{
background: url(60-1.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
.pruhledny .logo span
{
background: url(60-2.gif) no-repeat;
}
XHTML
<html>
<body>
<div class="obrazek">
SEO obrázek
<h3 class="logo">
<span></span>Knihovna CSS
</h3>
</div>
<div class="obrazek pruhledny">
Průhledný SEO obrázek
<h3 class="logo">
<span></span>Knihovna CSS
</h3>
</div>
</body>
</html>
Další aktuální články na interval.cz
- Chamurappiho Webylon: čtyři články s kritikou W3C
- Nenápadný cloud: synchronizace dat z prohlížečů
- Pozvánka: Random Hacks of Kindness 2012
- Zajímavost o češtině pro redakční systém WordPress
- Pozvánka na konferenci o vyhledávačích zboží 2012
Tematicky související články
- Fotogalerie se zmenšenými obrázky a popisky
- Obrázky reagující na velikost viewportu
- Seznam s obrázky jako odrážkami
- Zakulacené rámečky
- Horizontální záložkové obrázkové menu
Dejte vědět i ostatním o článku
Komentáře ke článku
Datum vložení: 18. Listopad 2009, 22:21:15
[...] Bicykle na mieru”. Dobré riešenie na umiestnenie textu pod obrázok môžeme nájsť na interval.cz. Na druhej strane sú zbytočné alternatívne texty pri obrázkoch, ktoré nemajú žiadnu [...]
