Set Puppeteer’s viewport width, height, and deviceScaleFactor before navigating, then capture the page after it loads. For example, use 390 × 844 CSS pixels at scale factor 1 to inspect one mobile layout—but that is an example, not a Google-prescribed SEO size. Google does not specify one universal screenshot viewport, and a local screenshot cannot prove what Googlebot crawls.
Set the viewport before navigating
Use page.setViewport() to configure the CSS viewport and device pixel density together. Create the page, set the viewport, navigate, and then take the screenshot:
As an Amazon Associate I earn from qualifying purchases.
const puppeteer = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
await page.setViewport({
width: 390,
height: 844,
deviceScaleFactor: 1,
});
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({ path: 'page.png', fullPage: true });
} finally {
await browser.close();
}
})();The values are CSS pixels for the viewport and an emulated density factor, not a claim about a particular phone’s physical screen. Change the dimensions to match the responsive layout you need to inspect, and choose a scale factor for the image density you want. Puppeteer’s Page.setViewport API documents these options and advises setting the viewport before navigation because some sites do not expect the viewport to change after loading begins.
The example uses networkidle2 as one practical navigation wait condition, not as proof that every page is finished rendering. Pages with ongoing network activity, lazy content, animations, or delayed components may need a different wait strategy; use a selector or another condition appropriate to the page before capture.
#1 Best Overall
Choose a viewport that answers your SEO question
There is no single “SEO viewport” specified by Google for Puppeteer screenshots. Select dimensions based on the responsive state you want to review: for example, a narrow mobile layout, a wider mobile layout, or a desktop breakpoint. A controlled set of explicit dimensions makes repeated captures easier to compare.
Keep CSS viewport dimensions separate from device scale factor. Width and height determine the layout viewport the page responds to; deviceScaleFactor emulates screen density and affects the pixel density represented in the capture. A physical display can use multiple physical pixels for one CSS pixel, so a device’s advertised pixel resolution is not automatically the viewport width to enter. See Google’s responsive design explanation for this stable distinction; its historical device-size examples should not be treated as current sizing guidance.
Rank #2
Use a known device profile when you need one
If you want a Puppeteer device profile rather than a manually controlled viewport, use KnownDevices and page.emulate(device). Emulation applies the selected device’s user agent and viewport together. Set it before navigation as well:
Free tools Windows power users keep installed
One-click scans. No signup required.
const puppeteer = require('puppeteer');
const { KnownDevices } = require('puppeteer');
(async () => {
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
const device = KnownDevices['iPhone 13'];
await page.emulate(device);
await page.goto('https://example.com', { waitUntil: 'networkidle2' });
await page.screenshot({ path: 'device.png', fullPage: true });
} finally {
await browser.close();
}
})();Use the device name available in the Puppeteer version installed in your project. For a repeatable viewport test matrix, explicit width, height, and scale factor provide direct control; for a device-oriented check, emulation conveniently applies a profile’s viewport and user agent. Puppeteer’s Page.emulate API documents the device-emulation method. Puppeteer also notes that setting a viewport can reload a page in some cases involving isMobile or hasTouch, another reason to apply the desired configuration before navigation.
What the screenshot can—and cannot—tell you about SEO
Google says it uses the mobile version of a site’s content, crawled with the smartphone agent, for indexing and ranking, and recommends responsive design as the easiest design pattern to implement and maintain. A Puppeteer capture can help you spot layout breakage, missing visible content, or responsive-state differences at the dimensions you chose. It is a local rendering check, not evidence that Googlebot received the same content or resources.
Check the mobile experience separately for the content and resources Google needs to discover. Google warns that primary content which loads only after a user gesture such as swiping, clicking, or typing may not be seen by Googlebot. Matching a screenshot’s viewport alone does not ensure the same user agent, resource access, or page behavior as Google’s crawler. See Google’s mobile-first indexing best practices.
deviceScaleFactor controls screenshot emulation density; the reviewed Google guidance does not prescribe a value for it or say that choosing a particular value improves rankings.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Or skip the browser setup
ScreenshotNeo can return a screenshot with one request. See the ScreenshotNeo API documentation for request options.
Best Value
- Used Book in Good Condition
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo accepts cookie and consent banners before capture and removes 60+ known consent platforms, newsletter popups, and chat widgets; each cleanup step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and responses identify 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 with no card; paid plans start at $5 for 3,000 shots.
Learn about ScreenshotNeo, or sign up free for 1,000 screenshots a month with no card.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Troubleshooting Puppeteer captures
- The page uses the wrong responsive layout: Set the viewport before
goto()and verify the dimensions are CSS pixels. If you need mobile user-agent behavior as well, use a device profile withpage.emulate(). - The page reloads after changing emulation: Avoid changing viewport settings after navigation. Puppeteer documents reload behavior in certain cases involving
isMobileorhasTouch. - The screenshot is incomplete: Navigation completion does not guarantee that delayed or lazy content has rendered. Wait for a relevant selector or a page-specific readiness condition before calling
screenshot(); avoid relying on an arbitrary delay where a concrete condition is available. - The screenshot looks sharper or larger than expected: Review
deviceScaleFactorseparately from viewport width and height. Density changes the captured pixel representation; it does not select a different CSS breakpoint by itself. - The screenshot looks right, but SEO content is still missing: A screenshot only shows the local browser’s rendered result. Confirm that important content and required resources are available to Google’s smartphone crawler and do not depend solely on user gestures.
Capture options that affect interpretation
fullPage: true captures beyond the initial viewport, which is useful for reviewing content lower on the page but does not represent only the initial visible screen. For a viewport-only screenshot, omit that option. In either case, configure viewport and emulation before navigation, then use page.screenshot() after the page is ready. Puppeteer’s screenshots guide and Page.screenshot API describe capture behavior and options.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Frequently Asked Questions
Does deviceScaleFactor affect SEO rankings?
No ranking effect is established by the cited guidance. It controls emulated capture density; Google does not prescribe a screenshot scale-factor value.
Should I use a fixed 390 × 844 viewport for every mobile SEO check?
No. Those dimensions are only an example. Choose dimensions that exercise the responsive layout or breakpoint you need to inspect.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
