Informationsarkitektur

Din webbplats struktur.

Första tre sidorna viktigast i sökresultatet

Nu är det äntligen bevisat i en undersökning. Få bryr sig om att söka längre än till sidan tre skriver Computer Sweden för IDG.se.

62 procent klickar på länkarna på första sidan. Totalt 90 procent klickar på någon av länkarna som finns på de tre första sidorna.

Dessutom byter knappt hälften sökmotorer om de inte hittar vad de söker på första sidan.

(Gissa om den här undersökningen kommer att anammas av sökpositioneringsföretag som ”det gäller att ligga på topp” och så vidare.)

Så använder du drop-downs effektivt i din navigation

Som jag har skrivit tidigare så bör man inte använda drop-down-listor som menyer. De går inte att överblicka, ger problem med tillgängligheten och är ett hinder för sökmotorer.

Men jag vill fylla på med en sak. Drop-down-listor kan vara bra vid speciella tillfällen när användaren på förhand vet vad som finns i den.

Det kan vara när användaren ombeds att välja en månad eller ett län. Alla vet att det finns tolv månader och det kommer därför inte som någon större överraskning när vi klickar på drop-down-listan. Att skumma igen tolv helt okända och slumpvist ihopsattta alternativ kräver betydligt mer tankearbete. Tankearbete är något ska man förhinda för besökaren i så stor utsträckning som möjligt.

Dock bör man inte försöka lägga in alla kommuner i en lista och be användaren att välja ett alternativ. Det finns 290 kommuner i Sverige och det krävs lite fingerfärdighet för att hitta rätt.

I fallet med kommunerna är det bättre att försöka låta användaren klicka sig djupare. Kanske börja allmänt med att välja län, därefter välja en av kommunerna i länet i en ny drop-down. På så vis blir det fler klick, javisst, men det blir å andra sidan betydligt mindre att överblicka i taget.

Det finns tester gjorda på hur många ”nivåer” en användare föredrar att gå i en hieraki och vilken metod som anses bäst. Vill du veta mer om navigation? Läs en studie där sex typer av navigeringar har testats: A Study of Website Navigation Methods.

Döp inte din samling med länkar till ”länkar”

Har du länkar på din webbplats? Såklart du har. Men många av oss har även länkar till andra sidor än våra egna. Vi försöker ofta sortera dessa under en egen rubrik och i många fall döps de just till ”länkar”. Men det är motsägelsefullt eftersom länkar finns överallt och är en förutsättning för nätet.

Därför vill jag ge några förslag på bättre ord som kan användas i stället för länkar:

  • Hittat på nätet
  • Surftips
  • Externa länkar
  • Resurser
  • Andra/liknande webbplatser

Jag skulle vilja lägga till ”länkarkiv” och ”länksamling” i listan, men det är som jag sa först, motsägelsefullt. Man vet inte om det är en samling av länkar som finns på webbplatsen eller på andra webbplatser. Inte heller vilken typ eller ämne av länkar det är frågan om.
Välj något av detta eller hitta på något som passar ditt språk på webbplatsen och de som besöker den. Det finns inga rätt eller fel, men däremot finns det saker som fungerar bättre än andra.

Tre exempel på metadata in action

Mitt förra inlägg om metadata gav en del kommentarer som ”Varför använder du inte själv Dublin Core?”.

Det verkar vara en viss övertygelse om att man inte kan predika om bra saker utan att själv använda det. Jag tillämpar många av mina tips som jag ger, men inte alla. Det kan bero på att de inte passar mig eller för att jag inte har tid eller resurser att implementera dem. Dessutom faller det inte alltid in med min målsättning, vilket är en grundförutsättning för att ens tänka på dem.

I fallet med Dublin Core så har jag för närvarande ingen vinning att använda det och väljer däför att lägga min tid på annat. En prioritering helt enkelt. Därmed inte sagt att den prioriteringen är särskilt smart eller bra, men det är mitt val och du behöver inte göra detsamma. Dublin Core kanske passar just dig perfekt? (För övrigt genereras Dublin Core automatiskt tillsammans med mina inlägg, så jag behöver inte ens lyfta ett finger, men det är inte det som är min poäng.)

För att försöka reda ut begreppen ger jag tre klockrena exempel där metadata används och ger maskinsökbara gränssnitt:

Dating – Match.se

