- Use the
meta name="viewport"tag to tell the browser how to adjust the content.
- Check out Web Fundamentals for more documentation.
Using meta name="viewport"
To signal to browsers that your page adapts to all devices, add a meta tag to the head of the document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The meta viewport tag gives the browser instructions on how to adjust the dimensions and scaling of the page to the width of the device. When the meta viewport element is absent, mobile browsers default to rendering the page at a desktop screen width (usually about 980px, though this varies across devices). Mobile browsers then try to make the content look better by increasing font sizes and either scaling the content to fit the screen or showing only the part of the content that fits within the screen.
For users, this means that font sizes may have an inconsistent appearance, and users may have to double-tap or pinch-to-zoom in order to be able to see and interact with the content. For Google, we might not judge a page as mobile-friendly because it requires this type of interaction on a mobile device.
For responsive images, include the
As a general rule, if your site works in a recent browser such as Google Chrome or Apple Mobile Safari, it would work with our algorithms.
Why responsive design
We recommend using responsive web design because it:
- Makes it easier for users to share and link to your content with a single URL.
- Helps Google's algorithms accurately assign indexing properties to the page rather than needing to signal the existence of corresponding desktop/mobile pages.
- Requires less engineering time to maintain multiple pages for the same content.
- Reduces the possibility of the common mistakes that affect mobile sites.
- Requires no redirection for users to have a device-optimized view, which reduces load time. Also, user agent-based redirection is error-prone and can degrade your site's user experience (see Pitfalls when detecting user agents for details).
- Saves resources when Googlebot crawls your site. For responsive web design pages, a single Googlebot user agent only needs to crawl your page once, rather than crawling multiple times with different Googlebot user agents to retrieve all versions of the content. This improvement in crawling efficiency can indirectly help Google index more of your site's content and keep it appropriately fresh.
Let's look at each of these configurations in detail.
As an example, a page serves all devices the same HTML that includes a
to include a smartphone-friendly image or add code instead of the
This configuration is very closely related to responsive web design and our
algorithms can detect this setup automatically. Further, this configuration does
not have a requirement for the
Vary HTTP header because the URLs of the page and
its assets do not dynamically serve content. Because of these advantages, if
Given that the server returns different HTML to different user agents, combined
detection is considered a type of dynamic serving configuration. The details are
described in full in the dynamic serving section, but to briefly summarize,
the website should include the
Vary: User-agent HTTP response header when a
URL that serves different HTML content to different user agents is requested.
In this configuration, all devices are served the same HTML which includes a
different content depending on the requesting user agent. That is, the
User-agent HTTP header. This is a signal to Internet caches and Googlebot that