Wat je kunt verwachten van dit artikel

Wanneer je een aparte website hebt voor bezoekers vanaf een mobiele telefoon dan is het belangrijk om de relatie tussen de desktop-website en de mobiele-website duidelijk te maken. Dit wordt gedaan om problemen met duplicate content te voorkomen. In dit artikel gaan we kijken hoe dat werkt.

Wat is rel=”alternate” mobile?

Wanneer er gesproken wordt over rel=”alternate” mobile, rel=”alternate” media tag or rel=”alternate” media attribute, dan wordt doorgaans de volgende link relatie bedoeld:

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.nl/”>
Ten behoeve van de leesbaarheid noemen we dit het mobile attribuut vanaf hier.

Deze link relatie wordt gebruikt om een relatie tussen een desktop website en een mobiele website aan te geven. Als je een aparte desktop en mobiele website hebt dan is het van belang om het mobile attribuut te gebruiken.

Waarom is het mobile attribuut van belang?

Als een groot deel van je bezoekers vanaf een mobiel toestel jouw website bezoekt dan kan het raadzaam zijn een aparte mobiele website te ontwikkelen. Let op: dit is niet hetzelfde als een “responsive website”. Bij een responsive website is er een enkele website met een lay-out die zichzelf aanpast aan het toestel waarop het getoond wordt, terwijl bij een aparte mobiele website de website een eigen URL heeft.

Indien je een aparte mobiele website hebt dan wil je dat zoekmachines de juiste variant aan de juiste gebruiker tonen. Zoekmachine gebruikers vanaf desktops moeten op de desktop website terechtkomen en mobiele gebruikers op de mobiele website.

Hoe implementeer je het mobile attribuut

Het mobile attirbuut kan geïmplementeerd worden in de HTML van je pagina’s of via de XML sitemap.

Implementatie in HTML

Op de desktop variant
In de HTML van de desktop pagina gebruik je de link relatie om naar de mobiele variant van de pagina te verwijzen:

<link rel=”alternate” media=”only screen and (max-width: 640px)” href=”http://m.example.nl/”>

Dit geeft aan dat de mobiele website moet worden aangeboden aan toestellen die minder dan 640 pixels breed zijn.

Op de mobiele variant
In de HTML van de mobiele pagina verwijs je vervolgens terug naar de desktop variant via de canonical URL:

<link rel="canonical" href="http://www.example.nl/">

Deze canonical URL verwijzing voorkomt duplicate content door aan te geven dat zoekmachines de desktop variant moeten indexeren.

Implementatie middels XML sitemap

Google ondersteunt ook de definitie van het mobile attribuut via XML sitemaps.

<?xml version=”1.0″ encoding=”UTF-8″?>
<urlset xmlns=”http://www.sitemaps.org/schemas/sitemap/0.9″
xmlns:xhtml=”http://www.w3.org/1999/xhtml”>
<url>
    <loc>http://www.example.nl/</loc>
    <xhtml:link
    rel=”alternate”
    media=”only screen and (max-width: 640px)”
    href=”http://m.example.nl/” />
</url>
</urlset>

Let op: het is nog steeds noodzakelijk om op de mobiele pagina te verwijzen naar de desktop variant middels een canonical URL.

Best practices voor het mobile attribuut

Wederkerende verwijzingen

Om ervoor te zorgen dat zoekmachines de relatie tussen de mobiele en desktop varianten goed begrijpen is het van belang om het mobile attribuut op te nemen op de desktop pagina en deze te “bevestigen” middels een canonical URL verwijzing naar de desktop variant op de mobiele pagina.

Eén-op-één relaties

Iedere desktop pagina mag maximaal één mobiele tegenhanger hebben en andersom.

Vermijd redirects

Zorg ervoor dat de verwijzingen via het mobile attribuut en de canonical URL niet naar redirects verwijzen, maar direct naar de doelpagina. Anders werkt dit verwarrend voor zoekmachines.

Absolute URLs

Hoewel niet in strijd met de specificaties van het link-element is de algemene consensus dat het gebruik van relatieve URLs in het mobile attribuut vermeden moet worden. Relatieve URLs hebben een grotere kans verkeerd geïnterpreteerd te worden door zoekmachines. Dezelfde best practice geldt ook voor andere toepassingen van het link-element: canonical URL, pagination attributen, AMP en het hreflang attribuut.

Test de mobielvriendelijkheid van jouw website

Maak gebruik van Google’s Mobile Friendly tool om de “mobielvriendelijkheid” van jouw website te testen.

Veelgestelde vragen over het mobile attribuut

  1. Waarom wordt mijn mobile attribuut genegeerd door zoekmachines?
  2. Ik heb een responsive website. Moet ik gebruik maken van het mobile attribuut?
  3. Ik toon andere content op mijn desktop pagina’s dan op mijn mobiele pagina’s. Is dat een probleem?

1. Waarom wordt mijn mobile attribuut genegeerd door zoekmachines?

Het mobile attribuut is een signaal, niet een directive. Zoekmachines zijn daarom niet verplicht om jouw mobile attribuut definities te volgen, hoewel ze dit meestal wel doen.

2. Ik heb een responsive website. Moet ik gebruik maken van het mobile attribuut?

Nee, als je een responsive website hoef je geen gebruik te maken van het mobile attribuut. Het mobile attribuut is enkel bedoeld voor aparte desktop- en mobiele websites op aparte URLs.

3. Ik toon andere content op mijn desktop pagina’s dan op mijn mobiele pagina’s. Is dat een probleem?

Zoekmachines zijn op dit moment nog steeds georiënteerd op desktop websites, wat betekent dat de inhoud van jouw desktop website leidend is in het bepalen van de relevantie van jouw website op specifieke zoekopdrachten. Maar let op: Google heeft aangekondigd dit in 2018 aan te passen, waarna de mobiele website leidend wordt. Zoekmachines noemen dit een “mobile-first index”.

In tegenstelling tot wat vaak wordt gedacht willen mobiele gebruikers meestal niet minder content of functionaliteit. Daarom is het aan te raden op beide websites hetzelfde aan te bieden, maar dan geoptimaliseerd voor het desbetreffende toestel.

Bronnen

Waarom wachten? Probeer het direct.

Eindelijk doorhebben wat er werkelijk gebeurt op jouw website.
Gelieve een geldige domeinnaam (www.voorbeeld.nl) op te geven.