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.

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%.

www.zurb.com/playground/inline-form-labels
www.alistapart.com/articles/makingcompactformsmoreaccessible

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

Ett problem återstår dock, jag får inte bakgrundsfärgerna att bli rätt i Firefox. Body-bakgrunden ska vara grå, men innehållsdelens bakgrund ska vara vit. Trots att jag gett div:en ”content” background: #FFFFFF; så funkar det inte. Body-bakgrunden används på hela sidan.

De andra felen i Firefox som bestod av felpositionerade div:ar löstes lätt i CSS:en, och påverkade inte heller designens utseende i Opera. När det kommer till fel i Internet Explorer tvingas man (ta mig fan) alltid skapa en <!–[if IE 7]> där man får ge div:arna helt ny bredd, marginal, padding m.m. Fel som uppstår i Firefox och Opera beror ofta på att man slarvat med att ange olika mått. Rättar man till, så funkar det sedan ofta i båda webbläsarna.

Pop-up och SEO

Jag börjar med att förklara på vilket sätt sökmotoroptimeringen blir lidande av popup-fönster. Detta gäller under förutsättning att det är viktigt innehåll i popup:en som måste indexeras av Google. Jag tar ett exempel från WN där det handlade om en receptsajt som visar alla recept i ett popup-fönster. I det faller kommer en väldigt stor del av sajtens innehåll att ligga i olika popup:er.

Popup-fönstren använder sig oftast av JavaScript för att öppna det aktuella innehållet i ett nytt fönster. Google kan inte följa JavaScript (osäker på hur  det funkar nu för tiden, men det är helt klart bättre med rena HTML-länkar) på samma sätt som om fönstren skulle länkas med <a href=”"> som vanligt. Måste du använda JavaScript så bör länken se ut så här:

<a href=”recept.asp?id=123″ onclick=”window.open(this.href,’recept_window’);re turn false;”>Spaghetti och köttfärssås</a>

Då följer Google href-länken till innehållet och kan indexera det.

Problemet är dock inte löst i och med detta. Google har innehållet men kan få  problem när de ska länka direkt till recepten från sökresultatet. Ofta dyker samma problem upp som för i stort sett alla frame-baserade webbplatser. Sajten i sin helhet visas inte, utan besökaren ser bara innehållet på  recept.asp?id=123. Menyer, rubrik och kolumner försvinner och man tvingas ofta göra en länk under varje recept, något i stil med ”Ser du inte hela sajten? Klicka här!”.

Pop-up och användarvänlighet

Ur ett användarvänlighetsperspektiv kan popup-fönster vara både en bra och dålig lösning. Saker som jag tycker popup-fönster kan lämpa sig bra för är små korta notiser eller bekräftelser. Detta är innehåll som sökmotorer inte nödvändigtvis måste indexera. Meddelandena kan handla om att uppmuntra besökarna att bli medlem, eller bekräfta att ett meddelande har skickats.

Åter till receptexemplet. Om en så stor och viktig del av innehållet på sajten ligger i en pop-up finns risken att många besökare inte kommer åt innehållet. Många webbläsare nu för tiden har s.k. ”pop-up blockers” som hindrar dessa att automatiskt poppa upp på skärmen. Istället visas (t.ex. i Opera) ett litet meddelande i nederkant att ett pop-up har blockerats, och att man måste klicka på det meddelandet för att visa popup-fönstret. Många besökare har inte stenkoll på tekniken och upplever det som att sajten inte fungerar korrekt. Risken är då stor att du förlorar dessa besökare som inte hittar det de söker.

Ytterligare ett problem, som är både en SEO- och användarvänlighetsfråga handlar om djuplänkar till din sajt. Om ditt viktiga innehåll, recepten i detta fall, ligger i en pop-up så blir det svårare för andra att länka direkt till innehållet (s.k. djuplänkning). Användare som samtidigt driver bloggar kan uppleva det svårt att tipsa andra om intressanta recept. Dessutom förlorar du länkkraft i och med de uteblivna länkarna till din sajt.

Alternativ till JavaScript-popup

Lightbox är ett alternativ till de klassiska popup:erna i JavaScript. Det bygger istället på HTML/CSS och skapar ett lager ovanför sajten där nytt innehåll visas. Jag har dock inte satt mig in hur detta påverkar sökmotoroptimeringen, men spontant känns det som en mycket bättre lösning.

huddletogether.com/projects/lightbox