En förutsättning för datingsajter av olika slag är sökfunktionen. Där brukar man kunna söka efter kön, ålder, längd, intressen och geografisk placering.

Sökruta för dating

Alla dessa sökegenskaper är metadata om personen man söker. Ju fler metadata man söker efter, desto mer begränsat blir sökresultatet (och därmed troligare den person man söker).

En förutsättning för att detta ska fungera är att alla personer anger fullständig metadata om sig själv. Det är ofta här problemet ligger, inte minst inom dating, utan också med allt webbinnehåll. Det finns för lite information om webbinnehållet för att kunna utföra mer än fritextsökningar.

En sökmotor som Google skulle aldrig klara att söka på detta viset. Den är inte optimerad för denna typ av metadata.

Musik – iTunes

Det gäller vilken musikspelare som helst egentligen, men med iTunes kan du ”tagga” låtarna med exempelvis årtal, genré, antal spelningar och betyg. Genom detta kan man få fram låtlistor med enbart 90-tal, enbart pop, mest spelade eller högst betygsatta.

iTunes låter dig välja 90-talsmusik

Den metadatastandard som används för detta kallas ID3.

Med andra ord hjälper metadata dig att komma åt ditt material på olika sätt – genom att leta upp en låt i en bestämd genré eller söka efter ”den där låten” som José González spelar på akustisk gitarr. Söka efter kvinnor i 25-årsåldern i hela Sverige eller skumma igen en lista med alla kvinnor som bor i Stockholms län är heller inget problem.

Metadata är en grundläggande term inom informationsarkitektur, och något som är nödvändigt för att få en bred, flerkanalig automatisk väg till informationen.

Den semantiska webben

Tro det eller ej, men den semantiska webben är baserad på metadata. Tanken med semantik (som handlar om ords betydelser) är att märka upp en webbsida med huvudrubrik, underrubrik, viktiga ord och så vidare. Genom att visa en lista över dessa viktiga har vi samtidigt metadata.

Alltså fungerar semantik också som metadata. Men metadata behöver nödvändigtvis inte vara semantik.

Använder du metadata effektivt?

Metadata betyder data om data. Det låter en aningen abstrakt första gången man hör det, men det handlar enbart om egenskaper för ett objekt.

Om vi tar en bil som exempel kan metadatan bestå av färg, bilmodell, antal dörrar, motorstorlek, cylindrar och så vidare. För en webbsida består metadata exempelvis av författare, publiceringsdatum och beskrivning.

Nyttan med metadata är inte helt uppenbar vid en första anblick. Men om du märker upp dina webbsidor stategiskt med rätt metadata kan man göra underverk för sin webbplats. Inte minst för att underlätta för sökmotorer (både för Google och de interna sökmotorerna på webbplatsen). Grundtanken med metadata är att den ska läsas av en maskin eller ett script.

Om du bloggar själv har du säkert hört talas om att ”tagga” inlägg. Skriver du inlägg om nyheter från Sverige kan du ”tagga” inlägget med nyckelord som exempelvis ”Stockholm” och ”Göteborg”. Därefter kan man sammanställa en lista över alla inlägg om Stockholm och så vidare.

Metadata kan du alltså utforma precis hur som helst, men det finns några standarder som du kan använda. En av dem är Dublin Core som tagits fram speciellt för internet. Den innehåller 15 element (eller fält) och alla är valfria.

De 15 elementen i Dublin Core är följande:

  1. Title
  2. Creator/Author
  3. Contributors
  4. Subject/Keywords
  5. Description
  6. Publisher
  7. Dates: creation; last modified
  8. Identifier
  9. Resource type
  10. Format
  11. Relation
  12. Source
  13. Language
  14. Coverage
  15. Rights

Dublin Core kan fysiskt placeras på flera ställen, men enklast är direkt i sidhuvudet på webbsidan. Så här kan det se ut:

<meta name="DC.Title" content="Alla bilmodeller från 1950-talet" />
<meta name="DC.Subject" scheme="AACR2" content="Bilar" />
<meta name="DC.Subject" scheme="LIV-MN" content="1950-talet" />
<meta name="DC.Description" content="Arkiv över alla bilmodeller från 1950-talet med tillhörande bilder." />
<meta name="DC.Creator.PersonalName" scheme="AACR2" content="Andersson, Anders" />
<meta name="DC.Publisher.CorporateName" scheme="AACR2" content="Bilföretaget AB" />
<meta name="DC.Date.Creation" scheme="ISO 8601" content="2006-03-20" />

