A viewport meta tag is HTML (HyperText Markup Language) code that tells browsers management viewport dimensions and scaling. It’s a key ingredient of responsive net design and ensures your content material is simple to view.
A viewport is the consumer’s seen space of a webpage. It varies by machine and once you resize browser home windows.
For instance, the default viewport measurement on a pill is smaller than on a desktop display screen. A smartphone viewport is often smaller than each.
If a consumer resizes a desktop browser window, additionally they manipulate the viewport. The show might keep the identical or reformat.
Viewports are hardly ever the identical measurement as a totally rendered webpage, so browsers use scrollbars to let customers entry all of a web site’s content material.
Discover the way you don’t simply see roughly of the identical web page on every machine. The format adjustments, too:
This sort of responsive web site design enhances UX (consumer expertise) and may positively influence your web optimization efforts.
A viewport meta tag adjusts your content material to a consumer’s display screen. It makes a web page extra responsive and prevents customers from having to scroll horizontally or zoom.
Right here’s an instance of how a viewport tag impacts a primary web page:
The textual content within the show on the left is unreadable. And the show doesn’t make good use of the house accessible. Customers should zoom in on each the photograph and the textual content to view them.
The textual content on the proper is straight away readable (other than being dummy textual content) and the picture fills the display screen’s width. The consumer can see clearly with out making changes.
Content material on the web page with a viewport meta tag is extra handy and interesting, so the consumer is more likely to spend extra time with it.
Including meta viewport tags will make your web page extra responsive. And whereas it makes pages mobile-friendly, it isn’t the identical as a cellular web page. Right here’s the important thing distinction:
- A responsive web page routinely adapts to its viewing setting no matter machine (i.e., the desktop model of a web site vs. an iPad). Customers have entry to your whole web site.
- A cellular web page is designed to be used on cellular browsers solely. Content material on these pages is separate out of your predominant web site. It often has a separate “mdot” subdomain (i.e., “m.[yourwebsite].com”). Customers might not have entry to your whole web site.
Utilizing viewport meta tags is an easy approach to enhance consumer expertise in your web site. This could additionally improve your natural visitors.
In the end, each outcomes may help you meet your advertising and marketing targets.
Enhance Consumer Expertise to Preserve Individuals on Your Website
Viewport meta tags make your content material simpler to learn. Which suggests guests usually tend to keep in your pages longer.
The longer individuals keep in your web site, the extra probability it’s important to:
- Collect precious info (by way of net types or web site analytics)
- Convert them (the last word win)
Nearly three-quarters (73.1%) of net designers questioned by GoodFirms say non-responsive design is among the many predominant causes customers depart a web site:
Picture supply: GoodFirms
You may take a look at this idea by yourself web site. After including viewport meta tags, observe the next metrics to see if engagement improves:
- Common engagement time: How a lot time a consumer spends together with your webpage in concentrate on their display screen. This could improve, too.
- Bounce charge: The share of classes Google counts as non-engaged. That is when a consumer leaves your web site inside 10 seconds with out clicking a hyperlink or triggering an occasion. A lower indicators increased engagement.
You may view common engagement time on a Google Analytics dashboard by going to “Studies” > “Lifecycle” > “Engagement” > “Engagement overview.”
Bounce charge is a bit more tough to search out with Google Analytics 4. For a how-to, try our round-up of helpful Google Analytics metrics and the place to search out them.
Additional studying:
Assist You Rank Increased in Search Engine Outcomes
The viewport meta tag itself isn’t a direct rating issue, however it gives a greater consumer expertise. This could enhance your web site’s rating in Google’s search engine outcomes pages (SERPs).
An enormous purpose for that is Google’s shift to mobile-first indexing. This implies it appears to be like on the cellular model of your web site when figuring out your rating within the SERPs.
By having a correct viewport meta tag, you guarantee your content material is mobile-friendly. And having content material customers don’t must zoom or scroll to learn provides you a greater probability of rating.
Picture Supply: Google
Most content material administration methods (CMS) will routinely set optimum viewport meta tags in your web site.
You too can set it your self by modifying the code of your web site.
A viewport meta tag, like different meta tags, is HTML that goes into the web page’s <head>.
A typical web page will include one thing like this:
<meta title=”viewport” content material=”width=device-width, initial-scale=1″>
The content material attribute (“content material=”) determines how the web page will seem when it masses. You may modify how your web site will look by adjusting the device-width and initial-scale properties.
Width
Unsurprisingly, width controls the viewport’s width. You may set a selected worth (in pixels), comparable to width=500. It will appear to be this:
<meta title=”viewport” content material=”width=500, initial-scale=1″>
You too can use device-width, which is able to use 100% of the machine’s width. That appears like this:
<meta title=”viewport” content material=”width=device-width, initial-scale=1″>
Machine-width is easier. And ensures the very best consumer expertise by adjusting to varied display screen sizes.
Preliminary-scale
Preliminary-scale dictates the extent of zoom when a web page masses. You may set it from 0.1 as much as 10. The default is 1.
A zoom stage of three would appear to be this:
<meta title=”viewport” content material=”width=device-width, initial-scale=3″>
Different Properties
There are different methods you’ll be able to modify that viewport meta tag too. These properties are:
- Peak: This works the identical as width. You may set it to a selected variety of pixels or use device-height (advisable).
- Minimal-scale: This controls how a lot zoom the web page permits. It stops customers from zooming out too far. It have to be decrease than or equal to the maximum-scale. The default is 0.1.
- Most-scale: This additionally controls zoom stage by stopping customers from zooming in too far. It have to be higher than or equal to the minimum-scale. The default is 10. Something lower than 3 goes in opposition to accessibility pointers.
- Consumer-scalable: This controls whether or not the consumer can zoom in any respect. Legitimate values are 0 or no, or 1 or sure. Not permitting customers to zoom goes in opposition to Internet Content material Accessibility Pointers (WCAG). It additionally gives poor consumer expertise.
- Interactive-widget: This specifies how interactive widgets, like digital keyboards, have an effect on a web page’s viewports. There are two classes of viewports: visible (no matter a part of the web page customers at the moment see on their display screen) and format (all the weather on the web page, seen or not). Legitimate values are:
- Resizes-visual: Resize solely the visible viewport however not the format viewport (default)
- Resizes-content: Resize each the visible viewport and format viewport
- Overlays-content: Don’t resize any viewport
Some browsers deal with viewport properties otherwise to offer customers the absolute best expertise. For instance, Apple has ignored all zoom-related meta parts since its iOS 10 launch.
Others permit customers to “power allow” zoom (i.e., bypass the user-scalable worth) by altering accessibility settings. Right here’s what Google Chrome’s browser choices for Android cellular units appear to be:
Look in your chosen browser’s accessibility settings for the same choice.
The place to Enter Your Viewport Meta Tag
Should you’re setting your viewport meta tag manually, keep in mind the advisable setting is:
<meta title=”viewport” content material=”width=device-width, initial-scale=1″>
This implies any browser ought to render the web page to the width of its personal display screen. Your content material will adapt to totally different units and at all times look its greatest.
You add this HTML to the <head> factor of your web site. It ought to appear to be:
Audit Your Website to Optimize Efficiency
Most CMSs routinely embrace viewport meta tags on each web page. You may affirm this in your web site through the use of the Semrush Website Audit software.
Open the software and discover your area. Choose “Set up” if that is your first audit.
This may open the “Website Audit Settings” window. Configure the fundamentals of your first crawl. (This detailed setup information will stroll you thru the settings.)
When you’ve configured the settings, click on “Begin Website Audit” to start.
The software will crawl your web site, utilizing the “Website Well being” metric to create an summary of your web site’s well being.
Click on the “Points” tab, then choose the “Cell web optimization” class. You’ll see a listing of errors, together with any lacking tags.
Click on “Study extra” subsequent to the error for fast directions on repair the issue.
Viewport meta tags are a small however very important a part of optimizing your web site for consumer expertise, accessibility, and search efficiency. They’re key constructing blocks in your total on web page web optimization technique.
Benefit from your meta tags (and different web optimization parts) with Semrush’s On Web page web optimization Checker. Get details about your web site and your opponents, together with suggestions on how one can enhance efficiency now.