Sidan med hela innehållet är fortfarande huvudrubrik, men en extra länk har lagts till ”Hoppa till kapitel”. Därefter följer den vanliga korta sammanfattningen som visar i vilken kontext sökordet finns.

För att öka chansen att Google väljer att djuplänka till dessa ankarnamn bör du lägga upp en innehållsförteckning eller liknande som länkar till dem. Det verkar alltså fungera på samma sätt som att få alla sajtens sidor indexerade genom att länka till dem. Sidan bör också vara välstrukturerad och tydligt indelad i kapitel/sektioner.

Min fråga är dock hur Google värderar dessa aningen annorlunda URL:er.
http://www.doman.se/sida.html#kapitel

http://www.doman.se/sida.html

Dessa två URL:er leder ju till samma sida, med skillnaden att den översta säger åt webbläsaren att hoppa ner till <a name=”kapitel”>. Kommer dessa indexeras, värderas och rankas som om de vore två separata sidor?

Jag är lite nyfiken på att testa hur detta fungerar. Jag ser inga nackdelar, det underlättar ju för besökarna att smidigt kunna klicka sig ner till det stycke/kapitel de vill läsa. Om sedan Google väljer att länka direkt dit så är det bara positivt. Det kan göra att besökarna inte återvänder till sökresultatet för att de inte hittar till informationen de vill åt.

http://googleblog…jump-to-information-you-want-right-from.html
http://googleweb…using-named-anchors-to-identify.html

HTML
<div class=”title”>
<a href=”index.asp”></a>
</div>

CSS
.title {
width: 800px;
height: 200px;
background: url(rubrikbild.jpg) no-repeat;
}
.title a {
display: block;
height: 100%;
width: 100%;
}

<table width=”550″ align=”left” border=”0″>
<form method=”post” action=”?do=spara”>
<tr>
<td colspan=”3″ width=”550″><b>Rubrik:</b> (max 45 tecken)<br><input maxlength=”45″ name=”rubrik”></td>
</tr>
<tr>
<td colspan=”3″ width=”550″><b>Text:</b><br><textarea name=”comment”></textarea></td>
</tr>
<tr>
<td width=”245″ valign=”top”><b>Namn:</b><br><input value=”" name=”namn”></td>
<td width=”245″ valign=”top”><b>Hemsida:</b><br><input value=”http://www.” name=”hemsida” ></td>
</tr>
<tr>
<td width=”275″ valign=”top”><b>E-post:</b><br><input value=”" name=”epost”>
</td>
<td width=”275″ valign=”top”><b>Spamskydd:</b><br><img src=”grafik/kod2.jpg”><input value=”" name=”spamprot”></td>
</tr>
<tr>
<td colspan=”3″ width=”550″>
<input type=”submit” value=”Posta kommentar”>
</td>
</tr>
</form>
</table>

När formulärt är färdigt ska vi skriva ASP-koden som hämtar informationen från formuläret, lägger dem i variabler och sedan matar in dem på rätt plats i databasen. Ursäkta att koden är lite slarvigt skriven med en blandning av engelska och svenska.

<%
If Request.Querystring(”do”) = ”spara” Then
Set Conn = Server.CreateObject(”ADODB.Connection”)
Conn.Open ”Provider=Microsoft.Jet.OLEDB.4.0;Data Source=” &Server.MapPath(”databas\db.mdb”)spamprotection = Request.Form(”spamprot”)

För det första ska du bestämma dig för vilken teckenkodning du vill använda, och använda enbart denna på hela din sajt. Just nu föredrar jag UTF-8 och då lägger du till följande kod mellan HEAD-taggarna.

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>

Utöver detta kan du behöva konvertera dina HTML-filer i den texteditor eller HTML-editor du använder och därefter spara filen på nytt. I Notepad++ som jag använder görs detta enkelt genom att du väljer ”Format” i menyn och sedan ”Convert to UTF-8″. Om du kommer skapa ytterligare filer kan det även vara bra att välja denna teckenkodning som standard för nya dokument.

Dessa tjänster kan öka din sajts popularitet, det ifrågasätter jag inte. Har du bra innehåll som intresserar många så mycket att de vill tipsa andra om det så kommer fler att få reda på din sajt genom dessa personer. Det jag sätter mig emot är deras flitiga användande av NoFollow på länkarna till alla dessa sajter som utgör deras levebröd. Jag uppmanar er att göra som mig när ni länkar till dessa tjänster. Använder de NoFollow i länken till mig, så använder jag det i min länk till dem. Vill de inte dela med sig av sin länkkraft, så delar inte jag med mig av min.

