A viewport meta tag is HTML (HyperText Markup Language) code that tells browsers the way to management viewport dimensions and scaling. It’s a key ingredient of responsive internet design and ensures your content material is simple to view.
A viewport is the person’s seen space of a webpage. It varies by gadget and while you resize browser home windows.
For instance, the default viewport dimension on a pill is smaller than on a desktop display screen. A smartphone viewport is often smaller than each.
If a person resizes a desktop browser window, in addition they manipulate the viewport. The show could keep the identical or reformat.
Viewports are not often the identical dimension as a completely 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 gadget. The format modifications, too:
This sort of responsive web site design enhances UX (person expertise) and may positively affect your search engine optimisation efforts.
A viewport meta tag adjusts your content material to a person’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 fundamental web page:
The textual content within the show on the left is unreadable. And the show doesn’t make good use of the area obtainable. Customers should zoom in on each the photograph and the textual content to view them.
The textual content on the precise is instantly readable (other than being dummy textual content) and the picture fills the display screen’s width. The person can see clearly with out making changes.
Content material on the web page with a viewport meta tag is extra handy and fascinating, so the person 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 mechanically adapts to its viewing surroundings no matter gadget (i.e., the desktop model of a web site vs. an iPad). Customers have entry to your complete 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 foremost web site. It normally has a separate “mdot” subdomain (i.e., “m.[yourwebsite].com”). Customers could not have entry to your complete web site.
Utilizing viewport meta tags is a straightforward method to enhance person expertise in your web site. This may additionally improve your natural site visitors.
Finally, each outcomes might help you meet your advertising targets.
Enhance Consumer Expertise to Hold Folks on Your Website
Viewport meta tags make your content material simpler to learn. Which implies guests usually tend to keep in your pages longer.
The longer folks keep in your web site, the extra probability it’s a must to:
- Collect precious data (through internet kinds or web site analytics)
- Convert them (the last word win)
Nearly three-quarters (73.1%) of internet designers questioned by GoodFirms say non-responsive design is among the many foremost causes customers go away a web site:
Picture supply: GoodFirms
You possibly can take a look at this concept 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 person spends together with your webpage in concentrate on their display screen. This could improve, too.
- Bounce price: The share of classes Google counts as non-engaged. That is when a person leaves your web site inside 10 seconds with out clicking a hyperlink or triggering an occasion. A lower indicators larger engagement.
You possibly can view common engagement time on a Google Analytics dashboard by going to “Reviews” > “Lifecycle” > “Engagement” > “Engagement overview.”
Bounce price is a bit more troublesome to seek out with Google Analytics 4. For a how-to, take a look at our round-up of helpful Google Analytics metrics and the place to seek out them.
Additional studying:
Assist You Rank Increased in Search Engine Outcomes
The viewport meta tag itself isn’t a direct rating issue, but it surely offers a greater person expertise. This may enhance your web site’s rating in Google’s search engine outcomes pages (SERPs).
An enormous cause 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 need to zoom or scroll to learn offers you a greater probability of rating.
Picture Supply: Google
Most content material administration methods (CMS) will mechanically set optimum viewport meta tags in your web site.
You too can set it your self by enhancing 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 identify=”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 possibly can regulate how your web site will look by adjusting the device-width and initial-scale properties.
Width
Unsurprisingly, width controls the viewport’s width. You possibly can set a particular worth (in pixels), corresponding to width=500. It might seem like this:
<meta identify=”viewport” content material=”width=500, initial-scale=1″>
You too can use device-width, which can use 100% of the gadget’s width. That appears like this:
<meta identify=”viewport” content material=”width=device-width, initial-scale=1″>
System-width is less complicated. And ensures the most effective person expertise by adjusting to numerous display screen sizes.
Preliminary-scale
Preliminary-scale dictates the extent of zoom when a web page masses. You possibly can set it from 0.1 as much as 10. The default is 1.
A zoom degree of three would seem like this:
<meta identify=”viewport” content material=”width=device-width, initial-scale=3″>
Different Properties
There are different methods you may regulate that viewport meta tag too. These properties are:
- Peak: This works the identical as width. You possibly can set it to a particular variety of pixels or use device-height (really helpful).
- 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 degree by stopping customers from zooming in too far. It have to be better 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 person 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 offers poor person 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 present 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 in a different way to present customers the very best expertise. For instance, Apple has ignored all zoom-related meta components 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 seem like:
Look in your chosen browser’s accessibility settings for the same possibility.
The place to Enter Your Viewport Meta Tag
If you happen to’re setting your viewport meta tag manually, bear in mind the really helpful setting is:
<meta identify=”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 finest.
You add this HTML to the <head> factor of your web site. It ought to seem like:
Audit Your Website to Optimize Efficiency
Most CMSs mechanically embrace viewport meta tags on each web page. You possibly can verify this in your web site by utilizing the Semrush Website Audit device.
Open the device 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 device 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 “Cellular search engine optimisation” class. You’ll see an inventory of errors, together with any lacking tags.
Click on “Be taught extra” subsequent to the error for fast directions on the way to repair the issue.
Viewport meta tags are a small however very important a part of optimizing your web site for person expertise, accessibility, and search efficiency. They’re key constructing blocks in your total on web page search engine optimisation technique.
Take advantage of your meta tags (and different search engine optimisation components) with Semrush’s On Web page search engine optimisation Checker. Get details about your web site and your opponents, together with suggestions on how one can enhance efficiency now.