Veelgemaakte fouten

Op deze pagina worden enkele fouten beschreven die webmasters vaak maken wanneer ze mobiele websites ontwerpen.

Geblokkeerde JavaScript-, CSS- en afbeeldingsbestanden

Voor een optimale weergave en indexering moet u Googlebot altijd toegang geven tot de JavaScript-, CSS- en afbeeldingsbestanden waarvan uw website gebruikmaakt, zodat Googlebot uw site kan bekijken als de gemiddelde gebruiker. Als het robots.txt-bestand van uw site geen crawling toestaat voor deze items, gaat dit rechtstreeks ten koste van de weergave en indexering van uw content door onze algoritmen. Dit kan leiden tot minder dan optimale posities.

  1. Zorg ervoor dat Googlebot uw JavaScript-, CSS- en afbeeldingsbestanden kan crawlen door de functie Fetchen als Google in Google Search Console te gebruiken. Zo kunt u exact zien hoe Googlebot uw content ziet en weergeeft. Daarnaast helpt dit u om een aantal indexeringsproblemen op uw website te identificeren en op te lossen.

  2. Controleer en test uw robots.txt in Google Search Console.

  3. Test uw mobiele sites met de Mobielvriendelijke test zodat u kunt zien of onze systemen uw website geschikt achten voor mobiele gebruikers.

  4. Als u afzonderlijke URL's gebruikt voor uw mobiele pagina's, zorg er dan voor dat u de URL's voor zowel mobiele gebruikers als desktopgebruikers test, zodat u zeker weet dat de omleiding wordt herkend en kan worden gecrawld.

Niet-afspeelbare content

Sommige soorten content of video's kunnen niet worden afgespeeld op mobiele apparaten, zoals media met licentie-beperkingen of content die afhankelijk is van Flash- of andere spelers die niet breed worden ondersteund op mobiele apparaten. Niet-afspeelbare content op een pagina van een website kan erg frustrerend zijn voor gebruikers.

Wanneer gebruikers een pagina bezoeken met content die niet wordt ondersteund op een mobiel apparaat, krijgen ze een foutmelding te zien die lijkt op de melding hieronder:

Video niet afspeelbaar

Dit is onprettig en onhandig voor mobiele gebruikers.

In plaats van een eigen videospeler of content met niet-ondersteunde indelingen kunt u beter standaard-HTML5-tags gebruiken om video's of animaties in te sluiten.

Overweeg HTML5-animaties te gebruiken voor content met animaties die nu wordt weergegeven met Flash- of andere multimedia-spelers. Deze HTML5-animaties werken in alle webbrowsers. Met Google Web Designer kunt u vrij eenvoudig animaties in HTML5 maken.

  • Gebruik HTML5-normen voor animaties om al uw gebruikers een optimale weergave te bieden.
  • Gebruik video-insluitingen die kunnen worden afgespeeld op alle apparaten.
  • Overweeg de transcriptie van de video beschikbaar te stellen. Hierdoor is uw site toegankelijk voor personen die ondersteunende browsertechnologieën gebruiken of die browsers hebben waarin geen systeemeigen video-indeling kan worden afgespeeld.

Lees het artikel Praktische tips voor video op Web Fundamentals van Google voor meer informatie.

Onjuiste omleidingen

Als u afzonderlijke mobiele URL's heeft, moet u mobiele gebruikers op elke desktop-URL omleiden naar de bijbehorende mobiele URL. Leid ze niet om naar andere pagina's (zoals altijd naar de startpagina).

