permalink

6

Husk god karma

Responsivt design og SEO – styr dit mobile indhold i WordPress

Wordpress-seo-responsiveI denne artikel kommer jeg med mit bud på hvordan du kan styre hvilket indhold der vises på henholdsvis desktop og smartphones/tablets, i WordPress, UDEN du skal lægge dit mobile site på eksempelvis m.domæne.dk, men beholder samme URL-struktur, hele vejen igennem.

Responsivt design og almindelige udfordringer

Responsivt design der tilpasser sig efter den enhed indholdet vises på, er stadig rimelig nyt, og der er mange shops og hjemmesider som ikke er mobilvenlige, eller responsive. Google har for nyligt meldt ud at sites der ikke er mobilvenlige, vil blive vist sjældnere på søgninger fra mobile enheder. Hvis du ikke allerede har tænkt mobilvenlighed/responsiveness ind i din webløsning, er det på tide at gøre det.

Personligt foretrækker jeg en responsiv løsning, med samme URL´er til både mobil- og desktop indhold, men hvor man stadig kan styre hvilket indhold der skal vises på mobilversionen, som hvis man har lavet en mobil version af sit site.

Et problem man kan støde på, når man arbejder med webløsninger der er responsive, er tekstombrydningen, menuer og billede størrelser. Nogen gange har man brug for at kunne styre det mobile indhold mere specifikt end det responsive gør automatisk.

Samtidig vil man gerne vise alt indhold, både til mobil og desktops på samme URL´er, uden at lave en mobil version af sit site.

Her lidt inspiration til hvordan vi har løst udfordringerne:

Her har vi lavet en funktion, så når man sætter flueben i “Brug mobil beskrivelse”, fremkommer der ekstra editor, så man kan angive hvad der præcis skal vises til mobile enheder:

Mobilt-indhold-WordPress

På den måde kan man altså på samme URL, lave anderledes tekstombrydning eller lave billeder en anden størrelsen, på mobilversionen.

Topmenuen kan styres individuelt

En anden udfordring kan være topmenuen. På responsive designs bliver det ofte til en lille knap, der så viser alle menupunkter når man klikker på den. Af hensyn til brugervenlighed er det ofte bedre at de tre til fire vigtigste punkter vises, og resten vises ved klik på sidste menupunk, som f.eks. hedder “Mere”.

Dertil kan man registrere en ekstra menu, så man under “Udseende —> menuer” præcis kan styre sin “desktop menu” og sin “mobil menu”.

Mobil-menu

På den måde kan man i toppen af sin mobilversion f.eks. vise “Forside”, “Om os” og “kontakt”, og de resterende menupunkter, som vises på desktopversionen, vises som en dropdown, når der trykkes på “Mere”. Det ser både bedre ud med en rigtig menu i toppen, og det er mere brugervenligt, fremfor en lille knap, der ved tryk viser alle menupunkter.

Næste feature vi ønsker at udvikle er at man kan styre widgets individuelt i forhold til om det er mobil eller desktop.

Mobilt indhold og SEO

Jeg foretrækker personligt at det mobile indhold lægger sig ret tæt op af indholdet til desktop. Der er mange mobile versioner som er kraftige nedgraderinger af desktopversionen, men problemet er jo så, at man på mange mobile søgninger ikke vises.

Til de kunder hvor vi har implementeret ovenstående, har vi anbefalet at det hovedsageligt bruges til at optimere udseendet af siderne, og ikke til at lave helt forskelligt indhold, til henholdsvis mobil og desktop.

Det kan dog sagtens være man ønsker færre menupunkter i sin topmenu, til mobil. Derfor er der i bunden link til sitemap, hvor alle sider er inkluderet (med mindre man aktivt har fravalgt dem til sitemappet).

På den måde har man en mobil version som måske i topmenuen er anderledes, men der er stadig linket til alle undersider, og alle undersider kan stadig vises pænt til mobile enheder (og google kan se at der er adgang til alle sider på den mobile version).

Må dette være inspiration til udviklere og SEO´ere

Jeg håber ovenstående kan hjælpe med at inspirere til at udvikle gode, logiske og brugervenlige mobile versioner af hjemmesider og shops, og kritik og ideer er meget velkomne i kommentarsporet.