Om vi skulle bygga en egen sökmotor kan vi dra stor nytta av denna metadata. Sökmotorn kan hitta alla dokument som Anders Andersson har skrivit (DC.Creator.PersonalName), eller alla artiklar som handlar om bilar eller 1950-talet (DC.Subject). Om flera webbsidor har ”Bilar” som ämne kan vi få upp relaterade sidor. Endast fantasin (och mängden metadata!) sätter gränserna.

Som du kan se så är sökmotorer inte mycket till nytta om det inte finns metadata. Men på grund av missbruk har de flesta sökmotorer valt att ignorera keywords (<meta name="keywords" content="lista över nyckelord">), men det hindrar inte dig från att använda det i en egen sökmotor.

Tänk också på att <title> räknas som metadata. Det tillhör inte själva innehållet (det mellan body-taggarna), men beskriver det. Du vet nog redan hur viktigt det är att skriva en bra rubrik i title, så förhoppningsvis kan du förstå hur viktigt det är med resten av metadatan – givetvis beroende på i vilket sammanhang materialet ska presenteras.

Lär dig mer om metadata

Metadata är inget nytt. Ordet uppfanns redan på 1960-talet och det finns en hel del skrivet om ämnet. Men här koncenterar jag mig på det viktigaste metadatan för webben:

  • Metadata is essential web writing skill: Part 1. Artikel som förklarar att metadata inte har med teknik att göra, utan innehåll. Metadata är en grundläggande kunskap och ska skötas av skribenter och redaktörer.
  • Metadata Overview (Power Point). En Power Point-presentation som kortfattat beskriver nyttan med metadata i allmänhet och Dublin Core i synnerhet. En bra guide om du har förstått vad metadata är för något, men inte är helt övertygad att det är något för dig.
  • Dublin Core Metadata Template. En mall som du kan kopiera & klistra in i din webbsidor med syntaxen på metadatan.
  • Metadata for the Web – RDF and the Dublin Core. Går även in på RDF, som är ett helt ramverk för att kunna bygga in metadata i applikationer. Det är utbyggbart nästan i det oändliga och verkligen användbart om du har stora krav på metadata, till exempel relationer mellan objekt i flera led eller många typer av metadata på en och samma gång.

Göm utskriftsvänliga sidor för sökmotorerna

Tack vare style sheets (css) är det fullt möjligt att göra webbsidor som kan visas på både skärmen, skrivaren och i mobilen. Men i vissa fall kan det vara motiverat med särskilda webbsidor som är optimerade för utskrift på skrivaren.

Ett praktiskt tips är att gömma alla utskriftsvänliga sidor för sökmotorerna. Placera därför alla utskriftsvänliga sidor i en mapp som heter print och lägg den i roten på webbplatsen. Gör detta med alla dina utskriftsvänliga sidor.

Lägg sedan till Disallow: /print/ i filen Robots.txt så att mappen och allt dess innehåll inte fastnar i sökmotorernas index.

När en användare hamnar på din webbplats genom ett länkklick från Google kommer han eller hon till rätt sida med den layout som matchar din övriga webbplats. Då är det betydligt lättare att upptäcka resten av webbplatsen än om besökaren hade hamnat på den utskriftsvänliga versionen – som oftast är tom och avskalad.

Du kan läsa mer information om Robots.txt och hur den filen fungerar, eller mer om dubbelt innehåll i inlägget Så optimerar du din sida för sökmotorer.

Dela in din webbplats i få, tydliga avdelningar

En av mina webbplatser gjorde jag om ganska mycket för en tid sedan. Ändringen hade i princip bara två krav:

  • Låta forumet integreras bättre i resten av webbplatsen.
  • Göra det enklare och mer tydligt.

Ändringarna tog ett par månader att genomföra och innebad bland annat omstrukturering, som märks mest på menyuppbyggnaden. I stället för en vänstermeny med 20 alternativ, blev det en meny med sex tabbar på toppen.

Problemet var att jag såg varje applikation som en egen avdelning. Jag hade ett länkarkiv (för länkarna användes en viss programkod), nyheter på förstasidan (för nyheterna användes viss programkod och så vidare…). Följden blev att för varje ny funktion som lades till så blev det en ny avdelning.

