How to Capture SERP Screenshots at Different Browser Widths for SEO

To capture a Google search results page (SERP) at a specific browser width, set that width in Chrome DevTools’ Responsive Viewport Mode and save a viewport screenshot. For repeatable captures, use Playwright: set the viewport before navigation, visit the results URL, and save the screenshot. Keep the query, location, language, time, device conditions, and capture type with each image. Google says results can vary with those factors, so a screenshot records one observation; it does not establish a universal or permanent ranking position.

What a width comparison can show

A controlled width comparison can help document how the visible results and page layout change as the browser gets narrower or wider. It can show which modules appear, how results are ordered in the captured context, and what falls below the fold. It cannot by itself show that width caused a ranking change: search context may also have changed.

Decide whether you need the initial viewport or the whole scrollable page. A viewport capture shows the initial screen at a given width. A full-page capture includes content below the fold. Save these as distinct artifacts and compare like with like.

Capture SERPs manually with Chrome DevTools

1. Open the Google results page for the query you want to document. Record the exact query and any relevant market or language settings.
2. Open Chrome DevTools and enable the device toolbar to enter Responsive Viewport Mode.
3. Enter the target width and height directly. Keep height constant while changing width so each initial-screen screenshot shows a comparable vertical area.
4. Open DevTools’ More options menu and choose Capture screenshot for the visible viewport. Choose Capture a full size screenshot when you need the full page.
5. Repeat for each width, preserving the same search context and capture type as far as possible.

Chrome’s documented responsive presets include 320, 375, 425, 768, 1024, 1440, and 2560 pixels. They are convenient examples, not SEO standards. Choose widths that match the question you are investigating, and record the actual values.

Use a filename such as running-shoes-us-en-375px-viewport-2026-10-04.png. A companion log can record the exact query, location, language, date and time, device type, account or personalization state where known, viewport width and height, and whether the screenshot is viewport or full page.

Automate multiple widths with Playwright

Playwright is useful when you need the same capture procedure repeated across a list of widths. The following Node.js example uses Chromium, creates a fresh browser context for each width, sets the viewport before navigation, and saves a viewport screenshot. Replace the example URL with the Google results URL you intend to document.

const { chromium } = require('playwright');

(async () => {
  const targetUrl = 'https://www.google.com/search?q=running+shoes';
  const widths = [375, 768, 1280];
  const height = 900;
  const browser = await chromium.launch({ headless: true });

  try {
    for (const width of widths) {
      const context = await browser.newContext({
        viewport: { width, height },
        locale: 'en-US',
        timezoneId: 'America/New_York'
      });
      const page = await context.newPage();
      const response = await page.goto(targetUrl, {
        waitUntil: 'domcontentloaded',
        timeout: 30000
      });

      if (!response || !response.ok()) {
        throw new Error(`Navigation failed at ${width}px: HTTP ${response ? response.status() : 'no response'}`);
      }

      await page.screenshot({ path: `serp-${width}.png` });
      await context.close();
    }
  } finally {
    await browser.close();
  }
})();

Install Playwright in a Node.js project with npm install playwright, then run the script with node capture-serp.js. If your project uses Playwright’s browser installer, install the Chromium browser for the version in your project as well. The script shows screenshot mechanics; it does not guarantee that an automated request is permitted for every use or reproduces a person’s organic search environment. Check the search provider’s applicable terms and your access method separately.

Viewport and full-page captures

The example saves only the visible viewport. To capture the full scrollable page, use await page.screenshot({ path: `serp-${width}-full.png`, fullPage: true });. Treat viewport and full-page images as different capture types in your log. Full-page screenshots may be much taller and larger, and content that loads only after scrolling may require additional handling.

Set viewport before navigation

Creating the context with its viewport before opening the page avoids resizing a phone-sized page after load. Playwright notes that some sites do not expect pages configured for phone-sized viewports to be resized after loading. If you need to change dimensions on an existing page, page.setViewportSize({ width, height }) is available, but a new page or context per condition makes the setup clearer.

Python and cURL options

Playwright’s official page API documents the viewport and screenshot behavior; the JavaScript example above is the repeatable workflow here. For a simple manual request to a known results URL, cURL can save an HTML response, but it does not render a browser viewport or create a SERP screenshot:

curl -L 'https://www.google.com/search?q=running+shoes' -o results.html

Likewise, Python’s standard HTTP clients fetch responses rather than rendering a browser screenshot. Use a browser automation library when the required artifact is a rendered page at a controlled width. Do not treat an HTML download as equivalent to a viewport capture.

Make width comparisons interpretable

