Viewport tags should be in the <head> of the HTML. If your tag is located outside the <head> you can make the necessary optimizations to move it to the correct location.
Read more to learn how.
If the viewport tag exists anywhere else on the page besides in the <head>, they may not be picked up by search engines. This defeats the purpose of the viewport tag, and can create a negative user experience.
If the viewport tag isn’t picked up appropriately, the presentation of content — primarily on mobile devices — can suffer. Mobile users will have to zoom in to read content, since the page will display as if it were loading on a desktop.
This fix has two parts: removing the tag, and adding it again within the <head>.
For example, take a look at this viewport tag:
<head> … </head>
<body class = … style>
<noscript> … </noscript>
<meta name="viewport" content="width=device-width, initial-scale=1">
It clearly is outside the <head>. So, first, we need to delete that viewport tag. Once that’s done, we can re-add it. This time, in its appropriate location, as such:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<base href="https://seoautomation.io/">
<style> … </style>
</head>
This adjustment means the viewport tag will serve its purpose of scaling content’s presentation to correctly fit the viewport of the screen it’s displayed on.
If you don’t have the necessary edit access to make adjustments to your site’s code, you can ask the dev team for assistance.
A second way to delete and add the viewport tag involves SEO execution platform ClarityAutomate.
You’re able to make optimizations across your site in a matter of minutes. Here’s the simple process in ClarityAutomate.
As you know, the viewport tag is part of your site’s code, so that’s what we’re looking to optimize.
Before we can add the viewport tag to its appropriate location within the <head>, we first have to delete it from the incorrect location outside the <head>.
This step specifies the location of the viewport tag that will be removed. A few clicks and that tag is gone!
We select code to add the viewport tag.
Since we’ve already deleted the old tag, we’re ready to add it again.
This step specifies the location of where the tag will be added.
ClarityAutomate lets you choose exactly where the new tag will be added in the HTML.
All that’s left to do is drop in the viewport tag and push the changes live.
A viewport tag outside the <head> may not be picked up. Use ClarityAutomate to add, delete, or update the tag in minutes, so it serves its intended purpose.