How to Use the Mobile Viewport for SEO

How to Use the Mobile Viewport for SEO

As we’ve covered previously, the mobile friendliness of a website is an important factor when ranking results for a search performed on a mobile device. And with mobile search surpassing desktop search, it’s a factor that cannot be ignored. One major factor in determining mobile friendliness is how well a page renders and displays on different screen sizes for various mobile devices.

One of the best ways you can do this, and the way that’s preferred by Google, is through responsive design using the mobile viewport.

What Is A Page’s Viewport?

The viewport is the window in which a webpage can be seen. Note that it’s not the area in which a page displays, as a page’s dimensions can be larger than the viewport. This is what’s happening when you need to scroll from left to right to see a page. This side scrolling occurs when a page is missing the viewport, or has an unconfigured viewport.

Pages with and without configured viewport

The viewport is added and configured on a page using the viewport meta tag. This tag, like other meta tags, is a bit of HTML that goes in the page’s <head>:

<meta name=viewport content="width=device-width, initial-scale=1”>

That first part in the content attribute, "width=device-width," is what tells browsers to render the page to fit in the device’s screen width. The second part, “initial-scale=1,” instructs browsers to make the page as wide as possible when a page is shown in landscape (like when you turn your phone sideways).

To see a page’s viewport in action, simply resize your browser to see how the page adjusts:

Configured mobile viewport in action

Making Your Design Truly Responsive

Once you’ve set the page’s viewport, size the content on the page according to the viewport. To make sure your page renders in a way that’s friendly for mobile devices, follow these guidelines

How To Use the Viewport for Mobile SEO

Setting the viewport is, by itself, not going to make a page rank higher in Google search results. What responsive design does, however, is help make your page mobile friendly. And it does it in a way that is relatively quick, easy and painless compared to your other options:

You could theoretically use one of the above options to design the mobile version of your site and have it be mobile friendly. However, using responsive design by configuring the mobile viewport is the easiest and most effective way. Plus, it’s the method recommended by Google so you know it’s already SEO-friendly.

Recent guides