SEO obrázky

19. prosince 2005

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>

Předchozí článek polda5.cz
Další článek apollo

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. Individual Bike | Web gallery | Beautiful websites | Webium.eu

    Lis 18, 2009 v 22:21

    […] 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 […]

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *