Does Google really skip indexing content that relies on viewport size?

What does Googlebot actually see as a viewport?

Googlebot uses a fixed viewport of 960x1200 pixels when rendering most pages. This dimension corresponds to a standard desktop screen. If your important content only appears on mobile (e.g., a menu hidden behind a hamburger icon) or only on very large screens (e.g., a sidebar that loads beyond 1400px), Googlebot may never see it.

The problem arises with conditional loading techniques based on media queries or JavaScript scripts that detect screen size. An element set to load only under 768px wide will never be triggered during rendering by Google. The bot crawls, but it does not simulate all possible viewports — it uses only one by default.

What development techniques are affected?

Conditional lazy loading is a prime suspect. If you're loading images, text blocks, or videos only when the screen exceeds or falls below a certain size, you're creating a blind spot for Googlebot. Modern JavaScript frameworks (React, Vue, Angular) often use conditional components based on window.innerWidth or resize hooks.

Mobile-first hidden menus also pose a problem. A hamburger menu that reveals its links only on mobile might deprive Googlebot of part of the internal linking structure. Dynamically loaded sidebars, content sections that only display in landscape mode, or conditional carousels fall into this category. Anything that depends on a viewport condition is suspect.

How does Google detect this type of missing content?

Google uses its Chromium-based rendering engine with a standard viewport. If content is not present in the DOM after the initial rendering, or if it remains hidden by CSS rules related to untriggered media queries, it is considered not accessible. The URL Inspection Tool in Search Console can reveal what Googlebot actually sees, and this is often where surprises are uncovered.

The issue is that Google does not systematically crawl multiple viewport versions. There is no separate mobile rendering to check if content only appears on small screens. Therefore, you must ensure that all critical content is present in the DOM regardless of dimensions, even if it is visually hidden by CSS according to the screen.

• Googlebot uses a fixed viewport of 960x1200 pixels for rendering pages
• Conditionally loaded content based on screen size may be invisible to Google
• Conditional lazy loading, mobile-only hamburger menus, and dynamic sidebars are areas of risk
• The URL Inspection Tool allows you to check what Googlebot actually sees after rendering
• Critical content must be present in the DOM regardless of the viewport, even if visually hidden

Is this statement consistent with observed practices in the field?

Yes, and it has even been confirmed by numerous audit cases where well-designed mobile-first sites were losing positions because entire sections were never indexed. The classic pitfall: a responsive site with rich text content displayed only beyond 1200px wide, assuming that Google would also crawl this version. It does not do this systematically.

Some developers assume that mobile-first indexing means Google crawls the mobile version first, so they optimize only for small screens. However, mobile-first indexing does not change the rendering viewport used by Googlebot for desktop sites. The bot still uses a standard viewport, not a mobile viewport. This confusion can be costly in organic visibility.

What nuances need to be considered with this rule?

Google says "important content" but never specifies what is "important" in its view. [To be verified]: does this include secondary navigation elements? Footer internal link blocks? Action buttons that appear only on mobile? The statement remains deliberately vague.

In practice, it is observed that structuring elements (headings, paragraphs, lists, images with alt) must absolutely be accessible regardless of the viewport. Purely decorative elements or CTA blocks can probably be conditional without major SEO impact. But Google provides no exhaustive list — you must test and validate on a case-by-case basis with Search Console.

In what cases does this rule not apply?

If you have strictly duplicated content between mobile and desktop, just displayed differently via CSS, you are safe. The content is in the DOM, Google sees it, even if it is visually hidden. The problem only arises when the content does not exist at all in the HTML until a JavaScript viewport condition triggers it.

Sites that use a unique DOM with conditional CSS classes (display:none based on media queries) are generally safe. Those that load entire JavaScript components based on window.innerWidth are at risk. The distinction is technical but critical: presence in the initial DOM vs. conditional dynamic loading.

What should be done to avoid this problem in practice?

The first action is to audit the DOM rendered by Googlebot using the URL Inspection Tool in Search Console. Compare the rendered HTML with what you see in actual navigation on mobile and desktop. If sections are missing in the crawled version, you have a viewport issue. Also use Screaming Frog in JavaScript rendering mode to simulate the rendering and detect conditional content.

Next, refactor your code to ensure that all critical content is present in the initial DOM, regardless of the viewport. You can visually hide it with CSS (display:none, visibility:hidden) based on screen size, but it must be loaded from the get-go. Image lazy loading must use the native loading="lazy" attribute, not conditional scripts based on screen size.

What technical errors should be avoided at all costs?

Never load important text blocks via JavaScript only if window.innerWidth exceeds or falls below a threshold. Google will not trigger these conditions. Avoid frameworks that build conditionally based React/Vue components based on resize hooks or JavaScript media queries. The initial DOM must be complete.

Be wary of hamburger menus that only reveal their links on mobile. If these links are critical for internal linking, ensure they exist in an accessible desktop version for Googlebot, even if visually hidden. Carousels that only load their slides at certain screen sizes are also problematic: all slides must be in the DOM, even if CSS is only displaying one at a time.

How can I verify that my site complies with this requirement?

Test your key pages with Google Search Console → URL Inspection → Test Live URL. Look at the rendered HTML and compare it with your source code. If sections are missing, dig into your JavaScript scripts to identify viewport conditions. Use Chrome DevTools in 960x1200 pixels mode (Googlebot's viewport) to simulate what the bot sees.

Establish continuous monitoring: dev teams can introduce conditional code without realizing the SEO impact. An automated test comparing the rendered DOM across different viewports can alert to any divergence. Tools like Sitebulb or OnCrawl can help detect conditional content through regular audits.

• Audit the DOM rendered by Googlebot with URL Inspection Tool and compare with the source code
• Refactor the code to ensure all critical content is present in the initial DOM, regardless of the viewport
• Use native loading="lazy" for images rather than conditional JavaScript scripts
• Verify that hamburger menus and mobile links also exist in a desktop version, even if visually hidden
• Test pages at 960x1200 pixel viewport with Chrome DevTools to simulate Googlebot
• Set up automated monitoring to detect conditional content introduced by dev teams