Mobile Seo Configure the viewport

Viewports define how your responsive webpage page should be displayed. If you do not configure the viewport your pages not will not display correctly on different sized browsers (like phones) and you will be frustrating your users by making them pinch and zoom.

If that wasn't enough, you could also be messing up how Google understands your page - to check if your viewport is configured use the mobile seo tool.

What is a viewport?

A viewport declares how big of a window a webpage should be displayed in.

No Viewport

In the above image no viewport is declared. On the desktop the webpage appears normal but on a mobile device with a smaller screen the whole webpage is shown by making everything smaller so it will fit on the screen. This means then when a user goes to this page they have to zoom in just to make the text large enough to read.

Configured Viewport

When we configure the viewport to be the same width as the device it is being displayed on, the text and images are legible without a user having to zoom in just to read the page.

The viewport metatag

The way we configure the viewport is the viewport meta tag. This is a small bit of code that we put into the header of our pages.

Google recommends ¹ the following viewport meta tag for a responsive website...

The viewport metatag shown above is saying...

• width=device-width
• initial-scale=1

In more human terms these say..

• Width: Make the width of the page the same width as whatever screen it is being shown on.
• Initial scale: If the page is shown in landscape (a phone turned sideways) make the page as wide as it can be within that screen.

How to configure the Viewport?

Add the above metatag into the head of your html document if the page is responsive.

Accessibility

Do not use "minimum-scale", "maximum-scale", or "user-scalable" in your viewports. If you do you are restricting people who may not see well from using your pages.

How to check your viewport

To find out if your pages are configuring the viewport tag correctly (or at all) use our Mobile SEO tool.