Required Meta Tag for Mobile-Device Responsive Sites

There's a meta tag that tells robots and SEO spiders your page is responsive to mobile devices.

The name="viewport" meta tag tells browsers running on mobile devices how to render the page. The viewport meta tag must be in the HEAD area of your web page source code.

That's not to say SEO spiders don't look for other things to determine whether or not a page is responsive to mobile devices. But a missing viewport meta tag is a clear signal that the page is un-responsive.

(A CSS alternative is being adopted, but it isn't yet widely supported. In the meantime, use the viewport meta tag.)

Here's the meta tag with the content value recommended for most sites:

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

Unless you have reason to do otherwise, copy that meta tag and paste it into the source code HEAD area of every web page on your site (that doesn't already have a viewport meta tag).

Even if it wasn't a clear signal to SEO spiders that the page is responsive to mobile devices, you generally would still want to use the meta tag. Without it, mobile browsers make assumptions about how to render the page, each browser making its own assumptions, and the result may or may not be the optimum way to display your page.

The content value of the meta tag may be different than the generally recommended value above.

The viewport meta tag content value is a list of comma-separated name=value sets. In the meta tag above, the sets are "width=device-width" and "initial-scale=1.0" separated with a comma (spaces after commas are optional).

The number of name=value sets in the content value, and the order in which the sets appear, aren't important. What is important is that they're separated with a comma when there's more than one name=value set.

Viewport Meta Tag "width" Value

Generally, the value of "width" specified as "device-width" is preferred. It tells the browser to consider the width of the page to be the same as the width of the mobile device.

With the various widths and pixel densities on the market, and new ones coming along intermittently, use "device-width" unless it makes sense to do otherwise.

The "width" value can be a specific number of pixels, if the web page must be rendered at its actual pixel width. Simply specify the number of pixels instead of "device-width".

Here are a couple name=value examples for "width":

width=device-width
width=500

Viewport Meta Tag "initial-scale" Value

Generally, the value of "initial-scale" specified as "1.0" or "1" is preferred.

A value of "1.0" or "1" tells the browser to render the page at its actual size, not zoomed, when it's first loaded. It instructs browsers to establish a 1:1 relationship with the width of the page regardless of device orientation. The page can take full advantage of the landscape width.

If the value were specified as "1.5", the page would be zoomed in to 1½ it's normal size when it's first loaded. Similarly, if specified as "0.5", the page would be zoomed out to ½ size.

Here are a couple name=value examples for "initial-scale":

initial-scale=1
initial-scale=1.0
initial-scale=1.5
initial-scale=2.0
initial-scale=0.5

Viewport Meta Tag "maximum-scale" Value

Generally, "maximum-scale" isn't needed in the viewport meta tag. If present, it specifies the furthest the page may be zoomed in.

If the value is "2.0" or "2", the page can be zoomed in to twice its size. If the value is "1.0" or "1", the page can't be zoomed in at all.

Unless there's a real need to prevent zooming past a certain point, leaving "maximum-scale" out of the viewport meta tag is considered the most user-friendly decision.

Here are some name=value examples for "maximum-scale":

maximum-scale=1
maximum-scale=1.0
maximum-scale=2.3
maximum-scale=3.5

Viewport Meta Tag "minimum-scale" Value

Generally, "minimum-scale" isn't needed in the viewport meta tag. If present, it specifies the furthest the page may be zoomed out.

To be valid, the value needs to be 1 or less than 1. If the value is "0.5", the page can be zoomed out to half its size. If the value is "1.0" or "1", the page can't be zoomed out at all.

Unless there's a real need to prevent zooming out past a certain point, leaving "minimum-scale" out of the viewport meta tag is considered the most user-friendly decision.

Here are some name=value examples for "minimum-scale":

minimum-scale=1
minimum-scale=1.0
minimum-scale=0.75
minimum-scale=0.5

Viewport Meta Tag "user-scalable" Value

Generally, "user-scalable" isn't needed in the viewport meta tag. If present, it's used to prevent all zooming.

The only value that makes a difference for "user-scalable" is the value "no". Without "user-scalable", zooming is allowed — within the constraints of "maximum-scale" and "minimum-scale", if they're present.

Unless there's a real need to prevent all zooming, leaving "user-scalable" out of the viewport meta tag is considered the most user-friendly decision.

Here is the name=value set for "user-scalable":

user-scalable=no

Constructing the name="viewport" Meta Tag

Determine which of the name=value sets you wish to have in the meta tag's content attribute value.

Put them all on one line, separated with a comma and bounded with quotation marks. That's the value for the content attribute.

As an example, let's suppose you want width=device-width, initial-scale=1.5, and maximum-scale=2.0. The meta tag would look like this.

<meta name="viewport" content="width=device-width, initial-scale=1.5, maximum-scale=2.0">

To reiterate, width=device-width and initial-scale=1.0 are the two most user-friendly choices, with the other name=value sets omitted. Consider changing those or adding other name=value sets only if your page requires it.

The viewport meta tag signals robots and SEO spiders that your page is mobile device responsive. Put in the HEAD area of your web page source code.

(This article first appeared in Possibilities ezine.)

Will Bontrager