Voorbeelden:

  • De server van uw desktopsite is zodanig geconfigureerd dat mobiele gebruikers worden omgeleid naar de startpagina van de mobiele site, ongeacht welke URL ze oorspronkelijk hebben opgevraagd, zelfs als de mobiele site een equivalente pagina heeft voor de desktoppagina waar vanaf deze werd omgeleid.
  • De URL's van uw desktopsite worden dynamisch gegenereerd met URL-parameters die niet goed verwijzen naar de equivalente mobiele URL. Een gebruiker die bijvoorbeeld op de desktopsite naar een treindienstregeling voor een bepaalde datum zoekt, zal gefrustreerd raken als hij wordt omgeleid naar de zoekpagina voor de algemene dienstregeling op de mobiele site. We raden u aan de omleiding correct te configureren als u een equivalente mobiele URL heeft, zodat gebruikers terechtkomen op de pagina waar ze naar zoeken.

  • Uw desktopsite leidt sommige mobiele gebruikers om, maar niet allemaal. Zo stuurt een site misschien alleen Android-gebruikers door naar de mobiele site, maar geen gebruikers met een iPhone of Windows Phone.

  • Gebruik Google Search Console. Als u een geverifieerde gebruiker bent, sturen we u een bericht als we vaststellen dat een pagina van uw site smartphonegebruikers omleidt naar de startpagina. In het gedeelte Crawlfouten voor smartphones van Search Console informeren we u ook over onjuiste omleidingen die we detecteren. De URL's die we als voorbeeld geven in Search Console, kunt u gebruiken als uitgangspunt om na te gaan wat het exacte probleem is met uw serverconfiguratie.

  • Stel uw server zodanig in dat smartphonegebruikers worden omgeleid naar de equivalente URL van uw smartphonepagina.

  • Als een pagina op uw site geen equivalente smartphonepagina heeft, laat gebruikers dan gewoon op de desktoppagina blijven en leid ze niet om naar de startpagina van de smartphonesite. In dit geval is het beter niets te doen dan het verkeerd te doen.

  • Probeer responsive webdesign te gebruiken, waarbij dezelfde content wordt weergegeven voor desktop- en smartphonegebruikers.

404-meldingen uitsluitend voor mobiele gebruikers

Sommige sites tonen content aan desktopgebruikers die een URL openen, maar laten een foutpagina zien aan mobiele gebruikers.

404-meldingen uitsluitend voor mobiele gebruikers

Als u registreert dat een gebruiker een desktoppagina bezoekt vanaf een mobiel apparaat en u een equivalente pagina voor smartphones heeft die beschikbaar is op een andere URL, leidt u die gebruiker om naar deze URL in plaats van een 404-foutmelding of soft 404-pagina weer te geven. Dit is een stuk prettiger voor de gebruiker. Zorg er ook voor dat de mobielvriendelijke pagina zelf geen foutpagina is.

Goede omleidingen
  • Gebruik Google Search Console. Als u een geverifieerde gebruiker bent voor de site, sturen we u een bericht in het Berichtencentrum.

  • Als u een smartphonesite heeft op een afzonderlijke URL, stelt u de server zodanig in dat smartphonegebruikers worden omgeleid naar de equivalente URL op uw smartphonesite.

  • Als u een dynamische weergave gebruikt, moet u ervoor zorgen dat uw detectie van de user-agent goed is geconfigureerd.

  • Als een pagina op uw site geen equivalente smartphonepagina heeft, laat gebruikers dan op de desktoppagina blijven. Het is veel prettiger voor de gebruiker als er content wordt weergegeven waarnaar hij op zoek was, dan wanneer hij een foutmelding krijgt.

  • Gebruik waar mogelijk responsive webdesign. Met deze configuratie kunt u dezelfde content weergeven aan alle bezoekers, ongeacht het apparaat dat ze gebruiken.

  • Bekijk het rapport Crawlfouten in Google Search Console. Het tabblad Smartphone bevat een lijst met gedetecteerde URL's die een 404-foutmelding voor uitsluitend smartphonegebruikers retourneren.

Interstitials vermijden

Op veel websites worden interstitials of overlays weergegeven die de content van de pagina die de gebruiker bezoekt, geheel of gedeeltelijk bedekken. Deze interstitials, die vaak op mobiele apparaten worden weergegeven om de systeemeigen app van een website, aanmeldingsformulieren voor mailinglijsten of advertenties te promoten, zorgen voor een slechte gebruikerservaring. In extreme gevallen is de interstitial zo ontworpen dat de gebruiker deze bijna niet kan sluiten om de echte content van de pagina te bekijken. Aangezien schermruimte op mobiele apparaten beperkt is, hebben interstitials een negatieve invloed op de gebruikerservaring.

Interstitials bij app-downloads

Veel webmasters promoten apps van hun eigen bedrijf onder mobiele websitebezoekers. Als dit niet met zorg wordt gedaan, kan dit leiden tot indexeringsproblemen en kan de bezoeker problemen ondervinden met het gebruik van de site.