Men besökaren på min webbplats var inte intresserad av att gå in och titta på funktioner. Besökaren var intresserad av en specifik fråga inom ämnet. Om det sedan fanns länkar, nyheter eller kanske teckningar om frågan var mindre intressant.

Problemet med mitt sett att se på saken var givetvis att besökaren inte hittade hälften av vad som fanns inom ämnet. För att leta upp en adress till ett företag kunde man antingen gå in i länkarkivet och gå till företagets webbplats, eller så kunde man kolla bland adressregistret på webbplatsen. Lade jag sedan till ännu fler applikationer hade informationen blivit dubbellagrad.

Det gäller därför att: Dela in din webbplats i få avdelningar (helst under sju, eftersom fler är svårt att hålla i huvudet), dela upp ett huvudämne i delämnen. Har du en sida om bilar kan underavdelningarna vara bilmärken. För ”starta eget” kan underavdelningarna vara skatt, juridik och marknadsföring.

När du sedan expanderar är det betydligt enklare för besökaren om du lägger till nya underavdelningar inom respektive ämne, i stället för tio nya huvudavdelningar.

Läs också:

Vad skriver man i Robots.txt?

Du har säkert stött på Robots.txt innan. Det är en fil som ligger i roten på webbplatsen och ger instruktioner vad sökspindlar inte ska indexera.

Grundtanken med sökspindlar är enkel: Allt som går att indexeras, kommer att indexeras om du inte särskilt säger nej till vad den får indexera. Du kanske har ett gäng med sidor som du inte vill att någon ska hitta vi en sökmotor? Det kan vara saker som saknar värde för andra, till exempel en inloggningssida eller dubbelt innehåll (en utskriftsvänlig version av en nyhet bör ju inte dyka upp i sökresultatet).

Så här fungerar syntaxen:

# Kommentar skrivs med en inledande brädgård.
User-agent: Namn på sökspindel
Disallow: /katalog/ # Ytterligare kommentar

User-agent anger namnet på sökspindeln. Google har exempelvis namnet googlebot. Disallow anger en fil eller katalog som inte ska indexeras.

Här kommer en lista över de vanligaste sökspindlarnas user-agent:

  • googlebot = Google
  • msnbot = MSN Search
  • yahoo = Yahoo!
  • scooter = AltaVista

Några exempel på Robots.txt:

  • Säg åt alla sökspindlar att inte indexera en fil och en katalog:
    User-agent: *
    Disallow: /filnamn.html
    Disallow: /katalog/
  • Säg åt Google att inte indexera katalogen /hidden/:
    User-agent: googlebot
    Disallow: /hidden/
  • Säg åt Google och Yahoo! att inte indexera bilder som finns i katalogen /bilder/, men däremot alla andra bilder:
    User-agent: Googlebot-Image
    User-agent: Yahoo-MMCrawler
    Disallow: /bilder/
  • Säg åt alla sökspindlar att inte indexera någonting på hela webbplatsen:
    User-agent: *
    Disallow: /
  • Ta också en titt på Backend Medias Robots.txt så ser du att jag inte tillåter sökspindlarna att indexera några bilder, samt några kataloger som tillhör publiceringssystemet WordPress (de tillför ju inget värde i sökresultatet hos en sökmotor).

Kom ihåg att Robots.txt är endast till för att exkludera, alltså hindra, en sökspindel att indexera innehåll på din webbplats. Robots.txt används inte för att säga till vad den ska hitta. Det måste du göra med länkar och sökmotoroptimering.

Det finns ett annat sätt du kan hindra sökmotorer från att spindla din webbplats. Om du bara vill hindra specifika sidor kan du lägga en meta-tagg i sidhuvudet av html-dokumentet (alltså mellan <head>-taggarna):

<meta name="robots" content="noindex, nofollow" />

noindex säger till sökmotorn att inte indexera webbsidan, och nofollow hindrar sökmotorn från att följa länkarna på sidan.

Men fördelen med att använda Robots.txt är att du kan exkludera flera kataloger, och dessutom centralt på ett enda ställe.

(Tack till Richard för tipset om att skriva om Robots.txt!)

Länka ord och korta fraser – inte hela meningar

En sak jag lagt märke till på de större nyhetsportalerna är att de ofta länkar hela ingressen.

Det gör bland annat Göteborgs-Posten. Hur tror ni det låter i en skärmuppläsare? Förmodligen något i stil med:

