Source vs Render SEO bởi Julian Cordes

Compares raw HTML vs. rendered DOM for SEO fields and shows indexability/rendering changes in the icon.

Source vs Render SEO compares the raw HTML source of a page with the rendered DOM and shows whether JavaScript changed important SEO fields such as canonical, meta robots, title, meta description, H1s, or hreflangs.

What It Does

Many SEO issues only become visible after JavaScript has run. This extension checks both versions of a page:

• Source HTML: the raw HTML returned by the server before JavaScript execution
• Rendered DOM: the final document after JavaScript has modified the page

The extension then highlights differences directly in the popup and updates the toolbar icon to show the current indexability and rendering state. The toolbar icon show green, red, yellow or a combination, depending on the changes.

Toolbar colors
🟩 indexable
🟥 not indexable
🟩🟨 indexable, but JavaScript changes content
🟥🟨 not indexable, but JavaScript changes content
🟩🟥 indexable, but JavaScript changes to not indexable
🟥🟩 not indexable, but JavaScript changes to indexable

Key Features
- Compare raw HTML vs rendered DOM
- Detect JavaScript changes to SEO-critical fields
- Check indexability via meta robots and canonical
- Show a state-aware toolbar icon for each page
- Switch between Compare, HTML-only, and Rendered-only modes
- Display inline source-vs-rendered differences next to each field
- Works on regular websites and local test files when file URL access is enabled
- Plain JavaScript, no build step, no bundler