Viewport

What is viewport in HTML?

Seo main factors

Absent <meta name=”viewport”> tag with width or initial scale

Nowadays, owning a mobile-friendly website is no longer an option: now it is more necessary than ever, because search engines rankings are mainly based on it.

If you do not use a viewport meta tag on your website, the rendering of mobile pages will start by desktop screen dimensions and then it will scale it down: this makes reading the page extremely uncomfortable for the users.

You can control how to make your pages suitable for every device's screen only setting the viewport meta tag.

How SeoChecker Viewport meta tag audit fails

If SeoChecker can not find a set Viewport meta tag, it will report an error:

How can my website pass the SeoChecker audit?

Page's <head> contains a <meta name=”viewport”> tag;
a content attribute is contained in the viewport meta tag;
the text width= is included in the content attribute's value.

What does not SeoChecker monitor?

If width is equal to device-width;
if there is an initial-scale key-value pair.

Adding a viewport meta tag

How can I add rightly a viewport <meta> tag with the correct key-value pairs to the <head> of my page?

<!DOCTYPE html>
<html lang="en">
 <head>
   …
   <meta name="viewport" content="width=device-width, initial-scale=1">
   …
 </head>
 …

in order to set the initial level of zoom when the user visits the page, use initial-scale=1
in order to set the width of the viewport to the width of the device, use width=device-width

Related guides

Learn more about Seo main factors

CANONICAL

CHARSET DECLARATION

CRAWLABLE

CRAWLABLE ANCHORS

HREF LANG

HTTPS

SERVER STATUS

SEO Audit

On page SEO performance and page checkup.

Over 300 parameters for the deeper page analysis.

Try it now

Share this Guide

Did you like it? Share it!

Web tools for modern developers. Try these one!

Over 50 generators, builders and validators to improve your SEO and web performances

IMAGE COLOR PALETTE

Images

Upload yours images and get the color palette.

Get color palette for all dominant colors identified in your uploaded image.

WEB VITALS CALCULATOR

Google

Find out how Google calculates your overall Performance score.

Drag the cursors to understand what thresholds you must be aiming for achieving a good performance

NETWORK WATERFALL

Tester and validators

Capture web page requests and timeline waterfall.

Quickly capture and analyze web page network requests during page load.

CSS MINIFIER

Compressor

CSS minifier tool.

Optimize and compress your CSS code, make your website faster and reduce network payload sizes.

GOOGLE EVENTS BUILDER

Analytics Google Tracking script

Measure and track user interactions with your contents.

Track all the actions you want: downloads, clicks, video plays, social share, engagement.

IMAGE EDITOR

Images

Zoom in, scale, flip, rotate, crop and resize your images.

Upload and edit yours images file for free with dunplab image editor.

TWITTER CARD

Builders and generators Social

Generate Twitter cards markup and improve yours html meta.

Attach rich photos, videos and media experiences to Tweets and drive traffic to your site.

GOOGLE MAP BUILDER

Builders and generators Google

Choose a map theme or build your custom Google map.

Customize maps with your own creativity, settings, styles and colors.