Hårdbantad statisk HTML-sajt

Sökmotorer gillar läsbar text och ogillar att plöja igenom diverse kod. Därför har jag skapat en superslimmad sajt med så lite HTML-kod som möjligt. Det finns dock ytterligare saker att göra. T.ex. går det att korta ner alla id:n till ett tecken. Jag har dock valt att förkorta måttligt för att behålla en gnutta innebörd med dem. Mycket av vinsten görs genom att olika element ärver sina egenskaper i CSS:en. Jag har dessutom hållit nere antalet divar.

Namnet Simpleton on a Diet kommer av att jag skapade en simpel exempelsajt åt en vän. Simpel blev Simpleton i mitt huvud, och den nedbantade versionen blev ”on a diet”. Designen får användas fritt med ett enda förbehåll. Att länken till Wedholm.net längst ner lämnas orörd.

Sajten kan ses på www.wedholm.net/simpleton-on-a-diet/ och hämtas hem som rar-fil här.

Vill du inte använda just denna design så hoppas jag den kan hjälpa dig att utnyyttja CSS till sin fulla potential.

I efterhand tillagt: Upptäckte precis att simpleton betyder stolle. Det hade  jag faktiskt ingen aning om. Denna upptäckt gjordes på denna blogg som får lite oväntad länkkärlek.

Viktig onpage-optimering

Det har blivit glest mellan blogginläggen den senaste tiden, men här kommer ett inlägg om några viktiga punkter vad gäller onpage SEO.

Intern länkstruktur

Den interna länkstrukturen är viktig för att sprida länkjuicen till alla sidor på webbplatsen. Är webbplatsen liten (10-15 sidor) kan man med fördel länka alla sidor från startsidan, är den stor eller medelstor (~30+ sidor) måst man hitta en bra struktur med avdelningar och underavdelningar. Att de interna länkarna innehåller optimala ankartexter är av yttersta vikt för din ranking. Detta är egenkontrollerade och gratis länkar som inte ska slösas bort. Länka också flitigt mellan texter på webbplatsen när en sida berör en annan sidas ämne, Wikipedia-metoden så att säga.

301 Redirects

Peka om sidor som bytt namn så att ingen länkjuice går till spillo. Det är också viktigt att göra ompekningar mellan IDN- och icke-IDN-domän, men även från www-variant till icke-www eller vice versa. Alla ompekningar ska ske med en s.k. 301 Permanent Redirect.

Minimera andelen kod

Håll nere andelen kod i förhållande till läsbar text så mycket det bara går. Med hjälp av CSS kan man få bort otroligt mycket onödig HTML-kod. Istället för extra divar för positionering m.m. kan man sätta margins och paddings på andra taggar och helt skippa många divar. Låt också de olika elementen ärva egenskaper från huvudelementen. Har du en div som har klassen ”left” kan du skippa många klasser på underliggande taggar. Detta genom att exempelvis skriva: div.left span eller div.left a i CSS-filen för att styla alla span och a-taggar i ”left”.

Att använda utdaterad HTML som font-taggar, hoppas jag du förstår, är strängt förbjudet om du pysslar med någon form av webbutveckling.  Detta gör att det skapas otroligt mycket onödig kod vilket kommer missgynna din SEO.

Bra innehåll

Floskelvarning, men det är faktiskt så att bra innehåll automatiskt får inlänkar. Skriver du användbara och utförliga guider så kommer andra med största sannolikhet att länka till dig.

Markörer och Google Maps API

Efter gårdagens trixande med Google Maps API har nu den nya kartan över Lübeck gått live. Ändringarna bestod i att skapa markörer i olika färger, samt hämta alla uppgifter från en XML-fil istället för att skriva in dem direkt i Javascript-koden. Beroende på vilken kategori en plats som en markör märker ut visas de i en viss färg. Smidigt för att göra det tydligt för besökaren var t.ex. de flesta hotellen är belägna. Det går nu också att välja vilka markörer som ska visas genom att man markerar en checkbox framför varje kategori. På så sätt kan man låta besökaren rensa bort de markörer som de tycker är ointressanta.

Så här gör man markörer i olika färger

Vi börjar med den sida som kartan ska visas på. Där ska du lägga till följande mellan head-taggarna:

