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

Seo Audit

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!

Share this tool

Web tools for modern developers. Try these one!

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

Home Back to top of the page