Sådan sørger du for at din hjemmeside er mobilvenlig (Teknisk SEO #1)

Google er gået over til såkaldt mobile-first indeksering, hvilket vil sige at den først og fremmest kigger på mobilversionen af dine sider for at se, om de skal vurderes som bedre end konkurrenternes, og dermed vises højere oppe i søgeresultaterne.

Derfor SKAL din hjemmeside være mobilvenlig, hvis du vil have den fundet på Google. Ellers kan du lave nok så meget SEO på dit indhold, og vil alligevel blive overhalet af konkurrenterne.

Vær opmærksom på, at “mobilvenlig” i Googles øjne ikke er det samme som at den “ser godt ud” på telefonen. Det handler mere om brugervenlighed; at hjemmesiden er nem og hurtig at bruge, selvom den ses på en lille skærm.

“Mobilvenlig” er heller ikke helt det samme som at hjemmesiden er responsiv, dvs. at layoutet tilpasser sig forskellige størrelser skærme. Men den skal være responsiv for at kunne være mobilvenlig – så hvis du har en hjemmeside med et gammelt ikke-responsivt layout, er det på tide at skifte til et mere moderne.

Sådan tester du om din hjemmeside er mobilvenlig

Selvom du har en responsiv hjemmeside, kan du godt komme ud for at der er noget, Google ser som ikke-mobilvenligt, fx et billede der er blevet indstillet til at blive vist i en bestemt bredde.

Derfor bør du teste, om Google ser din hjemmeside som mobilvenlig. Det gør du på https://search.google.com/test/mobile-friendly

OBS: Du kan kun teste sider, der faktisk ligger ude på nettet og ikke er blokeret for Google.

Værktøjet tester en enkelt side ad gangen, ikke hele din hjemmeside. Du bør derfor teste både forsiden og et par andre sider, hvis der er forskel på layoutet.

Hvis du vil teste hele din hjemmeside, kan du gøre det inde fra Google Search Console (tidligere webmasterværktøjer).

Sådan gør du din hjemmeside mobilvenlig

Testen med Googles værktøj fortæller dig, OM din side er mobilvenlig eller ej, og hvis den ikke er, HVAD der er galt. Typiske meddelelser er:

“Teksten er for lille til at kunne læses”

Sker ofte hvis din hjemmeside ikke er responsiv, og derfor ikke automatisk sætter tekstens størrelse op på små skærme. Løsningen er et mere moderne, responsivt layout.

“De klikbare elementer ligger for tæt”

Kan hænge sammen med at teksten er for lille, så linksene er for små, og der ikke er plads nok mellem dem til at man nemt kan ramme det rigtige link i fx en menu.

Indholdet er bredere end skærmen

Betyder at du har et billede eller andet indhold, der ikke kan være i sidens bredde på telefonen og derfor gør at der kommer en vandret scrollbar. Det er ikke brugervenligt.

Hvis det er meget af dit indhold der ikke kan være på skærmen, og fejlen kommer på flere sider, er løsningen et andet og mere responsivt layout.

Hvis det kun er et enkelt billede der udløser fejlen, bør du (eller din udvikler) kunne redigere dette stykke indhold så det tilpasser sig bredden på en telefon.

Vær OBS på at gammeldags tabeller kan udløse denne; de virker som udgangspunkt ikke ret godt i et responsivt layout. Hvis du kan præsentere indholdet på en anden måde end i tabeller, så gør det!

“Der er ikke angivet en viewport”

Betyder at hjemmesiden mangler META-tagget viewport, der fortæller browseren hvilken størrelse og layout siden skal vises i; i praksis betyder det at din hjemmeside ikke er responsiv. Løsningen er at få et responsivt layout på hjemmesiden (et mere moderne tema, hvis du kører WordPress på et gammelt tema).

Du får en rød telefon og beskrivelse af en eller flere fejl, hvis Google ikke mener din hjemmeside er mobilvenlig
Sådan skriver Google hvis din hjemmeside ikke “består” mobilvenlighedstesten
Grøn telefon, når Google mener din hjemmeside er mobilvenlig

Sådan skal det se ud – mobilvenlighedstest bestået 🙂

Der er et par andre fejl, du kan møde – læs mere om dem hos Google selv: Værktøj til test af mobilvenlighed

Kan jeg nemt gøre min gamle hjemmeside mobilvenlig?

Det kommer an på meget – men hvis din nuværende hjemmeside ikke er responsiv, vil det som regel være nemmest at lægge et helt nyt layout på den.

Hvis du har en ældre WordPress-hjemmeside, kan det dog godt være nogenlunde nemt – du kan nemlig “bare” skifte dit gamle tema ud med et nyere, responsivt. Tekster, billeder og SEO-ting vil som regel stadig ligge hvor de gjorde før, selvom de måske skal justeres lidt.

Med mindre din hjemmeside er helt, helt simpel og der ikke er ændret noget i dit tema for at tilpasse design og layout specielt til dig, vil jeg dog råde dig til lige at vende det med din udvikler, før du kaster dig ud i at skifte tema.

Sådan gør du teksten på din hjemmeside mobilvenlig

Selv om du har fået et mobilvenligt layout på hjemmesiden, skal dine tekster sikkert justeres, hvis de er skrevet til en større skærm. Ved samme lejlighed kan du også gøre teksterne mere SEO-venlige.

Det handler ikke om at teksterne skal være kortere – folk kan sagtens finde sig i at scrolle nedad, hvis bare teksten er interessant nok. Og Google foretrækker lange tekster (så længe indholdet er relevant i forhold til sidens emne).

Det handler om at teksterne skal være lette at læse – både af hensyn til dine besøgende, og hvis de skal fungere som SEO-tekster. Principperne for hvordan du gør det er de samme som gælder for tekster på hjemmesider generelt. Du skal bare overholde dem i endnu højere grad, når du skriver mobilvenligt.

1. Inddel teksten i mange, korte afsnit

Hvis du skriver på en større skærm, så regn med du skal have en linjes luft ind for hver 2-3 linjer, du skriver. Dette afsnit du sidder og læser lige nu fylder et halvt skærmbillede på min smartphone, når man tæller overskriften med.

2. Strukturer teksten med underoverskrifter

Du skal ikke sætte en underoverskrift for hvert lille afsnit, men der skal være nok af dem til at det bliver overskueligt forlæseren (og Google) hvordan teksten hænger sammen emnemæssigt.

Det er vigtigt at du formatterer dine underoverskrifter med h2, h3 osv. af hensyn til SEO (læs mere i dette indlæg om hvorfor h-overskrifter er vigtige ->)

3. Brug punktopstillinger

Når du stiller noget af teksten op som punktopstilling, giver det en kærkommen variation for øjet i en måske lang tekst. Du skal selvfølgelig kun bruge det på steder, hvor du har en form for opremsning.

4. Sæt noget af teksten i faktabokse

En anden måde at varierer udseendet på er at sætte udvalgte (vigtige) sætninger eller afsnit ind i en boks med enten en anden baggrundsfarve eller kant omkring, eller begge dele.

Hvis det er relevant – og du ikke har noget imod at folk forlader den side, de er på – så sæt hellere “læs mere”-links inde i teksten end i slutningen.

6. Indsæt en indholdsfortegnelse (table of content-schema)

Hvis du har mulighed for at sætte strukturerede data ind, så sæt et “table of content”-schema ind øverst i en lang tekst, ligesom jeg har gjort herover (og på mange andre af mine blogindlæg):

Et udsnit af indholdfortegnelsen for dette blogindlæg – lavet med table-of-content-schema

Det giver mulighed for nemt at hoppe til det afsnit, man er interesseret i – og Google elsker dem, så det bidrager også til sidens SEO.

Det kræver dog at du har formatteret underoverskrifterne korrekt med H2, H3 osv.

7. Sæt billeder eller grafik inde i teksten

Du kan også bryde din tekst op med fotos, ikoner eller anden grafik, for at give lidt variation til udseendet. Bare sørg for at de er relevante for resten af indholdet, og at de ikke fylder alt for meget på skærmen.

Husk at tjekke din hjemmesides mobilvenlighed – på mobilen!

Selvom du følger alle råd, så skal du også lige huske at gå ind på din hjemmeside via mobilen og se, om den ser OK ud. Helst hver gang, du lægger en ny tekst ud.

Selvom du (i alt fald i WordPress) kan vælge at få forhåndsvist en kladde i mobilvisning, er det sikreste altid at du lige tjekker dit layout og dine tekster og billeder med dine egne øjne.


Del gerne indlægget med andre, du tror kan have glæde af det:

Læs flere indlæg om teknisk SEO

Dette indlæg er del af en serie om teknisk SEO. De andre indlæg i serien er:

  1. Sådan sørger du for at din hjemmeside er mobilvenlig
  2. Din hjemmeside skal være hurtig
  3. Sådan indstiller du dine undersiders URL, så de bidrager til SEO
  4. Sådan sikrer du at Google faktisk indekserer din hjemmeside
  5. Du skal sørge for at Google ikke indekserer uvigtige sider
  6. Sådan “fodrer” du Google med et opdateret XML-sitemap
  7. Sørg for at hjemmesiden kun ses på adresser enten med eller uden www – ikke begge
  8. Sådan får du SLL (“hængelås”, https) på din hjemmeside
  9. Undgå døde links
  10. Udnyt din 404-fejlside
  11. Du bør have et favicon installeret

Skriv en kommentar