SEO Viewport

The mobile web has basically taken over the web. Your website needs to keep up with the changes that come up in the tech world. Now, with all these portable devices that all of us have, your site needs to be adjusted, so that people can access it from their smartphones, tablets, or some other devices.

So, let’s see how you add the Meta Viewport Tag on your website, and what are its advantages.

What is a Meta Viewport Tag?

First, you need to know that viewport for mobile devices is different than viewport for desktop. This tag was created, so that developers would be able to optimize websites for mobile devices. Websites had been created long before smartphones were invented, so back then there was no need for such a meta tag. Basically, what Meta Viewport does, is it makes it possible for websites to be viewed on mobile devices.

If you don’t know whether your website is mobile-specific customized, it’s easy to determine a good viewport width. Open your webpage in a browser, and then resize it horizontally.

Here is a video explaining more about this concept.

Why is the Meta Viewport Tag important?

First of all, with so many people surfing the Internet on the go from their phones, it’s essential to include this tag if you want people to keep coming back. The viewport tag lets developers control viewport’s size and scale. You can set it to a specific width and height, so that it fits the devices you want it to run on.

Having a responsive design for your website increases the chances of it getting accessed. When you access a website from a browser’s mobile device, it will not be able to tell that you’re on a phone. It will assume that you’re accessing it from a desktop browser, and it will not make the image centered.

This meta tag can also be used when you’re creating a website dedicated to mobile devices. Other than that, you should only use it when you have a responsive website. If your website is not responsive, then the meta viewport tag will just mess it up.

How to add the meta viewport tag on your website?

The viewport tag was introduced by Apple and it looks like this: <metaname="viewport"content="">.

This is the tag you need to add to your HTML file, so that you set the width of the device:

To set the scale at 1.0, use this tag:

Here you can find some great examples of different viewport tags, and how they were used to optimize a website for iOS devices.

How can Squirrly help you

Squirrly’s Website Audit, ContentLook, is a great tool if you want to see how optimized is your website content strategy. Our audit will also tell you whether your website has the meta viewport tag, or not, giving you instructions on how to fix this problem.

Keep in mind that responsive design is about making your website mould on as many different mobile devices as possible, and still provide a user-friendly experience.