Tillbaka i maj, Google meddelade att mobilsökningar hade gått om skrivbordssökningar i 10 länderinklusive USA och Japan.
Dessutom, Google tillkännagav en algoritmuppdatering som ger privilegier till mobilanpassade webbplatser.
Det betyder att det nu är svårare att öka din rankning för mobilsökningar (eftersom du behöver göra mer arbete).
Här på Mofluid bestämde vi oss för att sätta ihop en checklista för att hjälpa dig att optimera din e-handelssida för mobilsökningar och få den trafik du förtjänar.
Design för mobil
När du designar din mobilwebbplats måste du vara uppmärksam på flera saker som är mycket specifika för mobila enheter:
Liten skärm –
En av de främsta anledningarna till att utveckla en mobilsajt är det stationära versioner är för stora och därför oanvändbara på en liten skärm.
Tänk på skärmstorleken på de mest populära enheterna:
- iPhone 4 (skärmstorlek 3,5 tum, upplösning 640 x 960 px, skärmstorlek 320 x 480 px)
- iPhone 5 (skärmstorlek 4 tum, upplösning 640 x 1136 px, skärmstorlek 320 x 568 px)
- iPhone 6 (skärmstorlek 4,7 tum, upplösning 750 x 1334 px, skärmstorlek 375 x 667 px)
- iPhone 6 Plus (skärmstorlek 5,5 tum, upplösning 1080 x 1920 px, skärmstorlek 414 x 736 px)
De vanligaste upplösningarna för Android-telefoner är:
- 320 x 480
- 480 x 800
- 480 x 854
- 540 x 960
- 1280 x 720
- 1920 x 1080
Vertikal skärm –
Nyckeln som skiljer sig från skrivbordet är det mobilanvändare surfar på webbplatser medan de håller enheten vertikalt. Åtminstone för det mesta.
Det betyder att området ovanför mitten ska passa in i en smal skärm utan att utelämna några viktiga meddelanden.
Design för beröring, inte klick –
Mobilanvändare använder sina fingrar för att navigera när du surfar. Det betyder att de kräver större knappar som svarar på tryck eller svep. Hyperlänkar är också svårare att klicka på.
Utforska : Exempel på en fantastisk mobilappdesign
Skapa mobilversioner av alla sidor –
För att ge en fullständig mobilupplevelse måste du skapa mobilversioner av alla sidor på din webbplats.
Du vill inte att användare ska surfa och sedan plötsligt omdirigeras till en skrivbordssida. Detta kommer att få användare att vilja lämna din webbplats och därmed döda dina omvandlingsfrekvenser.
Uppmaningsknapp ovanför vecket –
Låt inte användare scrolla åt vänster och höger på skärmen för att hitta köpknappen. Lista på uppmaning i området ovanför mitten och gör det lätt att upptäcka.
Glöm inte skrivbordet –
Google ger preferenser till webbplatser som är optimerade för både desktop och mobil. Så även om majoriteten av dina besökare surfar med smartphones, glöm inte att SEO handlar om optimering för alla enheter.
Välj en mobil konfiguration
Det finns 3 alternativ för att skapa en användarvänlig mobilwebbplats:
Responsiv design –
Med det här alternativet visar du samma HTML-kod på samma URL oavsett användarens enhet. Du har dock möjlighet att rendera displayen annorlunda baserat på skärmstorleken.
Responsiv design är mycket snabb och enkel att skapa eftersom den inte kräver mycket utvecklingsansträngning. Den enda nackdelen är att det minskar laddningstiden eftersom mobilanvändaren kommer att ladda ner hela sidan.
Dynamisk servering –
Med det här alternativet laddar du en annan HTML-fil på samma URL beroende på vilken enhet som används för att ladda sidan. På så sätt kan du skapa helt olika versioner för dina stationära och mobila webbplatser.
Den här konfigurationen kräver mer arbete att utveckla, implementera och hantera eftersom du måste skapa en helt annan version för varje typ av enhet som används för att komma åt din webbplats.
Fördelen med denna inställning är att den dynamiska tjänsten kommer att minska laddningstiden för mobilanvändare.
Utforska : Bästa mobilappar för e-handel
Separata webbadresser –
Med det här alternativet serverar du en annan HTML-fil beroende på enheten, och omdirigerar därmed användarna till en annan URL.
Detta är den svåraste mobilkonfigurationen att hantera. Du måste se till att dina mobila och stationära versioner omdirigerar på rätt sätt, vilket kan vara svårt att göra.
Signalera din konfiguration till sökmotorer
När du väl har valt din mobilkonfiguration är det extremt viktigt att signalera det till sökmotorerna. Annars kanske de inte kan läsa den ordentligt, vilket kan påverka din sökmotorrankning negativt.
Så här gör du för olika typer av konfigurationer:
Responsiv design –
För att signalera till webbläsare att du använder en responsiv designkonfiguration måste du lägga till följande metatagg i ditt dokument:
Metaview-taggen ger instruktioner om hur du justerar sidans dimensioner och skalning efter enhetens bredd. När denna information saknas renderar mobila webbläsare sidan på en skrivbordsskärmsbredd.
Det andra som detta uppnår är att det ökar teckenstorleken och skalar innehållet för att passa skärmen. Detta gör det lättare för användare att läsa och interagera med olika sidor.
Dessutom kan du göra dina bilder responsiva genom att inkludera elementet.
Dynamisk servering –
Här måste du skicka en träff till Googlebot för smartphones så att den genomsöker din sida och upptäcker mobilversionen av din webbplats.
Det här är träffen du kan skicka med Vary HTTP-huvudet:
Hämta /sida-1 HTTP/1.1
Värd: www.example.com
(…resten av HTTP-begäran headers…)
HTTP/1.1 200 OK
Innehållstyp: text/html
Variera: User-Agent
Innehållslängd: 5710
(… resten av HTTP-svarsrubriker…)
Detta talar om för webbläsaren att laddningsinnehållet kommer att skilja sig beroende på användaragenten som begär sidan.
Om du redan använder Vary HTTP-huvudet, lägg helt enkelt till “User-agent” till listan som redan visas.
Separata webbadresser –
Den vanligaste inställningen är att omdirigera webbadressen till skrivbordet, som t.ex www.exempel.comtill en mobilversion, såsom m.example.com, för alla som kommer åt webbplatsen från en smartphone.
För att hjälpa Google att bättre förstå dessa separata mobilwebbadresser bör du lägga till följande kommentarer:
– På skrivbordssidan lägger du till en speciell länk till en rel=”alternate”-tagg som pekar på motsvarande mobilwebbadress. Detta gör att Googlebot kan hitta platsen för mobilwebbadressen.
href=”http://m.example.com/page-1″ >– På mobilsidan lägger du till en länk till en rel=”canonical”-tagg som pekar på webbadressen för skrivbordet.
Gör ditt innehåll genomsökbart
När det kommer till mobilsajter är det superviktigt att du:
Tillåt Googlebot åtkomst till Javascript, CSS och bildfiler –
För att kunna rendera alla sidor korrekt bör du alltid tillåt Googlebot att läsa JavaScript-, CSS- och bildfilerna används av din webbplats.
Om din robot.txt förbjuder genomsökning av dessa tillgångar kommer Google inte att kunna rendera och indexera ditt innehåll korrekt.
Utforska : Hur du ökar dina mobilhandelsappnedladdningar
Undvik ospelbart innehåll
Smartphones kan inte komma åt och läsa innehåll på samma sätt som stationära datorer gör.
Det är viktigt att du förstår begränsningarna för olika plattformar så att dina användare inte blir upprörda när de inte kan läsa något.
Undvik Flash-videor –
Flash stöds inte av de flesta mobila enhetersom iPhone.
När användare besöker en sida med en ospelbar flashvideo kommer de att se ett felmeddelande som liknar detta:
Detta ger en dålig användarupplevelse och gör dina besökare frustrerade och missnöjda.
Använd HTML5-videor istället –
Lösningen är helt enkelt att använda HTML5-standardtaggen för att säkerställa att videor och animationer framgångsrikt kan laddas på mobila enheter.
Du kan enkelt använda Google Web Designer för att skapa dessa animationer i HTML5.
På så sätt, om du till exempel driver en mediewebbplats, kan du helt enkelt skapa alla dina animerade banners med HTML5 för att säkerställa att de kommer att visas på alla enheter.
Intressant läsning : Konfigurera Google Analytics för din mobilapp
Åtgärda omdirigeringsproblem
Dessa problem inträffar mycket ofta när e-handelsägare väljer att använda den separata URL-konfigurationen.
Det här problemet uppstår inte med dynamisk visning och responsiv design eftersom du i dessa fall inte använder omdirigeringar.
För att undvika detta problem bör du:
Undvik URL-omdirigeringar –
Varje URL-omdirigering du använder gör din webbplats långsammare, och det påverkar din sökmotorrankning negativt. Det är därför du bör undvika eller åtminstone minimera användningen av detta verktyg.
Det finns vissa fall då du inte kan undvika URL-omdirigeringar, till exempel:
- Omdirigering till mobilwebbplatsen för en smartphoneanvändare
- Omdirigering från den mobila webbadressen till den stationära webbadressen för en PC-användare
Läs också : Hur man använder Admob för att marknadsföra din mobilapp
Undvik att omdirigera till fel webbadress –
Se till att du alltid omdirigerar användaren till lämplig mobil-URL.
Ett vanligt misstag är att omdirigera mobilanvändare från en webbadress för skrivbordet till den mobila hemsidan, oavsett vilken sida som ursprungligen efterfrågades.
Detta händer också när webbadressen för skrivbordet har genererats dynamiskt och parametrarna inte är väl mappade till motsvarande mobilwebbadress.
Ett annat problem kan vara att din stationära webbplats omdirigerar vissa mobila enheter, men missar andra.
För att undvika dessa problem bör du:
- Använda sig av Google Search Console för att upptäcka problem. Den kommer automatiskt att skicka meddelanden till dig när felaktiga omdirigeringar upptäcks. Du kan se dem i Smartphone-sektionen, under namnet Faulty Redirect.
- Ställ in din server så att den omdirigerar mobilanvändare till rätt URL.
- Om en sida inte har en mobilversion, håll användaren kvar på skrivbordssidan istället för att omdirigera dem till den mobila hemsidan.
- Använd responsiv design för att visa samma innehåll till mobila och stationära besökare.
Intressant inlägg : App Design är lika med dess funktionalitet, bekräftar köpare
Minska sidans laddningstid
Webbplatshastighet är en enorm faktor som påverkar sökmotorernas ranking.
Eftersom de flesta smartphones använder 3G-nätverk för att ladda och komma åt webbinnehåll, har webbplatsens hastighet blivit en ännu viktigare faktor för att skapa en fantastisk användarupplevelse.
Laddningstider påverkar också omvandlingsfrekvensen enormt – vissa studier har visat 7 % minskning i konverteringar för varje sekunds försening.
Så här säkerställer du en snabb laddningstid för dina mobilanvändare:
Använd PageSpeed Insights för att hitta problem –
Det här verktyget låter dig automatiskt upptäcka problem som saktar ner din webbplats.
Gå till Page Speed Insightsskriv din URL i rutan och klicka på Analysera.
När analysen är klar, klicka på Mobil för att se resultatet.
Du får ett betyg från 1 till 100 beroende på hur väl din webbplats är mobiloptimerad.
Dina rekommendationer kommer att listas i:
- Bör fixa – dina högsta prioriterade problem för att fixa
- Överväg att fixa – mindre viktiga problem att fixa
Du kommer också att se vilka regler du redan har klarat.
De vanligaste problemen du kommer att möta är:
- Blockerar JavaScript- och CSS-resurser
- Använder inte bläddringscache
- Glömde att optimera bilder
- Att glömma att komprimera resurser
- Förminska HTML och Javascript
Du kan utöka varje problem genom att klicka på Visa hur du åtgärdar. Genom att göra det kommer Google PageSpeed Insights att ge dig förslag på hur du åtgärdar problemet.
Optimera dina bilder –
Bildfilens storlek är en enorm faktor som påverkar laddningstiden.
En bild på 2 MB tar mycket längre tid att ladda ner än en 25 KB. Multiplicera detta med antalet bilder du har på din sida så ser du skillnaden.
Det första som påverkar storleken på en bild är filtypen.
De 3 vanligaste filtyperna du bör använda är: JPEG, GIF och PNG. Använd inte RAW- eller TIF-filer eftersom de inte är kompatibla för webben.
Helst bör e-handelswebbplatser använda bildfiler som är mindre än 70 kB. Om dina nuvarande bilder är större än så måste du ändra storlek på dem.
För att göra det kan du helt enkelt använda Adobe Photoshop.
Öppna din bild, hitta menyn och gå till Arkiv → Spara för webben.
Välj antingen JPEG, GIF eller PNG som filformat, justera kvaliteten och välj färgalternativ.
Se till att kontrollera storleken på bilden efter att du har sparat den.
Vad göra här näst
Att optimera din e-handelssida för mobilen är bara början. Det kräver ytterligare SEO-insatser som är helt värda det.
Med tiden kommer du att se hur din mobila söktrafik kommer att börja öka, liksom dina intäkter.
Se till att ofta kontrollera hur bra din mobilsajt presterar. När du gör ändringar, lägger till nya produkter och skapar nya sidor kan det sluta med att du provocerar fram nya problem som du måste åtgärda.
Om du vill ta det till nästa nivå kanske du vill skapa en mobilapp för din e-handelswebbplats.
Du kan enkelt skapa en på bara några minuter med Mofluid och ladda upp den i appbutiken.
Vilka är dina nuvarande problem med din mobilsajt? Vad behöver du arbeta med för att öka din mobila söktrafik? Låt oss veta i kommentarsfältet nedan.