<script type="text/javascript" src="/includes/googlemaps.js"></script>

Sidans body-tagg ska se ut så här:

<body onload="load()" onunload="GUnload()">

Sedan skapar du en div som ska visa kartan:

<div id="map_canvas" style="width: 560px; height: 460px;"></div>

Därefter fortsätter vi med filen som jag väljer att kalla googlemaps.js som ska importeras. Detta är den kod som laddar kartan och här bestämmer du t.ex. var den ska fokusera och hur långt inzoomad den ska vara.

<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA5_z27XiV9IUwFjySmL26Twi6fo-Ki2hRGzIEzOIGoH2zKVDNT8MNja1mdng"
      type="text/javascript"></script>
    <script type="text/javascript">
    //<![CDATA[

    var iconBlue = new GIcon();
    iconBlue.image = 'images/graphics/mm_20_blue.png';
    iconBlue.shadow = 'images/graphics/mm_20_shadow.png';
    iconBlue.iconSize = new GSize(12, 20);
    iconBlue.shadowSize = new GSize(22, 20);
    iconBlue.iconAnchor = new GPoint(6, 20);
    iconBlue.infoWindowAnchor = new GPoint(5, 1);

    var iconRed = new GIcon();
    iconRed.image = 'images/graphics/mm_20_red.png';
    iconRed.shadow = 'images/graphics/mm_20_shadow.png';
    iconRed.iconSize = new GSize(12, 20);
    iconRed.shadowSize = new GSize(22, 20);
    iconRed.iconAnchor = new GPoint(6, 20);
    iconRed.infoWindowAnchor = new GPoint(5, 1);

    var customIcons = [];
    customIcons["restaurang"] = iconBlue;
    customIcons["hotell"] = iconRed;
	var markerGroups = { "restaurang": [], "hotell": []};

    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(53.86892, 10.67165), 13);
		map.addControl(new GLargeMapControl());
        map.addControl(new GMapTypeControl());

        GDownloadUrl("includes/markerdata.xml", function(data) {
          var xml = GXml.parse(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var address = markers[i].getAttribute("address");
            var type = markers[i].getAttribute("type");
			var link = markers[i].getAttribute("link");
            var point = new GLatLng(parseFloat(markers[i].getAttribute("lat")),
                                    parseFloat(markers[i].getAttribute("lng")));
            var marker = createMarker(point, name, address, type, link);
            map.addOverlay(marker);
          }
        });
      }
    }

    function createMarker(point, name, address, type, link) {
      var marker = new GMarker(point, customIcons[type]);
      markerGroups[type].push(marker);
      var html = "<p class='maptitle'>" + name + "</p><p class='mapadress'>" + address +"</p><p class='maptext'><a href='"+ link +"' class='intmap'>Läs mer om " + name + "</a></p>";
      GEvent.addListener(marker, 'click', function() {
        marker.openInfoWindowHtml(html);
      });
      return marker;
    }
    function toggleGroup(type) {
      for (var i = 0; i < markerGroups[type].length; i++) {
        var marker = markerGroups[type][i];
        if (marker.isHidden()) {
          marker.show();
        } else {
          marker.hide();
        }
      }
    }
    //]]>
  </script>

Slutligen kommer vi till XML-filen (markerdata.xml) som innehåller information om alla markörer.

<markers>
 <marker name="Hotel Alter Speicher" address="Beckergrube 77" lat="53.869598" lng="10.680524" type="hotell"/>
 <marker name="Historischer Weinkeller" address="Koberg 8" lat="53.87097" lng="10.69079" type="restaurang"/>
</markers>

Det ska vara det hela. Nu ska du ha en karta som visar markörer i olika färger beroende på vad du skrivit in i attributet ”type” i XML-filen.

Visa eller dölj markörer

För att visa eller dölja markörer använder vi oss av checkboxar. Denna kod placerar du förslagsvis under diven som visar kartan.

<input style="background-color: #ff0000; border: 1px solid #ffffff;" onclick="toggleGroup('hotell')" checked="checked" type="checkbox" /> Hotell <br />
<input style="background-color: #ffff00; border: 1px solid #ffffff;" onclick="toggleGroup('restaurang')" checked="checked" type="checkbox" /> Restauranger

