Een meta viewport-tag stelt het zichtbare gebied van een webpagina in. Het wordt gebruikt om de browser te instrueren hoe de pagina op verschillende schermformaten moet worden weergegeven, zoals desktop, tablet of mobiel. Google zegt dat de aanwezigheid van deze tag aangeeft dat de pagina mobielvriendelijk is. Dit is belangrijk, omdat Google mobielvriendelijke webpagina’s vanaf 2015 hoger rankt in mobiele zoekresultaten.
Wat is de viewport
De viewport van de browser is het gedeelte van het venster waarin webinhoud kan worden bekeken. Dit is vaak niet dezelfde grootte als de weergegeven pagina. In dat geval biedt de browser schuifbalken, zodat de gebruiker kan scrollen en toegang krijgt tot alle inhoud. Apparaten met een smal scherm, zoals smartphones, geven pagina’s weer in een virtueel venster of viewport. Deze viewport is meestal breder dan het scherm en verkleint vervolgens het weergegeven resultaat, zodat de inhoud tegelijk kan worden bekeken.
Gebruikers kunnen vervolgens zoomen om verschillende delen van de pagina te zien. Als een beeldscherm bijvoorbeeld een breedte van 640 px heeft, kunnen pagina’s worden weergegeven met een virtuele viewport van 980 px. Vervolgens worden deze verkleind om in de 640 px te passen. Deze virtuele viewport is een manier om sites die niet voor mobiel zijn geoptimaliseerd er in het algemeen beter uit te laten zien op apparaten met een smal scherm.
Mobielvriendelijke website
Veel mensen drukken waarschijnlijk op de knop Terug wanneer de desktopversie van een pagina op mobiel wordt geladen. Het is storend en maakt dingen moeilijk leesbaar. Dit kan negatieve signalen naar Google sturen en de zoekmachine vertellen dat er iets ongewenst is aan jouw webpagina. Met de meta viewport-tag kun je dit voorkomen. Veel CMS’en en themes stellen viewport automatisch in. Hierdoor zijn taggerelateerde problemen op de meeste moderne websites ongebruikelijk.
Wel is het belangrijk om te beseffen dat enkel de meta viewport-tag niet genoeg is om een website mobielvriendelijk te maken. Net zoals zonnepanelen kopen niet direct betekent dat je 100 procent duurzaam bezig bent, is de viewport-tag niet alles wat nodig is om een website mobielvriendelijk te maken. Je website moet ook gebruikmaken van responsive design.
Meta viewport-tag toevoegen
Zelf de meta viewport-tag toevoegen aan je website? Dat kan door de onderstaande code in het head-gedeelte van jouw webpagina te plakken:
meta name = “viewport” content = “width = device-width, initial-scale = 1.0”
Vooral WordPress, dat net versie 5.5 heeft uitgebracht, maakt het redelijk eenvoudig om zelf dit soort tags toe te voegen. Houd er rekening mee dat het contentkenmerk niet hoeft te worden ingesteld op width = device-width, initial-scale = 1.0, maar dit is de meest gebruikelijke implementatie en de juiste voor de meeste pagina’s. Uiteraard is het ook mogelijk om deze klus uit te besteden. Vraag een gratis intake aan zodat we jouw wensen kunnen bespreken.