Interstitials vermijden
De interstitial zorgt ervoor dat de gebruiker zijn taken niet kan voltooien.
App-banner
Met een banner kunnen gebruikers taken voltooien terwijl de app wordt gepresenteerd.
  • Gebruik een eenvoudige banner om uw app inline met de content van de pagina te promoten. Deze banner kan worden geïmplementeerd via:

    • Een door de browser ondersteunde banner zoals Smart App Banners voor Safari of Native App Banners voor Chrome.
    • Een HTML-banner of -afbeelding, vergelijkbaar met een typische kleine advertentie, met een link naar de betreffende app-store waar de app kan worden gedownload.
  • Als u een Android-app heeft, kunt u overwegen app-indexering te implementeren. Wanneer geïndexeerde content uit uw app relevant is voor een specifieke zoekopdracht, geven we een installatieknop weer in de zoekresultaten, zodat gebruikers de app kunnen downloaden en rechtstreeks naar de specifieke pagina in uw app kunnen gaan.

Wanneer een website gebruikers content aanbiedt op afzonderlijke mobiele URL's, is het een gangbare praktijk links te hebben naar de voor desktop geoptimaliseerde versie en ook van de desktoppagina naar de mobiele pagina. Een veelgemaakte fout is dat de links verwijzen naar een niet-relevante pagina. De links van de mobiele pagina's verwijzen dan bijvoorbeeld naar de startpagina van de desktopsite.

  • Controleer de links om er zeker van te zijn dat ze naar de juiste equivalente pagina verwijzen.

Langzame mobiele pagina's

Het is heel belangrijk ervoor te zorgen dat uw mobiele site snel wordt geladen. Gebruikers kunnen erg gefrustreerd raken als ze lang moeten wachten voordat ze de content kunnen zien.

Gebruik Google PageSpeed Insights om te bepalen of er problemen met uw site zijn waardoor uw pagina's worden vertraagd. Richt u met name op het subgedeelte Snelheid. Probeer de problemen te verhelpen die zijn aangegeven als 'Dit moet worden gecorrigeerd'.

Voor meer informatie gaat u naar:

Uw viewport correct instellen

Omdat bezoekers van uw site veel verschillende apparaten gebruiken met verschillende schermformaten, moet u voor uw pagina's een viewport definiëren met de metatag viewport. Deze tag laat browsers weten hoe de afmeting en schaling van de pagina moet worden aangepast voor een bepaald apparaat. Hier volgen twee veelvoorkomende problemen:

  • Het gebruik van viewports met een vaste breedte. Hierdoor kan de pagina niet goed worden geschaald voor alle apparaatformaten (en er zijn veel). Meer informatie.
  • Uitgaan van een onrealistisch brede minimumviewport, waardoor gebruikers op kleinere apparaten kunnen worden gedwongen horizontaal te scrollen om de content te lezen. Dit is het geval wanneer pagina's gebruikmaken van absolute waarden in CSS-definities of van afbeeldingen die ontworpen zijn om er bij een specifieke browserbreedte (zoals 980 px) op hun best uit te zien. U kunt deze fout verhelpen door ervoor te zorgen dat CSS-elementen relatieve breedte- en positiewaarden bevatten en dat ook afbeeldingen schaalbaar zijn. Meer informatie.

Kleine lettergrootte

Zorg ervoor dat de lettergrootte niet zo klein is dat deze niet leesbaar is op een mobiel apparaat, waardoor mobiele bezoekers met hun vingers moeten inzoomen voordat ze kunnen lezen. Nadat u een viewport heeft ingesteld voor uw webpagina's, stelt u uw lettergrootte in zodat deze zich goed in verhouding aanpast binnen de viewport. U kunt meer praktische tips over lettergrootte vinden in het artikel Leesbare lettergrootten gebruiken.

Tikelementen te dicht op elkaar

Plaats tikelementen, zoals knoppen en links, niet zo dicht bij elkaar dat een mobiele gebruiker niet gemakkelijk met zijn vinger op het gewenste element kan tikken zonder tegelijkertijd op een element ernaast te tikken. U kunt deze fouten verhelpen door ervoor te zorgen dat knoppen en navigatielinks een goed formaat hebben met genoeg ruimte eromheen, zodat ze ook werken voor mobiele bezoekers. Meer informatie in Geschikte formaten voor tikdoelen.

Feedback verzenden over...