Tvivelaktig design-metod?
Jag kommer ifrån "design-sidan" när det gäller webbsidor, men har försökt ta till mig så mycket SEO-tänk som möjligt på senare tid.
Koden längst ner är ett exempel på en design-metod som jag ofta använder. En av mina "ledmål" är att separera innehåll och presentation så mycket det går när jag gör hemsidor. Med det i åtanke så brukar jag hålla nere antalet img-taggar i html-koden (innehålls-delen) och istället ange dom i css-koden (presentations-delen). Med detta synsätt så är t ex en img-tagg motiverad när det gäller ett fotografi, men det är t ex inte motiverat när det gäller att visa en rubrik i en häftigare font.
Det jag undrar nu är ifall denna metod är något som kanske egentligen inte borde användas när det gäller SEO, och främst då Google. Det jag tänker på är då t ex denna sida som beskriver att Google inte gillar att man "gömmer text".
http://www.google.com/support/webmas...y?answer=66353
Detta jag gör skulle kunna anses vara ett sätt att "gömma text" och "ersätta den med bilder" var det jag tänkte. Vad tycker ni? Är detta något som kan vara skäl nog för penelty eller dyligt på Google och alltså borde undvikas?
I korthet det som koden gör är att den flyttar själva texten som står i html-koden och placerar den 9999 pixlar åt vänster (texten hamnar då utanför det se-bara området i webbläsaren), och placerar en bild i det utrymmet där texten "i vanliga fall" skulle stå. Ni kan se det hela i sin helhet i det korta exemplet nedan.
Kod:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
padding: 0px;
margin: 0px;
}
h1 {
text-indent: -9999px;
width: 100px;
height: 100px;
background: url(en_bild.jpg) no-repeat top left;
}
h1 a:link, h1 a:visited, h1 a:hover, h1:active {
background: none;
text-decoration: none;
display: block;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<div>
<h1><a href="en_url.htm">En rubrik</a></h1>
</div>
</body>
</html>