Så här ser en länk med NoFollow ut:
<a href=”http://www.footbook.com” rel=”nofollow”>Footbook</a>

Om du skapar och publicerarlänkar genom en bloggtjänst så brukar man kunna välja HTML-läge när man skriver sitt inlägg. Välj då detta HTML-läge och leta reda på länken, skriv sen dit det fetmarkerade på motsvarande plats.

<meta content=”text/html; charset=utf-8″ http-equiv=”Content-Type”>

Sedan är det viktigt att du sparar dina filer i denna teckenkodning. I Notepad++ kan du t.ex. välja teckenkodning genom att klicka på ”Format” i menyn och välja bland UTF-8 m.fl.

Nackdelarna med denna typ av design är dock ganska många. Den största nackdelen är enligt mig att det är i stort sett omöjligt att djuplänka till ditt innehåll och samtidigt göra så att meny och logga syns när man går in via den länken. I en frame-design består index.html av en uppsättning FRAMESET-taggar som bestämmer hur stora de olika områdena ska vara samt vilket innehåll som ska visas när de anropas från index.html (startsidan). Den enda sidan besökaren ser i adressfältet är dindomän.se/index.html. Detta gör att besökare som vill lägga till en specifik sida på din sajt bland sina bokmärken alltid kommer skapa ett bokmärke till startsidan.

Ytterligare ett problem med rambaserad sida är att besökare som hittar den via Google ofta kommer till en undersida som egentligen ska visas i innehållsdelen på din sajt. Om länken på Google pekar mot dindomän.se/produkter.html så kommer besökaren in på produktsidan men ser inte loggan och menyn på din sajt, vilket gör det svårt att fortsätta navigera runt på den. Det finns dock sätt att komma runt detta, så att de övriga delarna ändå visas om man kommer in via ”fel” sida.

Mitt råd är att om du har en rambaserad webbplats så bör du anlita någon som kan göra en ny webbplats utan ramar åt dig, om du inte kan göra det själv såklart. Om du har en inte allt för stor webbplats så skulle jag kunna ta på mig jobbet mot en liten peng.

Om du t.ex har en div som heter row och vill styla alla länkar och all text i denna kan du skapa en form av underegenskaper till denna.

