En av utmaningarna med layout och design rörande sökmotoroptimering är att se till att varje sidas unika innehåll hamnar så högt upp som möjligt i sökmotorernas ögon. Och med sökmotorernas ögon avses inte den visuella betraktelsen av webbplatsen utan istället koden som ligger bakom. Jag beskriver här en teknik för att med DIV layout och lite CSS skapa en design som löser detta. Mina exempel viasar på den grundläggande tekniken, som ni sedan kan ta med er till era egna projekt och implementera på det sätt som ni tycker passar bäst.
Anta att vi har två huvudsakliga block på vår webbsida. Det ena, "top", som innehåller logotype, bild och navigering, och den andra, "content", som innehåller det unika textinnehållet för sidan.
"Top" skall, som namnet antyder, visuellt placeras högst upp på sidan, medan "content" visuellt skall paceras under "top".
---------------------------------------------
-
-
- TOP
---------------------------------------------
---------------------------------------------
-
-
-
- CONTENT
-
-
-
---------------------------------------------
Normalt skulle vår html kod se ut så här:
<body>
<div id="top">Logotype & meny</div>
<div id="content">
Unikt textuellt innehåll.
</div>
</body>
Detta medför att sökmotorerna som besöker webbsidan, precis som besökaren, upplever att inehållet i "top" kommer före innehållet i "content".
För att råda bot på detta krävs följande html, samt en del CSS tricks:
<body>
<div id="content">
Unikt textuellt innehåll.
</div>
<div id="top">Logotype & meny</div>
</body>
Här har jag alltså flyttat "top", så att denna kommer efter "content" i koden.
Då var det bara CSS kvar:
div#content{position: relative; margin:0; padding:0; margin-top: 150px;}
div#top{position:absolute; margin:0; padding:0; top:0px; left:0px; height:150px;}
Det är allt som krävs! Enkelt va?
Lite förklaringar:
För det första sätter jag margin och padding för "content" till 0. Detta gör jag för att säkerställa att olika browsers renderar dem likadant. Sedan sätter jag en top marginal på 150px, vilket motsvarar höjden för "top". På detta sätt skapar jag ett hålrum ovanför "content" där "top" skall rymmas.
För det andra så sätter jag positionen för "top" till absolut, och i och med att "top" inte ligger innanför något annat element kommer den absoluta psoitionen att relatera till <body>. Skulle man lägga "top" och "content" innanför ytterligare en <div> är det av yttersta vikt att den har position:relative; i annat fall kommer den absoluta positionen på "top" fortfarande att relatera till <body>. Genom att sätta attributen top och left till 0 placeras "top" högst uppe till vänster i <body>, och hamnar då i det hålrum som skapades ovanför "content".
Denna teknik är inget som skjuter upp din webbplats på första plats i SERPen, men det är ett sätt att uppfylla ett av de kriterier som, om än i liten utsträckning, påverkar sökmotorerna.
Om sidorna på en webbplats blir allt för lika varandra, rent kodmässigt, finns en risk att sökmotorer, och då specifikt Google filtrera sidorna som "liknande innehåll". En mjukare form av "duplicate content". Med den beskrivna tekniken kan man se till att det som gör varje sida unik hamnar så högt upp i sidans kod som möjligt och därigenom inte filtreras.
I förekommande fall behöver det inte bara vara en logotype och lite navigering som ligger i den <div> man vill placera längs ned i koden, fast högst upp på sidan, rent visuellt och då kan denna teknik vara väldigt hjälpsam.
