En alltför vanlig metod som många använder sig av när de skapar konst på internet är att göra en design i Photoshop, eller motsvarande programvara, som de delar upp i småbilder som i sin tur placeras i en tabell eller vad det nu kan vara. Den lösningen är varken flexibel eller sökmotorsvänlig. Du ska såklart använda dig av CSS!
Självklart kan man använda sig av bilder, men man bör till exempel använda sig av så många textrubriker som möjligt. Som ni kanske vet indexerar sökmotorer html-taggar som h1 och h2 för att kolla om det finns intressanta saker på din hemsida som passar olika sökningar.
Ett enligt mig mycket enerverande problem i dag är att det finns allt för få standardfonter. Man kan alltid surfa runt och ladda hem snygga fonter på hemsidor som DaFont, du kan dock inte applicera dessa fonter på texter på din hemsida utan att göra bilder.
Jag tänkte föreslå ett sätt att göra bilder lite mer sökmotorsvänliga mha css. Vi ska göra en bild med hovereffekt, som också innehåller en header-tag (som tex h1, h2 osv). Det kommer också att visa sig att hovertekniken som vi ska använda klarar av att laddas direkt, vi slipper fula blinkningar etc.
Följande är vad vi ska skapa:
<a href=”DinURL” id=”bildklass”>
<h2>Beställ här</h2>
</a>
..Dådå?
Vi använder oss av en länk med en rubrik i. Det skulle också kunna vara en länk med en span-tagg i, det är upp till dig att bestämma. I vissa situationer kan det kännas mer korrekt. Om vi skulle visa detta utan CSS skulle vi bara se en länkad rubrik. Nu ska vi införa bilder och göra så att texten inte längre syns mha CSS!
#bildklass,
#bildklass h2{
display:block;
width:120px;
height:40px;
position:relative;
overflow: hidden;
}
#bildklass h2{
margin:0px;
height:80px;
text-indent:-9000px;
background-image: url(Untitled-1.jpg);
background-repeat: no-repeat;
background-position: left top;
}
#bildklass:hover h2{
top:-40px;
}
So..?
Du ska tolka CSS-koden på följande sätt… tänk dig att a-taggen (bildklass) är ett fönster mot det du ser. Vi sätter en storlek på fönstret och börjar sedan manipulera det vi ska visa (h2).
Det är väldigt fina css-tekniker du visar upp. Ur ett sökmotorperspektiv (google) är det dock inte helt okej, detta då du visar ett innehåll för sökmotorerna och ett för besökarna. Det riskerar att få dig banad, sökmotorerna kan omöjligen veta om du visar en text för besökarna och en text för sökmotorerna. Min rekommendation är att använda alt-texten på bilden istället.
Google kommer inte att banna dig om du använder h-taggarna på rätt sätt. Självklart ligger du i riskzonen om du slänger in spamm i din logotyp-markup som du sedan gömmer med CSS.
. Man kan också, som jag nämnde, överväga att använda sig av span istället för h-taggarna. Poängen med inlägget var egentligen den laddningsfria bildhovern, man kan skippa text i h-taggar och köra span utan text, det funkar pss (ingen text-indent nödvändig).
Om du istället skriver ditt företagsnamn är det ok.
Det är kanske ett bra alternativ att använda sig av en alttext istället för text-indent, kan dock bli lite jobbigare att styra hover-states osv
Varför wrappar du länk runt om ett block-element? Det känns inte ok.
Istället lägg länken inuti rubriken, gör länken till display: block.
Lägg även id på rubriktaggen istället
#rubriken a {background: url(bild) no-repeat 50% 0%; text-indent:-9999px}