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.
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:
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
- Avoid fixed-width elements such as large images. Adjust elements to fit within the width of the viewport. Otherwise, the image could wind up larger than the viewport, requiring side scrolling.
- Do not rely on a particular width to render your page. Screen widths vary from device to device, so make sure your page renders correctly at any width.
- Use relative width values in your page’s CSS. Using absolute values can cause elements to load wider than the viewport. The same goes for positioning values. Large absolute values can cause assets to load outside the viewport.
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:
- Dynamic design: This requires you to build an entirely separate page and then serving the appropriate version by detecting user-agent. To tell search engines which version they should access, and to prevent caching servers from sending the wrong version, you will have to use the Vary HTTP header on the page.
- Mobile subdomain: This option requires a significant investment in terms of time and development resources. Like with dynamic design, the mobile subdomain option options requires you to build a whole new site, and then host it at a subdomain, usually m.example.com or mobile.example.com. Google is pretty good at figuring out the relationship between domains and subdomains, but you can never be totally sure, so you’ll need to add canonical tags to the mobile site pointing back to the desktop version. Finally, you’ll have to redirect visitors to each version, mobile and desktop, based on their user-agent. Even worse, subdomains don’t reliably share link juice with the rest of the site, so you’ll isolate your mobile and desktop sites from each other. This could cause issues in the future with Google moving toward its mobile first index.
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.