Ovenstående er ikke nødvendigvis den bedste løsning i alle tilfælde, men det løser nogle problemstillinger som man ofte kommer ud for, når man bruger responsivt design.

6 kommentarer

  1. Hej
    Meget intr. artikel – nu kommer så “the 1 billion dollar question” (med vore dages inflation er én million slet ikke nok)
    Hvilke plugin kan gøre dette ????? (altså sætte mobil beskrivelse ind i editoren) Eller “snyder” du og laver det hele selv ?? I så fald udvikl et plugin der kan dette – og du bliver en kendt og elsket person !!
    Hilsen Claus

    • Hej Claus

      Jeg ved ikke om der er noget plugin der kan lave ovenstående, hvis der er, virker det i hvert fald ikke lige out-of-the-box, da templatet skal være forberedt til det også.

      Ovenstående er noget vi har udviklet fra bunden til vores kunder i WebCoders.dk, og kun noget vi implementerer på de sites hvor vi har lavet templatet, men jeg håber andre udviklere vil lade sig inspirere og lave lignende løsninger, så det bliver lettere at lave optimale opstillinger på mobil også.

  2. Hej Thomas

    Jeg undre mig faktisk mere og mere over det her. Google har lavet en klar udmelding, men ikke et værktøj til at tjekke om ens mobile SEO er OK.

    Jeg bruger PT. WooRank.com – og den skriver hvorvidt ens Mobile SEO er OK. Men hvordan ved man præcist at Google ikke betragter ens Mobile SEO som derankende?

    • Hej Emil

      Først og fremmest så er det vel fordi der ikke er en enkelt korrekt løsning på mobil SEO. Mobil SEO handler i høj grad om at gøre sit indhold tilgængeligt på en god måde til de mobile brugere/mobile søgende, og det kan jo gøres på flere måder.

      Ting som bør overvejes når man laver responsiveness/mobil side:
      -Skriftstørrelse
      -At dropdowns virker (der er mange steder dette ikke virker på mobil)
      -Loadhastighed – måske endda vigtigere end på desktop
      -At indholdet er tilgængeligt – mange laver nedgraderede versioner som kun viser en brøkdel af indholdet, hvilket jeg ikke er tilhænger af. Man kan sagtens prioritere sit indhold anderledes, som jeg beskriver i indlægget, hvor man jo laver menuen anderledes, men jeg synes ikke man kun skal gøre en lille del af sit site tilgængeligt for sine mobile brugere.

      Især sidste punkt her er vigtigt. Google har meldt ud at på mobile søgninger er det en fordel hvis ens site er optimeret til mobile enheder. Hvis indholdet helt er skåret væk og ikke vises på mobil, hvorfor skulle google så vise siden på mobile søgninger? Så sørg for alt indhold er tilgængeligt, men på en måde som er logisk for de mobile brugere.

      En anden ting som jeg er meget modstander af er de virksomheder som tilbyder at lave mobile versioner af sites, men hvor den mobile version ligger på udviklernes domæne. Det er bare på INGEN måde smart, og alt indhold bør naturligvis ligge på ens eget domæne, både når det ses på desktop og på mobil.

  3. Det er virkelig en smart løsning med en ekstra tekstboks til den mobile udgave – specielt til billeder. Jeg sidder lige p.t. og roder rigtig meget med responsive design, og det er sgu ikke helt så nemt, som jeg troede, det ville være 🙂

  4. @Jan

    Enig i det kan være besværligt 🙂 Vi bygger jo også responsive designs fra bunden, og jeg lover dig vi bandede og svovlede over det de første mange gange 🙂

    Responsive er sådan lidt et buzzord mange steder, som folk bruger som om det er enten/eller og et helt definerbart resultat, men det er jo langt fra sådan.

    Jeg har efterhånden set mange templates og hjemmesider som er responsive, men som bestemt IKKE er specielt mobilvenlige, og så er det jo lidt lige meget. Responsive bør ikke være målet i sig selv, men det bør derimod den optimale mobiloplevelse. Det er ikke nok tingene skallerer, og rykker rundt, det skal også være på en måde så det rent faktisk giver et godt resultat.

Skriv et svar

Feltermarkeret med* skal udfyldes.