The viewport tag on your page should have a ‘width=device-width’ attribute. This way, mobile users will have the best online experience.
If the attribute is missing on the viewport tag, content on mobile devices will present itself as it were showing on a desktop. This creates presentation issues with scaling and formatting — and a negative user experience.
If your viewport tag is missing the ‘width=device-width’ you can update the tag to add it. Here’s how.
The width attribute in the viewport tag controls the size of the viewport. If this attribute is missing, mobile devices will not render the page correctly.
Instead, font sizes may fluctuate in an attempt to fit the screen size. This means mobile users may have to zoom in to be able to read the content.
If the viewport tag doesn’t have a width set, mobile devices will render the page at the screen width of a desktop. This creates a negative site experience for users, since the content is not to scale.
If your viewport tag looks something like the following, it’s missing the width attribute that controls the size of the viewport.
No width attribute: <meta name="viewport" content="initial-scale=1">
So, you’ll want to edit your site’s code and update the tag to include this helpful attribute. Then, your viewport tag will look something like this:
Width attribute: <meta name="viewport" content="width=device-width, initial-scale=1">
While you can set a specific width in pixels, don’t be so quick to do so! This is actually another common issue with the viewport tag. Instead, it’s best to set the width to “device-width”. This will serve content to site visitors with the correct scale no matter what device they’re using.
This manual update to the tag requires editing your site’s code, so you may need to bring in the dev team depending on your access permissions.
There’s a second way to update viewport tags to add all necessary attributes. This method lets you implement site changes in a matter of minutes, all without the dev team.
With a few steps and SEO execution platform ClarityAutomate, you can add the width attribute across your site. Here’s the point-and-click process.
To make an update to the viewport tag, we’ll need to optimize the site’s code.
Since the viewport already exists, we just need to update it (as opposed to adding or deleting it).
This steps hones in on the viewport tag to receive the update.
The specific attribute within the viewport tag that we need to update is content.
Lastly, enter the new value of content attribute for the viewport tag with the appropriate width. That’s it!
In a few minutes, that update can be pushed live across thousands of pages with ClarityAutomate. Here’s the change: