A product page can look correct in a browser while its initial HTML, rendered metadata and HTTP response tell different stories.
This guide provides a repeatable way to investigate those differences using Chrome DevTools. The examples are illustrative, rather than results from a particular website.
1. Capture the original document response
Open a product page directly in a new tab, rather than navigating to it through the site's menu.
In Chrome DevTools:
- Open Network.
- Enable Disable cache while DevTools is open.
- Reload the page.
- Select the main document request, usually identified as document in the Type column.
- Inspect Headers for its status code and Response for the returned HTML.
Record the requested URL, any redirects and the final response status.
Check whether the response contains the product name, primary description, canonical URL and indexing directives. Search for application/ld+json to locate structured data.
A page displaying “Product not found” while returning 200 OK needs investigation. However, an out-of-stock product is not automatically a missing page: it may still provide useful product information.
2. Inspect the rendered metadata
The Network response shows what was returned for that request. The Elements panel shows the DOM after browser parsing and subsequent changes.
Run this read-only snippet in the DevTools Console on a page you control or are authorized to audit:
(() => {
const values = (selector, attribute) =>
[...document.querySelectorAll(selector)].map(element =>
attribute
? element.getAttribute(attribute)
: element.textContent.trim()
);
const snapshot = {
url: location.href,
title: values("title"),
description: values('meta[name="description"]', "content"),
robots: values('meta[name="robots"]', "content"),
canonical: values('link[rel="canonical"]', "href"),
h1: values("h1"),
hreflang: [...document.querySelectorAll("link[hreflang]")].map(
element => ({
language: element.getAttribute("hreflang"),
href: element.getAttribute("href")
})
),
jsonLdBlocks: document.querySelectorAll(
'script[type="application/ld+json"]'
).length
};
console.log(JSON.stringify(snapshot, null, 2));
})();
This captures a browser snapshot. It does not reproduce Googlebot, validate structured data or determine indexing eligibility. The canonical and hreflang values are the attributes as written, so relative URLs may need resolving.
Compare the output with the original response.
3. Investigate meaningful differences
Some differences are normal. Browsers repair malformed markup, and applications update their DOM during hydration.
Prioritize differences that change the page's identity, content or indexing signals:
| Finding | Investigation |
|---|---|
| Product title becomes a generic store title | Check route data and metadata updates during hydration. |
| Canonical points to a different product after rendering | Check URL generation and competing metadata components. |
| Multiple canonical elements appear | Check whether both the server template and client application add them. |
Initial HTML contains noindex
|
Resolve the initial directive; do not assume removing it later with JavaScript makes the page indexable. |
| Product details appear only after interaction | Check what loads without clicking, scrolling or signing in. |
Google documents support for JavaScript rendering, but also describes limitations and recommends consistent canonical signals. A local browser snapshot alone cannot establish what Google indexed.
4. Check product data and crawlable links
Inspect each JSON-LD block and validate the relevant product markup using Google's Rich Results Test.
Compare the markup against the visible product: name, currency, price and availability. Valid JSON syntax alone does not establish accuracy or rich-result eligibility.
Inspect links to related products, categories and pagination. Prefer actual <a href="..."> links that resolve to usable destinations. An interactive element with only a click handler is not equivalent to a crawlable link.
For multilingual pages, compare hreflang declarations in the response and DOM, then inspect the alternate pages for consistency.
5. Retest under controlled conditions
Repeat the checks after a direct reload and after navigating to the same product through the application. Differences between those routes can reveal stale metadata or incomplete client-side updates.
Keep the URL, browser state and test time with each finding. Cookies, location, authentication and experiments can change the response.
For a site you manage, use Search Console's URL Inspection tools to investigate Google's view separately.
Supporting tool
I built SearchScope, a free Chrome extension that brings source HTML versus rendered DOM comparison and other page-level technical checks into a side panel.
It can help collect evidence, while server responses, validator results and Search Console remain useful independent checks.