Jävla skitfel!

Ursäkta rubriken men jag är aningen upprörd nu. Det är helt och hållet mitt fel, vilket spär på upprördheten. Jag har suttit och felsökt ett stycke kod till Google Maps i lite över en timma utan att fatta vad som var problemet.

Det visade sig dock vara otroligt simpelt! Jag hade helt enkelt missat att göra om & till &amp; i XML-filen. Var bara tvungen att skriva av mig lite irritation.

Rundade hörn och skugga med CSS3

Nu har jag kommit över en mycket bra CSS-lösning för att (en gång för alla) lösa det eviga problemet med rundade hörn i olika webbläsare.

Så här ser CSS-lösningen ut:

.box {
	-moz-border-radius: 15px; /* Firefox */
	-webkit-border-radius: 15px; /* Safari and Chrome */
	border-radius: 15px; /* Opera 10.5+, future browsers */-moz-box-shadow: 10px 10px 20px #000; /* Firefox */
	-webkit-box-shadow: 10px 10px 20px #000; /* Safari and Chrome */
	box-shadow: 10px 10px 20px #000; /* Opera 10.5+, future browsers and IE6+ using IE-CSS3 */
	behavior: url(ie-css3.htc); /* This lets IE know to call the script on all elements which get the 'box' class */
}

Vill man få det att funka i Internet Explorer behövs även filen ie-css3.htc som ni ser är inkluderad i CSS:en. Ladda ner den och placera den i rootkatalogen på din webbplats. IE väljer som bekant att gå sin  egen väg och strunta i detta fall i standarder som relativa sökvägar.

Diven som ska få rundade hörn måste även ha ett högre z-index än omkringliggande element, samt ha position relative eller absolute.

Jag har under kvällen implementerat denna lösning på www.lübeck.nu och det funkar bra. Jag sparade dessutom 22kB i ren kod på hela sajten. Med min förra lösning bestod varje ruta av 3 st divar. Hoppas ni också har nytta av det. Måste dessutom ge cred till Kratz (som jag f.ö. hittade genom Snurra) och fetchak.com/ie-css3.

Full koll på XHTML

Nu har jag bestämt mig för att få full koll på XHTML, eXtensible HyperText Markup Language. Jag har sedan tidigare känt mig ganska säker på hur man skriver korrekt XHTML. Det handlar mycket om att stänga, och att inte nästla, taggar om vartannat. Ungefär som att skriva korrekt HTML utan slarv. Det skiljer sig dock från vanlig HTML eftersom man i XHTML även måste stänga tomma element, t.ex. <img src=”bild.jpg” />.

Jag lyckades utan större problem koda om en av mina webbplatsmallar till XHTML. Efter en stund kom jag ju på att man inte kan använda ”target blank” i XHTML Strict, vilket gjorde att jag tog den enkla vägen och körde på Transitional. Det här med target blank har ju även inom HTML Strict varit borttaget sedan länge, men jag tycker det är ett så användbart attribut att jag vill fortsätta använda det. Alternativet är t.ex. att gå omvägen och lösa det med Javascript, men det är varken en fin eller smidig lösning enligt mig.

Kort om XHTML

  • Stäng alla element, även de tomma. <br />
  • Nästla inte elementen. <p><b></b></p>
  • Använd bara gemener i HTML-koden. <body>
  • Använd inte gamla HTML-element, t ex <font>

Kolla upp sajtens laddningstid

Det ryktas om att Google börjar straffa sajter som tar lång tid att ladda. Detta tror jag att Google redan gör, men inte genom att mäta laddningstiden. Om en sajt tar lång tid att ladda ökar risken att användarna inte orkar vänta, och klickar sig tillbaka till sökresultatet. Detta tolkar Google i sin tur som en avvisning (bounce), och ett tecken på att din sajt inte var relevant för den aktuella sökningen.

Websiteoptimization.com har en bra tjänst som mäter laddningstiden på din sajt vid olika uppkopplingshastigheter. Här får du också en utförlig rapport om de faktorer som påverkar sidans laddningstid, samt tips på hur du åtgärdar detta och inom vilka gränser du ska hålla dig.

