Responsive Design Meta Tag

Responsive Design Meta Tag

< Meta Name = "Viewport"

De Viewport meta tag voor Responsive Web Design is het gedeelte van een webpagina waarin de inhoud voor de gebruiker wordt getoond. Het kan variëren van
de afmeting van het scherm van het toestel of apparaat waarop de website zichtbaar is.

Als een webpagina niet responsive geschikt gemaakt is voor kleinere viewports ziet deze er raar uit op een klein scherm. Door de viewport meta tag te gebruiken heb je invloed op de lay-out van webpagina’s op mobiele browsers.

Unknown Meta Tag - The Responsive Design Tag

De belangrijkste punten om te onthouden

  1. Zet de viewport tag altijd in het HEAD gedeelte van je site.
  2. Deze tag wordt door de meeste mobiele browsers ondersteund en gebruikt op duizenden websites.
  3. Gebruik de responsive design meta tag niet als je website niet specifiek geschikt gemaakt is voor responsive.

SEO Invloed Meter

0%

Deze tag heeft
een klein beetje SEO invloed!

Meta Name Viewport

Deze meta tag heet de Responsive Design Meta tag, doe we ook wel het “Viewport Meta Element” noemen. Door de viewport meta tag te gebruiken is het mogelijk om de lay-out van webpagina’s op mobiele browsers te beïnvloeden.

De  Viewport meta tag kan er zo uitzien:

Dit is een versimpelde versie van de Viewport tag die de viewport breedte van een browser naar 240 pixels zet zodat een gebruiker de inhoud niet kan schalen.

De inhoud waardes van de Viewport meta tag worden door een komma van elkaar gescheiden en bevatten een lijst met richtlijnen en de daarbij behorende waardes.

Viewport-MetatagWaarde in dit voorbeeld
Omschrijving
breedtewidth=320
width=device-width
Logische breedte van de viewport, in pixels. De speciale apparaatbreedte waarde geeft aan dat de viewport-breedte de schermbreedte van het apparaat moet zijn.
hoogteheight=480
height=device-height
Logische hoogte van de viewport, in pixels. De speciale apparaatbreedte waarde geeft aan dat de viewport-hoogte de schermbreedte van het apparaat moet zijn.
schaalbaar door gebruikeruser-scalable=noGeeft aan of de gebruiker in en uit de viewport kan zoomen, waardoor de weergave van een webpagina wordt geschaald. Mogelijke waarden zijn ja of nee.
initiële schaalinitial-scale=2.0Stelt de eerste schaal- of uitzoomfactor (of vermenigvuldiger) in en kan worden gebruikt om een webpagina te bekijken. De waarde 1,0 geeft een niet-geschaald webdocument weer.
maximum schaalmaximum-scale=2.5Stelt een maximale limiet in voor de gebruiker om een webpagina te schalen en te zoomen. Waarden zijn numeriek en kunnen variëren van 0,25 tot 10,0.
minimum schaalminimum-scale=0.5Beperkt de gebruiker tot een minimum voor het vergroten of inzoomen op een webpagina. Waarden zijn numeriek en kunnen variëren van 0,25 tot 10,0.

 

HTML Code Viewport Voorbeeld

Betaalbaar & Effectief

Wij leveren betaalbare SEO services die snel en effectief zijn.

Heb je professionele
SEO hulp nodig?

Neem contact op met onze product specialisten of maak een afspraak om je vragen te bespreken!

SEO & Online Marketing blog

Mobile search en seo

Mobile search en seo

Er is een groot verschil tussen mobile search zoek resultaten op mobieltjes waarmee je kunt internetten en de zoek resultaten…
Top 10 SEO Quick Wins voor MKB Nederland

Top 10 SEO Quick Wins voor MKB Nederland

De wereld van de SEO-professie wordt alsmaar gecompliceerder en er komt steeds meer specifieke kennis bij kijken om je in…
Internet marketing voor de feestdagen

Internet marketing voor de feestdagen

Internet marketing blog door: Jonathan Schokker Nu de feestdagen voor de deur staan en het einde van het jaar met…