What it looks like
The viewport meta tag is one line in the head of a page, the part visitors do not see:
<meta name="viewport" content="width=device-width, initial-scale=1">
It has two settings. width=device-width tells the browser to make the page as wide as the screen it is shown on. initial-scale=1 tells it to start at normal size, not zoomed in or out. Together they let a page scale to the screen of a phone.
Almost every modern site builder and theme adds this line for you.
Why it matters
- Without it, phones show a tiny desktop page. The browser assumes the page was made for a wide screen and shrinks it to fit. The text becomes too small to read without zooming.
- Google looks at the phone version. Google mainly uses the mobile version of a page for indexing. A page that is hard to use on a phone is a weak starting point.
- Speed and stability are measured on phones too. Core Web Vitals are reported separately for mobile visitors, so the phone layout counts.
- The tag is only the first step. It tells the browser to use the real screen width. The design still has to adapt to that width.
COMMON MISTAKEAdding settings that stop people from zooming, such as user-scalable=no or maximum-scale=1. People with poor eyesight need to zoom. Keep the tag to the two basic settings.
How to check yours
- Open the page on a computer, right-click and choose "View page source".
- Search the source for
viewportand confirm that the line readswidth=device-width, initial-scale=1. - Open the same page on your phone. The text should be readable without zooming, and nothing should scroll sideways.
- Back on the computer, make the browser window narrow. The layout should rearrange itself to fit.
The free audit checks for the viewport tag on any live page. For the other basics of a healthy site, see the Technical SEO series.