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. 

Table of Contents


Viewport tag in the <head>

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.  

Moving the Viewport Tag Into the <head> 

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.  

How to Update Viewport Tags at Scale

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. 

How to Delete Viewport Tags

  • Select what you'd like to optimize: Code

As you know, the viewport tag is part of your site’s code, so that’s what we’re looking to optimize. 

  • Choose how you'd like to optimize it: Delete

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>. 

  • XPath location: XPath of the hreflang outside the head that needs to be removed

This step specifies the location of the viewport tag that will be removed. A few clicks and that tag is gone!

How to Add Viewport Tags

  • Select what you'd like to optimize: Code

We select code to add the viewport tag.

  • Choose how you'd like to optimize it: Add New

Since we’ve already deleted the old tag, we’re ready to add it again. 

  • XPath location: XPath within the <head> where you would like the <viewport> added

This step specifies the location of where the tag will be added. 

  • Specific Location: You can choose “Add before location” or “Add after location” depending on where you want it added

ClarityAutomate lets you choose exactly where the new tag will be added in the HTML.

  • Code: The <meta viewport> tag to be added

All that’s left to do is drop in the viewport tag and push the changes live.

Conclusion

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. 

Looking for other viewport issues?