Viewport

Che cos'è la 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