.row {width: 400px; float: left;}
.row p {text-align: left; font-family: Tahoma, Arial; font-size: 8pt;}
.row a:link {text-decoration: none; color: #000000;}
.row a:visited {text-decoration: none; color: #000000;}
.row a:link {text-decoration: underline; color: #000000;}

Det är smidigt om du vet att allt som ska finnas i elementet ska ha samma egenskaper. Då slipper du skriva ut samma class på alla p-taggarna och kan helt enkelt nöja dig med <p>Text</p>.

Har du däremot en mindre sida, men ca: fem underavdelningar så tycker jag det är en klar fördel att bara köra QueryString’s på index.asp. Du bygger helt enkelt upp sidan i sektioner (som vanligt) och låter helt enkelt innehållsytan bytas ut beroende på vilken avdelning som ska visas.

Säg att du har dessa menyval på din webbplats: Startsidan, Om mig och Mina bilder. Vanligsvis skulle du länka dessa avdelningar till filer (t.ex ommig.html). När vi använder QueryString’s kan vi välja vad på indexsidan som ska visas beroende på vad vi anropar, trots att alla ”sidor” ligger i samma fil.

Du har en innehålls-div på sidan som visar ”Välkommen till min hemsida” eller liknande på startsidan. Jag ska försöka mig på ett kodexempel nu:

<div class=”column_middle”>
<%If Request.Querystring(”page”) = ”” Then%>
<div class=”middle_content”>
<H1>Välkommen</H1>
<p>…Till min hemsida</p>
</div>
<%End If%>
</div>

<div class=”column_middle”>
<%If Request.Querystring(”page”) = ”minabilder” Then%>
<div class=”middle_content”>
<H1>Mina bilder</H1>
<img src=”bild.jpg” mce_src=”bild.jpg”>
</div>
<%End If%>
</div>

<div class=”column_middle”>
<%If Request.Querystring(”page”) = ”ommig” Then%>
<div class=”middle_content”>
<H1>Om mig</H1>
<p>Jag heter Örjan</p>
</div>
<%End If%>
</div>

Istället för att länka till olika HTML-sidor så kan vi nu säga till sidan att visa en specifik QueryString.
<a href=”index.asp”>Startsidan</a>
<a href=”index.asp?page=ommig”>Om mig</a>
<a href=”index.asp?page=minabilder”>Mina bilder</a>
Startsidan vill vi ju ha direkt under index.asp för att besökarna ska komma dit när de skriver in din URL i webbläsaren. Lämnar vi detta tomt (If Request.Querystring(”page”) = ”ommig” Then) så kommer det vara den If-satsen som visas som default.

Självklart kan du använda samma If-QueryString på fler ställen på sidan. Om du t.ex vill att något speciellt ska visas i högerkolumnen när besökaren är inne på en viss avdelning.

Hoppas jag inte har lyckats vara för svårbegriplig.

Här är ett exempel på hur en CSS-fil kan se ut, jag använder mig av de klasser jag deklarerade i HTML-filen från del 1 i denna lilla skola. Exemplen blir ganska otydliga eftersom det inte går att skriva kod så bra i bloggtexten.

BODY {
background-color: #FFFFFF;
margin-top: 0px; Gör att en eventuell automatisk marginal i överkant försvinner
margin-bottom: 0px; Samma som ovan  men i nederkant
text-align: center; /*Innehållet centreras*/
}

.main {width: 800px; Yttre DIV:ens bredd i pixlar
background-color: #FFFFFF; Bakgrundsfärg
border: 1px solid; Ram 1 pixel bred och heldragen linje, andra alternativ är ”dotted” och ”dashed”
border-color: #000000;} Ramens färg

.left_column {
float: left; DIV:en lägger sig så långt till vänster  som möjligt, i detta fall till vänster i main-diven
width: 190px;
margin-left: 10px; Bredden+vänstermarginal=200 pixlar
border: 1px dotted;
border-color: #000000;
background-color: #FFFFFF;} Kan skippas om du vill ha samma färg som i main-div:en

.right_column {
float: left; DIV:en lägger sig så långt till vänster  som möjligt, i detta fall direkt till höger om left_column eftersom den står skriven tidigare i HTML-filen
width: 580px;
margin-left: 10px; Bredden+vänstermarginal+högermarginal=600 pixlar
margin-right: 10px; Summan av alla mått blir då 800 pixlar som är bredden på main-diven 
border: 1px dotted;
border-color: #000000;
background-color: #FFFFFF;}

Nu är sidan grovt uppstrukturerad, det som saknas är innehålls-divar som vi lägger i de kolumner vi skapat. Det går jag igenom i nästa del.

<html>
<head>
<meta name=”title” content=”Hemsidans namn samt mycket kortfattad information/nyckelord”></meta>
<meta name=”description” content=”Beskrivning av webbplatsen”>
<meta name=”keywords” content=”Nyckelord separerade med mellanslag”>
<meta name=”robots” CONTENT=”all, index, follow”>
<meta name=”GOOGLEBOT” content=”all, index, follow”>
<meta name=”revisit-after” CONTENT=”2 days”>
<meta name=”copyright” content=”T.ex ditt namn eller webbplatsens domän”>
<meta name=”distribution” content=”Global”>
<meta name=”language” content=”sv”>
<link href=”style.css” type=”text/css” rel=”stylesheet”>

<title>Din sida – En sida om bla bla</title> 
</head>

<body>
     Här kommer sidans innehåll läggas
</body>
</html> 

Det enda som ska vara unikt för vare enskild HTML-sida är <title>-taggen. Gör en ny för varje avdelning eller liknande som beskriver den aktuella avdelningen på ett bra och sammanfattat sätt. Helst så kortfattat som t.ex ”Dinsida.se – Information” eller ”Dinsida.se – Kontakt”.

Här nedan går jag in lite kort på hur du kan strukturera upp innehållet på din webbplats med hjälp av DIV:ar. Jag hoppar direkt in mellan <body>-taggarna i detta exempel.

<body>
<div class=”main”> DIV:en main påbörjas
        <div class=”left_column”> DIV:en main påbörjas
        </div> DIV:en left_column avslutas

        <div class=”right_column”> DIV:en right_column påbörjas
        </div> DIV:en right_column avslutas
</div> DIV:en main avslutas
</body> 

Genom att tilldela dessa DIV:ar ett ”class-namn” kan vi ge dem alla de egenskaper vi vill i en separat CSS-fil. Det är en mall eller instruktion till webbläsaren för hur informationen ska presenteras. Men det går jag igenom i nästa del.