Record	Why it matters
Exact query	Small query changes can produce different result sets.
Width and height	Width is the variable under study; holding height steady keeps the visible vertical area comparable.
Location, language, date, and time	Google says results can differ by location, language, and time.
Device type and account or personalization state, where known	Google also identifies device type, recent searches, and personalization as sources of variation.
Viewport or full page	These show different portions of the page and should not be compared as equivalent captures.
Visible modules and fold position	Record what appeared in this capture, without presenting it as a permanent ranking result.

For an SEO review, describe findings in context: for example, “At 375 × 900 px, this capture showed a local module above the first organic result.” Avoid turning one capture into a claim about all users or all searches. Repeating captures at different widths can reduce procedural differences, but it does not remove changes caused by time, location, or personalization.

Or skip the browser setup

ScreenshotNeo is a website screenshot API and MCP server. One GET request can return a PNG, JPEG, WebP, or PDF. It can set a viewport, capture a full page, and accept custom headers, cookies, and a user agent. See the API documentation for request options.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://www.google.com/search?q=running+shoes -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://www.google.com/search?q=running+shoes"},
    timeout=90,
)
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://www.google.com/search?q=running+shoes'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await require('node:fs/promises').writeFile('shot.webp', Buffer.from(await res.arrayBuffer()));

To compare widths, make one request per target URL and viewport configuration, keeping the rest of the capture conditions consistent. ScreenshotNeo removes cookie and consent banners, newsletter popups, and chat widgets before capture; each cleanup step can be turned off. Bot checks and CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info, and capture_pdf for AI agents. The free plan includes 1,000 screenshots per month without a card; paid plans start at $5 for 3,000 screenshots.

Sign up for 1,000 free screenshots a month, with no card required.

Performance, reliability, and cost

• Manual captures: Best for a small, deliberate set of widths. They avoid script setup, but repeated work depends on consistently applying and recording the same conditions.
• Playwright: Automates repeated widths, but each browser page takes time and resources to load and render. Reuse a browser process, close pages or contexts after capture, and avoid excessive parallel navigation. No timing benchmark is implied here.
• Reliability: Use a navigation timeout and check the navigation response, as in the example. A loaded document may still be incomplete or show an interstitial. Inspect the saved capture and record failures instead of silently treating them as valid SERPs.
• Cost: Chrome DevTools and the Playwright workflow described here do not require a paid screenshot service, though automation consumes local compute. ScreenshotNeo has a free allowance and published paid tiers; check its current plan details before budgeting repeated capture work.

Troubleshooting

Symptom	Likely cause	What to do
Images differ even though the width matches	Time, location, language, device type, recent searches, or personalization changed.	Record those conditions and repeat with the same settings where possible. Treat differences as observations in context.
The screenshot is too short	A viewport screenshot captures only the visible area.	Use DevTools’ full size screenshot option or Playwright’s fullPage: true when the full page is the intended artifact.
The screenshot shows a blank or partial page	Navigation failed, timed out, or the page had not rendered the desired content.	Check the response and timeout, inspect the page, and save a failure record instead of comparing it as a normal result page.
Mobile rendering looks unlike a phone capture	A viewport width alone does not guarantee physical-device parity, and changing dimensions after load can affect sites.	Set the viewport before navigation and describe the artifact as a browser viewport capture, not a guaranteed phone equivalent.
The full-page image omits content loaded after scrolling	Some content loads lazily as it enters the viewport.	Scroll through the page before the full-page capture if that content matters, then verify the resulting image. The exact page behavior varies.
Automated search access is blocked or challenged	The provider may restrict or challenge the access pattern.	Review applicable provider terms and use an access method permitted for your use. Do not assume a browser script guarantees access.

FAQ

How do I take a full-page screenshot in Chrome DevTools?

Open the More options menu in DevTools and choose Capture a full size screenshot. Use the ordinary capture option when you want only the visible viewport.

How can I compare Google results on mobile and desktop?

Capture the same query at chosen narrow and wide viewport sizes, keep height and known search context consistent, and log whether each image is viewport or full page. A browser viewport is a useful comparison condition, not proof of what every physical device or user sees.

Does a screenshot prove a ranking position?

No. It documents what appeared in one capture. Google says results can vary with time and context, including location, language, device type, recent searches, and personalization.

Do I need a physical phone or capture device?

No. The workflows here use Chrome DevTools or browser automation software to set browser dimensions and save screenshots.

Official references

• Chrome for Developers: Simulate mobile devices with device mode
• Playwright: Page API
• Google Search Help: Why your Google Search results differ from others