Google’s mobiele voorkeur

Google is al sinds 2009 bezig met mobiel en snelheid omdat ze ziet dat dat de toekomt is. Ze hebben niet voor niets Android in de wereld gezet.

Google geeft zelf al sinds 2012 aan dat ze responsive sites als optimale variant ziet. Natuurlijk zijn er naast responsive nog meer oplossingen. De oplossingen op een rij met de belangrijkste tips:

  • Responsive; zelfde URL, zelfde content.
    • Gebruik de tag meta name=”viewport” om de browser te instrueren hoe de inhoud moet worden aangepast.
  • Dynamisch; elk apparaat zijn eigen content maar wel dezelfde URL.
    • Gebruik de header Vary HTTP om uw wijzigingen op basis van de user-agent door te geven.
    • Zorg dat user-agentstrings goed worden gedetecteerd.
  • Eigen mobiel domain (bv m.website.nl of website.nl/mobiel) ; eigen URL en eigen of dezelfde content.
    • Geef de relatie tussen de twee URL’s weer met de tag rel=”canonical” en rel=”alternate”-elementen.
    • Detecteer user-agent strings en leidt ze op de juiste manier om.
  • Hybride; vaak een combinatie van responsive en dynamisch; dezelfde URL en gedeeltelijk eigen content.

Elk vorm heeft z’n eigen kenmerken: eigen URL en of eigen HTML:

overzicht kenmerken mobiele modellen

Voors en tegens van responsive design

Voor responsive

  • 1 URL voor alle content;
    • makkelijk voor indexatie door Google,
    • delen van content ( Facebook share via mobile ook zichtbaar op desktop want dezelfde URL wordt gedeeld)
  • Één gestroomlijnde gebruikerservaring op alle devices
  • Zowel portrait (rechtop) als in landscape (liggend) te gebruiken op mobiel als op tablet
  • géén redirects tussen mobile en desktop; dit scheelt in laadtijd
  • als er een nieuw schermgrootte of device komt dan ben je daar met responsive op voorbereidt

Tegen responsive

  • Je moet goed van te voren bedenken wat je waar wil omdat alles in een keer voor elk device live gaat.
  • Doordat je dezelfde content op desktop en mobiel toont, wordt de mobiele laadtijd zwaar, terwijl de mobiele gebruiker misschien andere dingen op je mobiele site wil doen.

Waar moet je op letten bij responsive ivm SEO en usability?

  • Teveel data laden op mobiel; laadt geen full screen plaatjes in op mobiel
  • Probeer aantal http aanvragen (requests) te beperken
  • Minimaliseer CSS en Javascript
  • Laadt eerst zichtbare content (boven de vouw) in en dan pas minder zichtbare (onder de vouw)
  • SEO tip responsive: sta indexatie van CSS, JavaScript en plaatjes toe! Vroeger was het de gewoonte deze uit te sluiten middels de robots.txt. Ik raadde dit al langer af omdat je dan ook geen hidden content kon verhullen, een veel gebruikte cloaking techniek.

Voors en tegens van dynamische design

Voor dynamisch

  • Je kunt content en interacties speciaal afgestemd per device maken; denk aan aan een  lokatie kiezer op mobiel.
  • Aanpassingen kun je voor één device doen zonder dat je aan de andere devices hoe te denken.
  • De laadtijd kun je per device verbeteren; zo kun  je de mobiele site sneller maken.
  • Één enkele URL net als responsive zodat ‘social shares’ tussen devices gedeeld blijven en Google maar 1 set URL’s hoeft te indexeren.

Tegen dynamisch

  • Je moet per device apart dezelfde of andere content maken. je content splitst zich steeds in 2, 3 4 of zoveel soorten aparte devices je aanbiedt. Daar moet je CMS wel erg slim en krachtig voor zijn.
  • Je moet flink investeren in IT voor bouw, testen en bijhouden van de dynamisch geserveerde website.

Waar moet je op letten bij dynamisch ivm SEO en usability?

  • De user agent detectie scripts die bepalen of er bijvoorbeeld Samsung tablet of iPhone6 content geladen moet worden kunnen misgrijpen doordat ze niet meer kloppen, achterhaald zijn of een nieuw device (nog) niet herkennen.
  • Ook kan de useragent detectie het mis hebben over portret of landscape style en zo landscape in portret stand tonen.
  • De gebruikerservaring tussen verschillende device kan verwarrend zijn als content, design en functionaliteit teveel afwijken van elkaar.
  • SEO tip dynamische website: zorg er wederom voor dat Googlebot maar ook Googlebot-mobile alle html, CSS, JavaScript en plaatjes kan doorzoeken. Gebruik daarom ook standaard en correcte HTTP headers.

Voors en tegens van eigen mobiele URL’s

Voor eigen mobiele URL’s

  • Net als bij  dynamisch kun je een op het device afgestemde beleving bieden
  • En je kunt weer net als bij dynamisch alleen de content voor mobiel aanpassen
  • Je kunt gemakkelijk en los van de normale website een mobiele website op een subdomein laten neerzetten. Je kunt deze zelfs bij een andere partij dan je website bouwer bestellen.

Tegen eigen mobiele URL’s

  • Meerdere URL’s voor dezelfde soort content; lastig voor sociaal delen en indexatie. je moet heel precies content aan elkaar koppelen zodat je geen duplicate content krijgt.
  • De redirects als gevolg van de mobiele useragent detectie naar een andere URL kost tijd en kan dus tot langere pagina laadtijden leiden.
  • En je hebt weer te maken met duplicate content zaken door ‘content forking’.

Waar moet je op letten bij responsive ivm SEO en usability?

  • Net als bij dynamisch hangt er veel af van de user agent detectie scripts en daar kan dus ook veel mee misgaan.
  • Missende relaties tussen pagina’s op de desktop en de mobiele versie.
  • SEO tip eigen mobiele URL’s: stel rel=”canonical” en rel=”alternate”-elementen in de pagina header en of de xml sitemap in; hierdoor wordt de linkjuice van de mobiele site doorgegeven aan de desktop variant en kom je niet met dubbele URL-sets in de Google index terecht.

Google’s mobiele voorkeur?

Alhoewel Google all 3 concepten keurig beschrijft lees je tussen de regel door dat ze de responsive oplossing het meest zien zetten. Vanuit hun oogpunt is dat zeker waar: indexeerbaarheid op 1 URL met dezelfde content geeft het minste problemen om de site te ranken. Website bouwers maken er ook de minste fouten mee. Daarnaast koos Google in 2012 voor haar eigen sites de responsive methode. Dat zegt niet alles maar wel veel!

Over Keesjan Deelstra

Autheur "Handboek zoekmachinemarketing". SEO Consultant, vader van 4!

Facebook / Google+ / LinkedIn / Twitter / InternetEffect / SEO Effect

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *