How to, Verdieping

6 soorten mobiele sites & de impact op SEO

0

Mobiele SEO is hot. En terecht! Het aantal mobiele zoekopdrachten is sinds 2010 met 400% (!) gestegen en maar liefst 53% van de smartphone-gebruikers doet wel eens een aankoop naar aanleiding van een mobiele zoekopdracht. Hoog tijd om het ijzer te smeden dus. Maar hoe? In dit artikel bespreken we 6 manieren om je site mobiel te maken, met daarbij de voor- en nadelen voor SEO.

Het internet telt momenteel zes manieren om websites mobiel te maken. Hierbij een overzicht:

  1. Responsive design met dezelfde URL
  2. Responsive design met dezelfde URL en dynamic serving
  3. Desktop website met dezelfde URL
  4. Mobiele website met dezelfde URL
  5. Mobiele website met een andere URL
  6. Mobiele website op andermans domein

1. Responsive design met dezelfde URL

Google en Bing prefereren responsive design: templates die zich aanpassen aan het apparaat waarmee bezoekers je website bekijken. Je website stuurt dezelfde HTML naar smartphones en desktops en schaalt je template met CSS media queries.

De voordelen:

  • Deze afbeelding is niet langer beschikbaar.

    Alle linkwaarde stroomt naar één URL, wat beter is voor je (mobiele) SEO.

  • Je loopt geen risico op duplicate content.
  • Bedrijven, die dezelfde content willen tonen aan desktopbezoekers en mobiele bezoekers, hoeven hun content slechts eenmaal in hun CMS te gieten.
  • Je hoeft geen redirects te implementeren.

Nadelen:

  • Zoekintenties van mobiele zoekopdrachten verschillen soms van desktopzoekopdrachten en iedere zoekintentie vereist andere content.
  • Mobiele websites toveren teksten van desktopwebsites vaak om in enorme tekstblokken, die bezoekers de stuipen op het lijf jagen.

Uitvoering:

Wil je deze optie implementeren?

  • Schakel een front-end developer in.
  • Koop een responsive design bij een webbouwer of online aanbieder van themes.
  • Pluk een gratis template, zoals Responsive, van het web.

2. Responsive design met dezelfde URL en dynamic serving

Deze afbeelding is niet langer beschikbaar.

Een responsive design etaleert enkel een ander design, geen andere content. In het verlengde ligt dynamic serving. Hiermee stuur je vanaf dezelfde URL ook verschillende HTML naar desktops en smartphones of gebruik je client-side Javascript om de HTML te wijzigen. Met andere woorden; je kunt de content per type device aanpassen.

Voordelen:

  • Alle linkwaarde stroomt naar één URL, wat beter is voor (mobiele) SEO.
  • Je loopt geen risico op duplicate content.
  • Je kunt een responsive design toepassen en toch andere content presenteren aan mobiele bezoekers. Op die manier kun je een betere gebruikerservaring creëren.
  • Google en Bing zien het tonen van verschillende content op dezelfde URL aan verschillende apparaten niet als cloaking. Je riskeert dus geen penalty of ban van zoekmachines.

Nadelen:

  • Je moet twee verschillende versies van dezelfde pagina schrijven en invoeren.
  • Ik citeer mijn collega Robbert van Ekris: “Als ik tijdens het werk een interessant artikel tegenkom, dat ik in de trein wil lezen, dan wil ik juist niet dat die website andere content toont op mijn smartphone.” Klinkt logisch.

Uitvoering voor SEO:

Voeg een Vary HTTP header toe aan je server response en Google crawlt automatisch de desktopversie en de mobiele versie van je URL’s.

3. Desktopwebsite met dezelfde URL

Deze afbeelding is niet langer beschikbaar.

Je kunt ook gewoon de desktopversie van je huidige website behouden.

Voordelen:

  • Je hoeft niks te doen, dus het scheelt tijd, geld en energie.
  • Verrassend veel mensen geven nog de voorkeur aan desktopwebsites, ook op mobiele devices. Ik verwacht wel dat deze groep steeds kleiner wordt, naarmate mobiele websites zich steeds verder ontwikkelen en aansluiten bij wensen van gebruikers.

Nadelen:

  • Desktopwebsites zijn vaak niet gebruiksvriendelijk: je moet meer dan drie seconden wachten totdat de website geladen is, veel inzoomen en schuiven, en klikken op links die zo klein zijn dat je na drie pogingen niet meer je wijsvinger wilt uitsteken, maar je middelvinger.
  • Een slechte gebruikerservaring kost klanten. Uit onderzoek van Compuware 2011 blijkt dat 40% van de respondenten direct na een slechte mobiele ervaring de website van de concurrent bezoekt. Oei!

4. Mobiele website met dezelfde URL

Deze afbeelding is niet langer beschikbaar.

Je kunt je website mobiel maken met online tools en templates. Een goed voorbeeld is WPtouch. Deze plugin voor WordPress zet je desktopwebsite om in een ‘App’-design, dat geschikt is voor alle mobiele apparaten.

Voordelen:

  • Het is (vaak) gratis en voor niks.
  • Je kunt je mobiele website zelf maken en hebt geen front-end developer nodig.

Nadelen:

  • Mobiele websites krijgen soms een compleet andere look-and-feel, omdat de opmaak afwijkt van de desktopwebsite.

Uitvoering:

Ga naar bijvoorbeeld WPtouch of naar de site van een andere tool voor mobiele sites en volg de instructies.

5. Mobiele website met een andere URL

Deze afbeelding is niet langer beschikbaar.

Je kunt een mobiele website maken en plaatsen op een subdomein (m.voorbeeld.nl, mobiel.voorbeeld.nl), een directory (www.voorbeeld.nl/m/) of een domein met een mobiele domeinextensie (www.voorbeeld.mobi).

Voordelen:

  • Je kunt je content geheel afstemmen op het zoekgedrag en de zoekintentie van mobiele gebruikers — net als met dynamic serving.
  • Je kunt een betere gebruikerservaring creëren.

Nadelen:

  • Je moet twee verschillende versies van dezelfde pagina schrijven en invoeren.
  • Je moet later waarschijnlijk ook subdomeinen aanmaken voor alle toekomstige apparaten: tv.domein.nl, car.domein.nl etc.
  • Je krijgt te maken met duplicate content, wanneer de user agent detection niet werkt of ontbreekt en Google zowel je desktop- als mobiele website indexeert. Een dergelijke tool detecteert welk besturingssyteem de bezoeker gebruikt en bepaalt op basis daarvan welke site de bezoeker te zien krijgt.
  • Je moet je user agent detection up-to-date houden.
  • Mobiele websites krijgen soms een compleet andere look-and-feel, omdat de opmaak afwijkt van de desktopwebsite.
  • Deze methode heeft geen toegevoegde waarde voor mobiele SEO.
  • Mobiele URL’s bezitten zelf vaak weinig linkpopulariteit (PageRank). Je moet dus ook linkbuilden voor je mobiele URL’s.
  • Je moet een aparte mobiele sitemap opgeven in de Hulpprogramma’s voor Webmasters.

Uitvoering:

  • Implementeer user agent detection, zodat je website de juiste pagina’s toont aan gebruikers van desktops, smartphones en feature phones. Hoe? Gebruik bijvoorbeeld de WordPress plugin Simple Mobile URL Redirect. Of schakel een front-end developer in.
  • Plant een canonical tag in de head van je smartphonepagina’s en een canonical tag in de head van je feature phone pagina’s, zodat Google ze kan herkennen. Google heeft 2 mobiele Googlebots: eentje voor smartphones en eentje voor feature phones.
  • Plaats 2 alternate tags in de head van je desktoppagina’s: eentje naar je smartphone-pagina en eentje naar je feature phone-pagina.

6. Mobiele website op andermans domein

Deze afbeelding is niet langer beschikbaar.

Je kunt een mobiele website maken op een third party site. Goede voorbeelden van zulke websites zijn Mobile Landing Pages (Google Sites), mobeezo en wirenode.

Voordelen:

Je kunt je mobiele website zelf maken met de mobile website builder van de third party site en hebt geen front-end developer nodig.

Nadelen:

  • Je moet twee verschillende versies van dezelfde pagina schrijven en invoeren.
  • Je bent afhankelijk van de (soms beperkte) functionaliteiten en flexibiliteit van de third party.

Uitvoering:

Ga naar één van de third party sites en volg de instructies.

En de winnaar is … (tromgeroffel)

… responsive design! Deze oplossing biedt, in mijn optiek, wel de voordelen en niet de nadelen van alle andere opties: je behoudt dezelfde look-and-feel, loodst alle linkwaarde naar één URL, loopt geen risico op duplicate content en hoeft niet te knutselen met tags en user agent detection.

De enige vraag die je jezelf moet stellen is: wil je dat je mobiele content afwijkt van je desktop content? Nee? Ga dan voor responsive design zonder dynamic serving. Ja? Kies dan voor responsive design met dynamic serving.