On-page technical elements, such as canonical tags, meta robots directives, hreflang annotations and JSON-LD schema, live in the page's where visitors never look. A single mistake can de-index a page, split ranking signals across duplicates or stop rich results from appearing. Chrome DevTools can inspect all of it, and the Console and Snippets features can speed the work up considerably.
Inspect the head in the Elements panel
Open DevTools and select Elements. Expand and review:
title> and
link rel="canonical">
meta name="robots"> and
link rel="alternate" hreflang>
script type="application/ld+json">
Open Graph and Twitter Card tags_
Remember to look at the rendered DOM. If a plugin or script rewrites tags after load, the Elements panel shows the final result while page source may show something different.
Canonical tag audit
Every indexable page should have exactly one canonical tag, in the head, pointing to an absolute URL that returns a 200 status. Check for:
Multiple canonicals (often added by both a theme and an SEO plugin)
Relative URLs instead of absolute
Canonicals pointing to redirected, 404 or noindexed URLs
Paginated pages all canonicalized to page one, which can hide deeper content
Parameter URLs that fail to canonicalize to the clean version
A quick Console check:
document.querySelectorAll('link[rel="canonical"]')
This returns every canonical node. A result of more than one is a red flag.
Meta robots audit
Find the robots meta tag and read its directives. A stray noindex left over from staging is one of the most expensive SEO mistakes. Console check:
document.querySelector('meta[name="robots"]')?.content
Also confirm the same page isn't being blocked by an X-Robots-Tag header, covered in the Network panel.
Hreflang validation
Hreflang tells Google which language or regional version to show. Rules to verify:
Each version references itself as well as the alternates
Annotations are reciprocal: if page A points to B, B must point back to A
Language and region codes are valid (for example en-gb, not en-uk)
Include an x-default for unmatched users
URLs are absolute and return 200
List all annotations with:
[...document.querySelectorAll('link[rel="alternate"][hreflang]')].map(l => [l.hreflang, l.href])
Compare the output with the alternate pages. Hreflang can also be placed in HTTP headers or XML sitemaps, so check those if none appear in the head.
Structured data audit
Find JSON-LD blocks in the Elements panel or extract them with:
[...document.querySelectorAll('script[type="application/ld+json"]')].map(s => JSON.parse(s.textContent))
The Console prints each block as an expandable object. Review that:
The JSON parses without errors (a missing comma breaks the whole block)
The @type matches the page, such as Article, Product, FAQPage or LocalBusiness
Required and recommended properties are present
Marked-up content is actually visible on the page
Values such as price, rating and dates match the visible content
Then validate with Google's Rich Results Test and the Schema Markup Validator. DevTools finds and extracts the markup; those tools tell you eligibility. Note that Google has narrowed the display of some rich results over time, such as FAQ and HowTo, so check current documentation before promising SERP features to clients.
Save reusable Snippets
Open Sources, then Snippets, and create a new snippet. Paste a script that collects title, description, canonical, robots, hreflang and schema into a single table:
console.table({
title: document.title,
description: document.querySelector('meta[name="description"]')?.content,
canonical: document.querySelector('link[rel="canonical"]')?.href,
robots: document.querySelector('meta[name="robots"]')?.content,
h1Count: document.querySelectorAll('h1').length
});
Run it with Ctrl+Enter on any page. Snippets persist in your browser, so you can audit page after page in seconds.
Extra checks worth adding
Heading structure: one clear H1 and a logical hierarchy
Images: alt attributes present and descriptive
Internal links: descriptive anchors and no nofollow where you don't intend it
Pagination and parameters: consistent canonical handling
Scaling beyond one page
DevTools is ideal for spot checks and debugging. For site-wide audits, pair it with a crawler such as Screaming Frog or Sitebulb, then use DevTools to investigate the specific URLs the crawler flags.
Conclusion
Canonicals, robots directives, hreflang and schema decide how search engines interpret and display your pages. A few lines in the Console let you check them quickly, and a saved Snippet turns it into a routine. Add this to your pre-launch checklist so small tag errors never reach production.
FAQ
Can a page have more than one canonical tag?
It shouldn't. Conflicting canonicals may be ignored, so keep exactly one.
Do I need hreflang for a single-language site?
No, only for sites with multiple language or regional versions.
Is JSON-LD better than Microdata?
Google recommends JSON-LD because it's easier to maintain and separate from the visible HTML.
Why does my schema pass validation but show no rich result?
Eligibility isn't a guarantee. Google also weighs content quality, page type and its current rich result policies.
Are DevTools Snippets safe to run?
Yes, they run only in your browser on the page you choose. Still, never paste scripts from sources you don't trust.
Top comments (0)