Länk: Polisskott vid taxidrama.

Länk: Tidigt i morse utspelades ett drama i och kring en taxibil i närheten av Hjalmar Brantingsplatsen på Hisingen. I samband med tumultet kände en polis sig hotad och avlossade varningsskott.

Det verkar kanske lätt när du ser det så, men titta då här:

Är det lätt att få en överblick? Kan du säga vad varje länk går till? Det kan troligtvis inte en blind person heller, eller en sökmotor för den delen.

Därför: länka med titeln på måldokumentet, eller en annan kort fras som beskriver innehållet, och gör en javascript-länk av ingressen:

Polisskott vid taxidrama

Tidigt i morse utspelades ett...

Några fördelar att bara ha en länk och länka resten med javascript:

  • Länken kommer inte att läsas upp av skärmläsare, de blinda får bara en bra utformad länk per nyhet – vilket är mer än nog.
  • Länken kommer inte att ses av sökmotorer, endast ett fåtal relevanta sökord kommer därför med i länktexten.
  • Det fungerar utmärkt för den vanlige surfaren.
  • Det fungerar utmärkt även för den som har javascript inaktiverat, rubriken fungerar ju som länk.

Därför ska du bara ha en version av ditt domännamn

Det är bra att registrera sitt domännamn under flera olika toppdomäner, men man ska bara ha ett officiellt domännamn. För att ta ett exempel med banken Nordea:

  • nordea.se
  • nordea.com
  • nordea.org
  • nordea.nu

(Jag har redan kollat – endast .se och .com leder till Nordea, men vi tar det som ett exempel ändå.)

Men det ska bara finns en av toppdomänerna som är officiell. Varför? Därför att:

  1. Ingen tvekan. Det råder ingen tvekan om vilken som är den rätta versionen. Besökaren behöver inte tänka.
  2. Inloggning fungerar. Om du är inloggad på nordea.se kommer du inte att komma åt det från nordea.com. Du måste manuellt logga in på varje domän. Det ger merarbete och tvingar besökaren att komma ihåg var han eller hon loggade in (se föregående punkt). Cookies är knutna till domännamnen.
  3. Webbläsaren minns lösenord. Om du väljer att spara lösenordet för inloggningar i webbläsaren så tar läsaren fram rätt lösenord för rätt domän. Annars måste besökaren skriva in och spara lösenordet för varje domän.
  4. Webbläsaren minns besökta sidor. De sidor du har besökt kommer webbläsaren ihåg. Du kan då (beroende på webbplatsens utformning) se vilka sidor som är besökta. Bilder och vanliga sidor är dessutom cachelagrade på din dator så att det går snabbare att visa.
  5. Minskad risk för phishing. Om det bara finns en riktig version av en domän minskar risken för bedrägeri. Om Nordea kunde nås via alla toppdomäner så finns det risk för att bedragare kan registrera samma domän under en annan toppdomän, nordea.biz exempelvis, och börja lura folk på kontouppgifter (déjà vu någon?).
  6. Inget dubbelt innehåll. När en sökmotor letar på nätet så kan ibland dubbelt innehåll straffa sig – webbplatsen ifråga kan hamna längre ned i sökresultatet. Dessutom blir det konstigt om man söker efter ”Nordea” och det kommer upp fyra sökresultat som är likadana. Vad är skillnaden? är den naturliga frågan. Och den frågan kan man enkelt slippa.
  7. Minskad kostnad. Det finnas massor av toppdomäner. Om man ska kunna nå webbplatsen från alla tänkbara toppdomäner blir det en hög investeringskostnad (visserligen är domäner rätt billiga, men många bäckar små…) och mycket tid. Skulle en toppdomän redan vara registrerad så måste man köpa den privat. Det kan bli dyrt. Men det måste man ju om man inte vill råka ut för phishing.

Gör så här: Bestäm vilken toppdomän som ska vara officiell. Gör omdirigeringar till den officiella domänen från alla andra.

Viktigt att tänka på: Kom ihåg att http://www.nordea.se och http://nordea.se kan konfigureras så att det blir två olika sidor. Se till, om möjligt, att ha en officiell version av denna också. Gör omdirigeringar likt andra toppdomäner.

Felstavade ord bör också vara omdirigeringar. Jag skriver exempelvis ofta fel och lägger till ett R för mycket: Nordera. Men det är mer en fråga om användbarhet.