Detta område av sökmotoroptimeringen är nog det jag tycker är svårast. Det handlar om att banta ner olika delar av innehållet på sidan. Många gånger är det saker man inte vill ta bort eftersom det försämrar för besökaren på andra områden. Det kan t.ex. vara färre antal bilder som dessutom är av sämre kvalitet (mer komprimerade). Tack och lov använder jag inte mycket Javascript på mina sajter, bortsett från annonser och statistik.

Anpassning till Internet Explorer

Nu har jag tagit mig i kragen och äntligen fixat till Bilsemester.net och Lübeck.nu så att dessa ser ut som de ska i Internet Explorer och Firefox.  detta gäller i varje fall version 7 av Internet Explorer, de övriga orkar jag inte kolla upp just nu. i Firefox var problemet störst, men enklars att åtgärda. Där handlade det om en höjd på menyn som inte var tillräckligt tydligt definerad. det gjorde att innehåller hoppade ner och lade sig under en kolumn med en Adsense-enhet. Anpassningen till IE (7) var lite pilligare. Där var jag tvungen att göra en en separat CSS-fil som köra om användaren kommer via IE. Detta sköts via ett lite ASP-kod som känner av vilken webbläsare som används. Åtgärderna för att få sajterna att fungera i IE handlade om att på många ställen helt ange nya mått på olika DIV:ar.

Nu när detta arbete  äntligen är gjort hoppas jag på ökade intäkter från sajterna. Besökarna som använder IE kunde nämligen inte se högerkolumnen med annonser direkt, eftersom den tidigare hoppade ner och lade sig längst ner på sidan. Firefox-användarna däremot såg tidigare bara Annonser i en smal kolumn överst på sajten. Detta kan ju faktiskt ha gjort att de klickade på annonser oftare. Detta kan påverka intäkterna lite eftersom 22% av besökarna använde Firefox. Andelen för Internet Explorer är 68%.

Korrekta rubriktaggar

Jag har säkert gått igenom detta tidigare, men det tål att upprepas. Ett vanligt och onödigt riskabelt sätt att hantera rubrik-taggarna är att fylla dessa med ytterligare HTML-taggar. Det handlar främst om att länka texten inom rubriktaggen, eller att placera en IMG-tagg innanför <h1></h1>. Enligt min vetskap är det enda som ska finnas inom rubrik-taggarna (gäller samtliga; h1, h2, h3 osv.) är läsbar text. ASP– eller PHP-kod är såklert undantagen om denna endast är till för att generera läsbar text.

Länkar i rubriker

Jag har stött på fall där personer försökt öka värdet på en länktext genom att placera hela länken inom en rubriktagg. Som bekant värderas ju sökord i rubriker mer än när de enbart förekommer i brödtexten. Den enkla, och smått ogenomtänkta slutsatsen som dragits är att rubriktaggen på något magiskt sätt skulle öka värdet på sökorden. Jag är medveten om att WordPress länkar rubriker hej vilt, så är det även på denna blogg. Jag är ganska säker på att det inte uppskattas av Google om det görs i syfte att öka sökordens värdering. Om det sker någon bestraffning kan jag inte säga säkert, troligtvis inte, då miljontals WordPressbloggar skulle göra sig förtjänta av smisk. Mer troligt är nog att Google inte gör någon skillnad på dessa länkar överhuvudtaget. Det som däremot händer är att text/kod-ration på din sajt försämras. Onödigt mycket kod är inte bra! Om du bygger dina sajter från grunden, eller om det inte är för mycket jobb med att ändra befintlig design, vill jag bestämt avråda från ”onaturliga” ingrepp i rubriktaggarna.

Bilder i rubriker

Det förekommer även att img-taggar läggs inom rubriktaggarna (h1 osv.). Detta beror nog till största del på bristande HTML/CSS-kunskaper hos hemsidesnickaren. Vill man exempelvis ha en bakgrundsbild på rubriken ska man använda CSS till detta. H1 {background-image: url(bild.jpg) no-repeat;}

Det finns dock fall då orsaken inte är bristande kunskaper, utan ett försök att få vissa bilder att ranka bättre på Google’s bildsök. Inte att rekommendera! Kör på som vanligt med relevanta ALT- och TITLE-attribut istället.

Fler diskussioner om länkar i rubriktaggar

webmasterworld.com/search_engine_promotion/3155486.htm