Att göra dina webbsidor anpassade att fungera på olika enheter t.ex. stationära datorer, mobiler och surfplattor är inte bara användarvänligt för besökarna på sidan, utan det är också en rankingfaktor hos sökmotorer som t.ex. google så att din webbsida hamnar högre i det mobila sökresultatet om den är mobilvänlig.
Du kan se om google ser din sida som mobilvänlig på <a href=”https://search.google.com/search-console/mobile-friendly”>googles mobilvänlighetstest</a> och tips på vad som behöver ändras om den inte är det.
Om du använder ett cms t.ex. wordpress och använder ett tema som inte är mobilvänligt i sig så kan du ladda ner t.ex. pluginet ”mobile detector”. Se sedan till att du även har laddat ner ett tema som är responsivt vilket många nyare teman är.
Sedan går du in under inställningar (settings) och väljer ”mobile detector”. I dropdown menyn där väljer du vilket (mobilvänligt) tema som ska visas när det är en bärbar enhet som används.
Denna metod att låta webbplatsen känna av om det är t.ex. en laptop eller en mobil som användaren har och att visa olika versioner av sidan beroende på detta kan man även göra om man har sidor t.ex. i html som inte tillhör något cms.
Du måste då på din desktop-sida ange i sidhuvudet
<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.com/page-1″>
och på den mobila sidan anger du
<link rel=”canonical” href=”http://www.example.com/page-1″>
Då kommer sökmotorn att känna av att den mobila sidan är en kopia av den vedertagna sidan och visa den mobila sidan om skärmstorleken är maximalt 640px. Genom att använda canonical kommer du inte heller att straffas för duplicerat innehåll av sökmotorerna.
Alternativt kan du göra din sida responsiv genom att i ange metataggen:
<meta name=”viewport” id=”wiewport” content=”width=device-width, initial-scale=1.0″ />
i sidhuvudet.
Du kan också behöva göra vissa andra modifieringar t.ex. kontrollera att inget enskilt html-element eller bild är större än skärmbredden.
Läs mer på <a href=”https://developers.google.com/web/fundamentals/design-and-ui/responsive/”>https://developers.google.com/web/fundamentals/design-and-ui/responsive/</a>
RSS