Feat SEO Package (Overview, Heading Structure, Links & JSON LD Preview)

[abedshaaban]

🎯 Changes

Introduced new tabs in the SEO section:

• SEO Overview
• Heading Structure
• Links Preview
• JSON-LD Preview

(Sorry for the low quality video but GitHub didn't let me upload the high quality one)

SEO-tab-pr.mp4

✅ Checklist

• I have followed the steps in the Contributing guide.
• I have tested this code locally with pnpm test:pr.

🚀 Release Impact

• This change affects published code, and I have generated a changeset.
• This change is docs/CI/dev-only (no release).

Summary by CodeRabbit

Release Notes

• New Features

  • Introduced @tanstack/devtools-seo plugin with live SERP and social media previews, JSON-LD schema inspection, heading structure analysis, and link validation.
  • Added SEO health scoring with overview dashboard summarizing headings, links, social metadata, SERP rendering, and structured data.
  • Created new React SEO example application.

• Updates

  • Reorganized SEO tab navigation with dedicated subsections for each analysis type.

[coderabbitai]

Actionable comments posted: 7

♻️ Duplicate comments (3)

packages/devtools-seo/src/json-ld-preview.tsx (2)

457-471: ⚠️ Potential issue | 🟠 Major

Use the shared section scorer here too.

This card uses 20/10/2 penalties, while packages/devtools-seo/src/seo-section-summary.ts uses 22/9/2 in sectionHealthScore(). The same JSON-LD issues can therefore show one percentage here and a different one in the overview ring.

♻️ Proposed fix

+import { sectionHealthScore } from './seo-section-summary'
 import type { SeoSectionSummary } from './seo-section-summary'
@@
 function getJsonLdScore(entries: Array<JsonLdEntry>): number {
-  let errors = 0
-  let warnings = 0
-  let infos = 0
-
-  for (const entry of entries) {
-    for (const issue of entry.issues) {
-      if (issue.severity === 'error') errors += 1
-      else if (issue.severity === 'warning') warnings += 1
-      else infos += 1
-    }
-  }
-
-  const penalty = Math.min(100, errors * 20 + warnings * 10 + infos * 2)
-  return Math.max(0, 100 - penalty)
+  return sectionHealthScore(entries.flatMap((entry) => entry.issues))
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/json-ld-preview.tsx` around lines 457 - 471,
getJsonLdScore duplicates scoring logic (20/10/2) that differs from the
canonical scorer used in sectionHealthScore() (22/9/2); replace the bespoke
logic in getJsonLdScore with a call to the shared section scorer used by
seo-section-summary.ts (or extract the shared scoring function and import it) so
both views compute the same percentage for the same JsonLdEntry issues; locate
getJsonLdScore and either call sectionHealthScore (or the newly exported shared
scorer) with the entry issues or refactor sectionHealthScore into a shared
helper and use that helper in getJsonLdScore.

---

205-217: ⚠️ Potential issue | 🟠 Major

Don't penalize keys outside this curated ruleset.

SUPPORTED_RULES is a subset, not an exhaustive schema allowlist. With this block, any extra top-level property becomes a warning and lowers the score, so valid markup looks unhealthy just because this tool doesn't know every schema field yet.

♻️ Proposed fix

-  const allowedSet = new Set([
-    ...rules.required,
-    ...rules.recommended,
-    ...rules.optional,
-    ...RESERVED_KEYS,
-  ])
-  const unknownKeys = Object.keys(entity).filter((key) => !allowedSet.has(key))
-  if (unknownKeys.length > 0) {
-    issues.push({
-      severity: 'warning',
-      message: `Possible invalid attributes for ${typeName}: ${unknownKeys.join(', ')}`,
-    })
-  }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/json-ld-preview.tsx` around lines 205 - 217, The
current code constructs allowedSet and pushes a warning for any unknownKeys
(derived from Object.keys(entity)), which penalizes valid but uncaptured schema
fields; update the logic in json-ld-preview.tsx to stop treating unknown
top-level properties as issues by removing or disabling the push to issues for
unknownKeys (i.e., delete or guard the block that adds the warning), or
alternatively narrow the check to only flag truly reserved/misplaced keys (use
RESERVED_KEYS directly rather than allowedSet); refer to allowedSet,
unknownKeys, entity and issues when locating the code to change.

packages/devtools-seo/src/links-preview.tsx (1)

28-39: ⚠️ Potential issue | 🟠 Major

Don't report an “accessible label” error from a text-only heuristic.

This still only checks textContent, aria-label, and title, so links named via aria-labelledby or descendant img[alt] will be reported as errors even though they have a valid accessible name. Either broaden the name lookup or narrow the message to the signals you actually inspect.

♻️ Safe immediate fix

   if (!text) {
     issues.push({
       severity: 'error',
-      message: 'Missing link text or accessible label.',
+      message: 'Missing link text, aria-label, or title.',
     })
   }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/links-preview.tsx` around lines 28 - 39, The
current heuristic computes text from the local variables named text (using
anchor.textContent, anchor.getAttribute('aria-label'), and
anchor.getAttribute('title')) but then pushes a generic error about an
"accessible label" which is misleading; update the issues.push message (and/or
the error severity text) to only refer to the signals actually checked (e.g.,
"Missing link text, aria-label, or title") or alternatively expand the name
lookup to include aria-labelledby and descendant img[alt] before deciding to
push an error; specifically, modify the code around the text variable and the
issues.push call in links-preview.tsx (referencing the text variable, anchor
element, and LinkIssue type) so the message accurately reflects the checked
attributes or add logic to resolve aria-labelledby and img[alt] into text first.

🧹 Nitpick comments (6)

packages/devtools-seo/src/tokens.ts (2)

208-208: Remove duplicate fallback in fontFamily.sans

fontFamily.sans repeats sans-serif twice; keeping it once is cleaner.

Suggested cleanup

-      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
+      sans: 'ui-sans-serif, Inter, system-ui, sans-serif',

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/tokens.ts` at line 208, fontFamily.sans currently
lists the fallback "sans-serif" twice; update the definition (the
fontFamily.sans entry) to remove the duplicated "sans-serif" so the value reads
something like "ui-sans-serif, Inter, system-ui, sans-serif" with only one
"sans-serif".

---

8-19: Deduplicate neutral and gray scales to avoid drift

These two palettes are identical copies right now. Consider sharing one source object so future edits can’t diverge unintentionally.

Also applies to: 32-43

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/tokens.ts` around lines 8 - 19, The neutral and
gray color scales in tokens.ts are duplicated and risk drifting; replace the
duplicate by creating a single shared object (e.g., a single palette constant or
export) and reference it from both places instead of repeating values so both
neutral and gray (or whichever export names are required) point to the same
source; update references to use the shared symbol (neutral/gray) and remove the
redundant literal blocks to ensure future edits stay in sync.

packages/devtools-seo/src/use-seo-styles.ts (1)

15-28: Duplicate CSS property in seoTabContainer.

overflow-y: auto; is declared twice (lines 21 and 27). The second declaration is redundant.

🧹 Remove duplicate property

     seoTabContainer: css`
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
       border-radius: 8px;
       box-shadow: none;
       overflow-y: auto;
       height: 100%;
       display: flex;
       flex-direction: column;
       gap: 0;
       width: 100%;
-      overflow-y: auto;
     `,

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/use-seo-styles.ts` around lines 15 - 28, The css
block for seoTabContainer contains a duplicate declaration of overflow-y: auto;
— remove the redundant occurrence so seoTabContainer only declares overflow-y:
auto once (keep the first or the most appropriate placement) within the css
template literal to avoid duplication; update the css for seoTabContainer
accordingly.

examples/react/seo/src/index.tsx (1)

7-12: Consider wrapping with StrictMode for consistency.

Other React examples in this repo (e.g., a11y-devtools, custom-devtools) wrap the render content with StrictMode. This helps catch potential issues during development.

♻️ Add StrictMode wrapper

+import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { seoDevtoolsPlugin } from '@tanstack/devtools-seo/react'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
 import App from './App'
 
 createRoot(document.getElementById('root')!).render(
-  <>
+  <StrictMode>
     <App />
     <TanStackDevtools plugins={[seoDevtoolsPlugin()]} />
-  </>,
+  </StrictMode>,
 )

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@examples/react/seo/src/index.tsx` around lines 7 - 12, The render call
currently mounts <> <App /> <TanStackDevtools plugins={[seoDevtoolsPlugin()]} />
</> without React StrictMode; wrap the rendered JSX with StrictMode to match
other examples. Update the code that calls createRoot(...).render(...) to render
<StrictMode><App /><TanStackDevtools plugins={[seoDevtoolsPlugin()]}
/></StrictMode>, and ensure StrictMode is imported (or use React.StrictMode)
alongside createRoot; keep the same components (App, TanStackDevtools,
seoDevtoolsPlugin) and plugin usage.

packages/devtools-seo/src/social-previews.tsx (1)

259-267: Avoid index-coupling between reports() and SOCIALS.

Using SOCIALS[i()] with non-null assertions is brittle; include network + accent directly in each report and render from report data only.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/social-previews.tsx` around lines 259 - 267, The
JSX currently couples reports() to the separate SOCIALS array by using
SOCIALS[i()] and non-null assertions; instead add the network and accent
properties into each report object (e.g., include report.network and
report.accent when building reports()) and update the For renderer to pass those
directly to <SocialPreview> (use meta={report.found} network={report.network}
accent={report.accent}), removing the index lookup and the non-null assertions
so rendering relies only on report data.

packages/devtools-seo/src/solid-panel.tsx (1)

6-8: Import and use TanStackDevtoolsTheme instead of a local theme union.

This keeps the type definition in sync with @tanstack/devtools-ui and ensures automatic alignment if supported themes expand in the future.

♻️ Proposed typing change

 import { ThemeContextProvider } from '@tanstack/devtools-ui'
+import type { TanStackDevtoolsTheme } from '@tanstack/devtools-ui'
 import { SeoTab } from './seo-tab'
 
 type SeoPluginPanelProps = {
-  theme: 'light' | 'dark'
+  theme: TanStackDevtoolsTheme
   devtoolsOpen: boolean
 }

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/solid-panel.tsx` around lines 6 - 8, Replace the
local union type for the theme prop with the exported TanStackDevtoolsTheme type
from `@tanstack/devtools-ui`: import TanStackDevtoolsTheme and update the
SeoPluginPanelProps type (and any references to the theme prop in the Solid
component) to use TanStackDevtoolsTheme instead of 'light' | 'dark' so the
prop's allowed values stay in sync with the devtools UI package.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/devtools-seo/src/heading-structure-preview.tsx`:
- Around line 175-177: The SectionDescription text is outdated: it says "This
section scans once when opened" but the component now rescans on location
changes (useLocationChanges()). Update the displayed description string in
heading-structure-preview.tsx (inside the SectionDescription component) to
reflect current behavior—e.g., mention that the panel rescans on location
changes or whenever the location updates—so the copy accurately matches the
scanning behavior implemented by useLocationChanges().

In `@packages/devtools-seo/src/json-ld-preview.tsx`:
- Around line 135-157: The validator currently rejects any non-string `@context`;
update validateContext to accept JSON‑LD permissible types: explicitly allow
null (context === null) and object (typeof context === 'object' && context !==
null) and handle arrays by verifying at least one element is a valid entry (a
schema.org string present in VALID_SCHEMA_CONTEXTS, an object, or null). Keep
the existing string branch for direct IRIs using VALID_SCHEMA_CONTEXTS, return
[] for accepted cases, and only return the error messages (invalid type or
invalid array contents) when none of these allowed forms are met; reference
validateContext, JsonLdValue, and VALID_SCHEMA_CONTEXTS to locate the changes.

In `@packages/devtools-seo/src/seo-tab.tsx`:
- Around line 20-63: The nav-based subview switcher should expose explicit tab
semantics: add role="tablist" to the <nav class={styles().seoSubNav}> and for
each button (the ones using class `${styles().seoSubNavLabel}` and
activeView()/setActiveView()) add role="tab" and set aria-selected={activeView()
=== '<view-name>'} (true for the active view, false otherwise); keep the
existing onClick handlers calling setActiveView(...) and ensure the active
styling logic remains tied to activeView() so assistive tech and keyboard users
can identify the selected tab.

In `@packages/devtools-seo/src/serp-preview.tsx`:
- Around line 525-530: SerpPreviewSection only updates on head mutations; also
subscribe to client-side navigation events so setSerp(getSerpFromHead()) runs on
route changes: in SerpPreviewSection add a listener for 'popstate' and a small
wrapper that patches history.pushState/history.replaceState to dispatch a custom
'locationchange' event, then listen for that event and call
setSerp(getSerpFromHead()); ensure you register these listeners alongside
useHeadChanges and remove/restore the listeners/patch on cleanup to avoid leaks.
- Around line 327-338: The title overflow is only computed for desktop
(titleOverflow) so mobile previews can be truncated without detection; add a
separate mobile title overflow check (e.g., titleOverflowMobile) and compute it
against the mobile constraints (use measureTextWidth or wrapTextByWidth with
MOBILE_TITLE_WIDTH_PX, TITLE_FONT and MOBILE_TITLE_MAX_LINES or
MOBILE_TITLE_WIDTH_PX) similar to how descriptionOverflowMobile is computed,
then include that property where the overflow object is constructed so mobile
title truncation is reported independently from desktop.

In `@packages/devtools-seo/src/social-previews.tsx`:
- Around line 34-39: Replace the unsupported twitter:url tag with og:url in the
tags definitions: update the tag object where key === 'twitter:url' to use key
'og:url' (keep prop 'url') and make the same replacement in the second
occurrence later in the file (the other tags array around lines 146-158); ensure
both tags arrays in social-previews.tsx are changed so Twitter/X cards use
og:url for the canonical URL.

In `@packages/devtools-seo/src/tokens.ts`:
- Around line 274-275: The shadow.xs function currently ignores its color
parameter and returns a hardcoded color; update the xs arrow function in
tokens.ts (the shadow.xs definition) to use the provided color parameter in the
returned template string (e.g., interpolate the color variable instead of the
fixed 'rgb(0 0 0 / 0.05)') while preserving the existing return type (as const)
and default value for the parameter.

---

Duplicate comments:
In `@packages/devtools-seo/src/json-ld-preview.tsx`:
- Around line 457-471: getJsonLdScore duplicates scoring logic (20/10/2) that
differs from the canonical scorer used in sectionHealthScore() (22/9/2); replace
the bespoke logic in getJsonLdScore with a call to the shared section scorer
used by seo-section-summary.ts (or extract the shared scoring function and
import it) so both views compute the same percentage for the same JsonLdEntry
issues; locate getJsonLdScore and either call sectionHealthScore (or the newly
exported shared scorer) with the entry issues or refactor sectionHealthScore
into a shared helper and use that helper in getJsonLdScore.
- Around line 205-217: The current code constructs allowedSet and pushes a
warning for any unknownKeys (derived from Object.keys(entity)), which penalizes
valid but uncaptured schema fields; update the logic in json-ld-preview.tsx to
stop treating unknown top-level properties as issues by removing or disabling
the push to issues for unknownKeys (i.e., delete or guard the block that adds
the warning), or alternatively narrow the check to only flag truly
reserved/misplaced keys (use RESERVED_KEYS directly rather than allowedSet);
refer to allowedSet, unknownKeys, entity and issues when locating the code to
change.

In `@packages/devtools-seo/src/links-preview.tsx`:
- Around line 28-39: The current heuristic computes text from the local
variables named text (using anchor.textContent,
anchor.getAttribute('aria-label'), and anchor.getAttribute('title')) but then
pushes a generic error about an "accessible label" which is misleading; update
the issues.push message (and/or the error severity text) to only refer to the
signals actually checked (e.g., "Missing link text, aria-label, or title") or
alternatively expand the name lookup to include aria-labelledby and descendant
img[alt] before deciding to push an error; specifically, modify the code around
the text variable and the issues.push call in links-preview.tsx (referencing the
text variable, anchor element, and LinkIssue type) so the message accurately
reflects the checked attributes or add logic to resolve aria-labelledby and
img[alt] into text first.

---

Nitpick comments:
In `@examples/react/seo/src/index.tsx`:
- Around line 7-12: The render call currently mounts <> <App />
<TanStackDevtools plugins={[seoDevtoolsPlugin()]} /> </> without React
StrictMode; wrap the rendered JSX with StrictMode to match other examples.
Update the code that calls createRoot(...).render(...) to render
<StrictMode><App /><TanStackDevtools plugins={[seoDevtoolsPlugin()]}
/></StrictMode>, and ensure StrictMode is imported (or use React.StrictMode)
alongside createRoot; keep the same components (App, TanStackDevtools,
seoDevtoolsPlugin) and plugin usage.

In `@packages/devtools-seo/src/social-previews.tsx`:
- Around line 259-267: The JSX currently couples reports() to the separate
SOCIALS array by using SOCIALS[i()] and non-null assertions; instead add the
network and accent properties into each report object (e.g., include
report.network and report.accent when building reports()) and update the For
renderer to pass those directly to <SocialPreview> (use meta={report.found}
network={report.network} accent={report.accent}), removing the index lookup and
the non-null assertions so rendering relies only on report data.

In `@packages/devtools-seo/src/solid-panel.tsx`:
- Around line 6-8: Replace the local union type for the theme prop with the
exported TanStackDevtoolsTheme type from `@tanstack/devtools-ui`: import
TanStackDevtoolsTheme and update the SeoPluginPanelProps type (and any
references to the theme prop in the Solid component) to use
TanStackDevtoolsTheme instead of 'light' | 'dark' so the prop's allowed values
stay in sync with the devtools UI package.

In `@packages/devtools-seo/src/tokens.ts`:
- Line 208: fontFamily.sans currently lists the fallback "sans-serif" twice;
update the definition (the fontFamily.sans entry) to remove the duplicated
"sans-serif" so the value reads something like "ui-sans-serif, Inter, system-ui,
sans-serif" with only one "sans-serif".
- Around line 8-19: The neutral and gray color scales in tokens.ts are
duplicated and risk drifting; replace the duplicate by creating a single shared
object (e.g., a single palette constant or export) and reference it from both
places instead of repeating values so both neutral and gray (or whichever export
names are required) point to the same source; update references to use the
shared symbol (neutral/gray) and remove the redundant literal blocks to ensure
future edits stay in sync.

In `@packages/devtools-seo/src/use-seo-styles.ts`:
- Around line 15-28: The css block for seoTabContainer contains a duplicate
declaration of overflow-y: auto; — remove the redundant occurrence so
seoTabContainer only declares overflow-y: auto once (keep the first or the most
appropriate placement) within the css template literal to avoid duplication;
update the css for seoTabContainer accordingly.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0f6bc8bd-4a95-4895-b832-efbe64854c54

📥 Commits

Reviewing files that changed from the base of the PR and between 9e1ab03 and 800eb0f.

⛔ Files ignored due to path filters (2)

• examples/react/seo/public/emblem-light.svg is excluded by !**/*.svg
• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (35)

• .changeset/puny-games-bow.md
• examples/react/basic/src/setup.tsx
• examples/react/seo/index.html
• examples/react/seo/package.json
• examples/react/seo/src/App.tsx
• examples/react/seo/src/index.tsx
• examples/react/seo/tsconfig.json
• examples/react/seo/vite.config.ts
• package.json
• packages/devtools-seo/package.json
• packages/devtools-seo/src/canonical-url-data.ts
• packages/devtools-seo/src/core.tsx
• packages/devtools-seo/src/devtools-dom-filter.ts
• packages/devtools-seo/src/heading-structure-preview.tsx
• packages/devtools-seo/src/hooks/use-head-changes.ts
• packages/devtools-seo/src/hooks/use-location-changes.ts
• packages/devtools-seo/src/index.ts
• packages/devtools-seo/src/json-ld-preview.tsx
• packages/devtools-seo/src/links-preview.tsx
• packages/devtools-seo/src/react/SeoDevtools.tsx
• packages/devtools-seo/src/react/index.ts
• packages/devtools-seo/src/react/plugin.ts
• packages/devtools-seo/src/seo-overview.tsx
• packages/devtools-seo/src/seo-section-summary.ts
• packages/devtools-seo/src/seo-severity.ts
• packages/devtools-seo/src/seo-tab.tsx
• packages/devtools-seo/src/serp-preview.tsx
• packages/devtools-seo/src/social-previews.tsx
• packages/devtools-seo/src/solid-panel.tsx
• packages/devtools-seo/src/tokens.ts
• packages/devtools-seo/src/use-seo-styles.ts
• packages/devtools-seo/tsconfig.json
• packages/devtools-seo/vite.config.ts
• packages/devtools/src/styles/use-styles.ts
• packages/devtools/src/tabs/index.tsx

💤 Files with no reviewable changes (1)

• packages/devtools/src/styles/use-styles.ts

✅ Files skipped from review due to trivial changes (8)

• examples/react/seo/vite.config.ts
• packages/devtools-seo/tsconfig.json
• examples/react/seo/index.html
• examples/react/seo/tsconfig.json
• examples/react/basic/src/setup.tsx
• examples/react/seo/package.json
• packages/devtools-seo/src/index.ts
• packages/devtools-seo/package.json

🚧 Files skipped from review as they are similar to previous changes (1)

• .changeset/puny-games-bow.md

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🌐 Web query:

According to current official X Developer Cards docs, is twitter:urla supported/required card tag, or should URL come fromog:url / shared URL context?

💡 Result:

twitter:url is not a supported (or required) X Card meta tag in the current official Cards Markup Tag Reference—it’s not listed among the available twitter:* properties. [1]

For the URL associated with the card, X’s docs instead show using Open Graph canonical URL markup (i.e., og:url) alongside the shared URL/card crawl context (the URL included in the post). The “Getting started” example uses og:url (not twitter:url). [2]

So: don’t add twitter:url; use the shared URL itself and (optionally) og:url for the canonical URL. [1][2]

---

Replace twitter:url with og:url for Twitter/X Card metadata.

twitter:url is not a supported tag in the official X Cards Markup Tag Reference. Use og:url instead for the canonical URL, as shown in X's documentation.

Proposed fix

   {
     network: 'X/Twitter',
     tags: [
       { key: 'twitter:title', prop: 'title' },
       { key: 'twitter:description', prop: 'description' },
       { key: 'twitter:image', prop: 'image' },
-      { key: 'twitter:url', prop: 'url' },
+      { key: 'og:url', prop: 'url' },
     ],
     accent: 'twitter',
   },

Also applies to: lines 146-158

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/social-previews.tsx` around lines 34 - 39, Replace
the unsupported twitter:url tag with og:url in the tags definitions: update the
tag object where key === 'twitter:url' to use key 'og:url' (keep prop 'url') and
make the same replacement in the second occurrence later in the file (the other
tags array around lines 146-158); ensure both tags arrays in social-previews.tsx
are changed so Twitter/X cards use og:url for the canonical URL.

[coderabbitai]

Actionable comments posted: 2

♻️ Duplicate comments (1)

packages/devtools-seo/src/serp-preview.tsx (1)

27-31: ⚠️ Potential issue | 🟠 Major

Track mobile title overflow separately.

titleOverflow is still computed only against the desktop width, but the mobile card truncates against MOBILE_TITLE_MAX_WIDTH_PX. Titles that fit under 620px and still overflow 328px will be cut in the mobile preview without any issue being surfaced there or in getSerpPreviewSummary().

♻️ Proposed fix

 type SerpOverflow = {
-  titleOverflow: boolean
+  titleOverflowDesktop: boolean
+  titleOverflowMobile: boolean
   descriptionOverflow: boolean
   descriptionOverflowMobile: boolean
 }
@@
   {
     message:
-      'The title is wider than 600px and it may not be displayed in full length.',
-    hasIssue: (_, overflow) => overflow.titleOverflow,
+      'The title exceeds the desktop preview width and may be trimmed.',
+    hasIssue: (_, overflow) => overflow.titleOverflowDesktop,
   },
 ]
@@
   {
     label: 'Mobile preview',
     isMobile: true,
     extraChecks: [
+      {
+        message: 'The title exceeds the mobile preview width and may be trimmed.',
+        hasIssue: (_, overflow) => overflow.titleOverflowMobile,
+      },
       {
         message:
           'Description exceeds the 3-line limit for mobile view. Please shorten your text to fit within 3 lines.',
         hasIssue: (_, overflow) => overflow.descriptionOverflowMobile,
       },
@@
     overflow: {
-      titleOverflow:
+      titleOverflowDesktop:
         measureTextWidth(titleText, TITLE_FONT) > DESKTOP_TITLE_MAX_WIDTH_PX,
+      titleOverflowMobile:
+        measureTextWidth(titleText, TITLE_FONT) > MOBILE_TITLE_MAX_WIDTH_PX,
       descriptionOverflow:
@@
-  if (overflow.titleOverflow) {
+  if (overflow.titleOverflowDesktop) {
     issues.push({
       severity: 'warning',
       message:
-        'The title is wider than 600px and it may not be displayed in full length.',
+        'The title exceeds the desktop preview width and may be trimmed.',
+    })
+  }
+  if (overflow.titleOverflowMobile) {
+    issues.push({
+      severity: 'warning',
+      message: 'The title exceeds the mobile preview width and may be trimmed.',
     })
   }

Also applies to: 65-69, 87-92, 311-315, 328-330, 407-413

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/serp-preview.tsx` around lines 27 - 31, The
SerpOverflow type and downstream logic only track a single titleOverflow
computed against the desktop width; add a separate titleOverflowMobile boolean
to SerpOverflow, compute it using MOBILE_TITLE_MAX_WIDTH_PX (in the same place
where titleOverflow is computed), and update getSerpPreviewSummary() and any
places that read SerpOverflow (e.g., preview rendering and summary generation)
to consider titleOverflowMobile for mobile card checks so mobile truncation is
surfaced correctly. Ensure all spots currently referencing titleOverflow for
mobile use are updated to check the new titleOverflowMobile instead of the
desktop value.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/devtools-seo/src/heading-structure-preview.tsx`:
- Line 42: The object property assignment that sets text currently calls
node.textContent.trim(), which can throw if node.textContent is null; update the
assignment in heading-structure-preview (the code that creates the text property
from node.textContent) to guard against null by supplying an empty-string
fallback or using optional chaining before calling trim so trim is only invoked
on a string, ensuring text is always a safe string (e.g., fall back to '').

In `@packages/devtools-seo/src/serp-preview.tsx`:
- Line 10: The user-facing warning messages hardcode "600px" while the actual
check uses DESKTOP_TITLE_MAX_WIDTH_PX = 620, causing incorrect warnings; update
every hardcoded "600px" message (including the messages near the checks that
reference DESKTOP_TITLE_MAX_WIDTH_PX and similar title-length UI text) to
reference the DESKTOP_TITLE_MAX_WIDTH_PX constant (or interpolate its value at
render time) so the displayed threshold always matches the actual constant used
by the logic (ensure you update all occurrences that mention the desktop title
width).

---

Duplicate comments:
In `@packages/devtools-seo/src/serp-preview.tsx`:
- Around line 27-31: The SerpOverflow type and downstream logic only track a
single titleOverflow computed against the desktop width; add a separate
titleOverflowMobile boolean to SerpOverflow, compute it using
MOBILE_TITLE_MAX_WIDTH_PX (in the same place where titleOverflow is computed),
and update getSerpPreviewSummary() and any places that read SerpOverflow (e.g.,
preview rendering and summary generation) to consider titleOverflowMobile for
mobile card checks so mobile truncation is surfaced correctly. Ensure all spots
currently referencing titleOverflow for mobile use are updated to check the new
titleOverflowMobile instead of the desktop value.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: ec78ed10-0f7d-47c3-8dc4-5cede7a6ed04

📥 Commits

Reviewing files that changed from the base of the PR and between e6ba93f and 2086fc1.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (7)

• packages/devtools-seo/src/heading-structure-preview.tsx
• packages/devtools-seo/src/hooks/use-location-changes.ts
• packages/devtools-seo/src/json-ld-preview.tsx
• packages/devtools-seo/src/seo-tab.tsx
• packages/devtools-seo/src/serp-preview.tsx
• packages/event-bus-client/package.json
• packages/event-bus-client/tests/index.test.ts

💤 Files with no reviewable changes (1)

• packages/event-bus-client/package.json

🚧 Files skipped from review as they are similar to previous changes (3)

• packages/devtools-seo/src/seo-tab.tsx
• packages/devtools-seo/src/hooks/use-location-changes.ts
• packages/devtools-seo/src/json-ld-preview.tsx

[coderabbitai]

Actionable comments posted: 3

🧹 Nitpick comments (3)

packages/devtools-seo/src/utils/use-seo-styles.ts (1)

15-28: Duplicate overflow-y: auto property.

Lines 21 and 27 both declare overflow-y: auto;. The second declaration is redundant.

♻️ Proposed fix

     seoTabContainer: css`
       padding: 0;
       margin: 0 auto;
       background: ${t(colors.white, colors.darkGray[700])};
       border-radius: 8px;
       box-shadow: none;
-      overflow-y: auto;
       height: 100%;
       display: flex;
       flex-direction: column;
       gap: 0;
       width: 100%;
       overflow-y: auto;
     `,

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/utils/use-seo-styles.ts` around lines 15 - 28, The
css block for seoTabContainer contains a duplicate property overflow-y: auto; —
remove the redundant occurrence so overflow-y: auto is declared only once in the
seoTabContainer CSS template (locate the css literal named seoTabContainer in
use-seo-styles.ts and delete the second/duplicate overflow-y line).

packages/devtools-seo/src/tabs/seo-tab.tsx (1)

20-75: Consider completing the ARIA tablist pattern for better accessibility.

The tabs use role="tab" and aria-selected correctly, but for full ARIA compliance, each tab should have an id and aria-controls pointing to the corresponding panel, and each panel should have role="tabpanel" and aria-labelledby. This is optional for internal devtools but would improve screen reader navigation.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/tabs/seo-tab.tsx` around lines 20 - 75, The tab
buttons in seo-tab.tsx currently have role="tab" and aria-selected but lack id
and aria-controls, so add a unique id to each button (e.g.,
id={`tab-${viewKey}`}) and set aria-controls to the matching panel id (e.g.,
aria-controls={`panel-${viewKey}`}) where viewKey corresponds to 'overview',
'heading-structure', 'links-preview', 'social-previews', 'serp-preview',
'json-ld-preview'; then ensure each corresponding panel component/element uses
role="tabpanel", id={`panel-${viewKey}`}, and
aria-labelledby={`tab-${viewKey}`}. Keep using activeView() and
setActiveView(...) for state logic.

packages/devtools-seo/src/utils/tokens.ts (1)

208-208: Duplicate "sans-serif" in font family stack.

The sans font family ends with sans-serif, sans-serif which is redundant.

📝 Suggested fix

-      sans: 'ui-sans-serif, Inter, system-ui, sans-serif, sans-serif',
+      sans: 'ui-sans-serif, Inter, system-ui, sans-serif',

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@packages/devtools-seo/src/utils/tokens.ts` at line 208, The font family
definition for the "sans" key in tokens.ts contains a duplicated fallback
("sans-serif, sans-serif"); update the sans value (the sans property) to remove
the redundant "sans-serif" so the stack ends with a single "sans-serif" fallback
(e.g., "ui-sans-serif, Inter, system-ui, sans-serif").

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/devtools-seo/src/tabs/json-ld-preview.tsx`:
- Line 343: The line computing raw may throw if script.textContent is null;
update the assignment that defines raw (the variable computed from
script.textContent in json-ld-preview.tsx) to safely handle null by using
optional chaining or a fallback before trimming (e.g., use
script.textContent?.trim() ?? '' or (script.textContent || '').trim()) so raw is
always a string and avoids a null dereference.
- Around line 602-603: The JsonLdPreviewSection currently calls
analyzeJsonLdScripts() directly which runs on every render and won't update
reactively when the DOM changes; change it to store the result in a signal
(e.g., const entries = useSignal(analyzeJsonLdScripts())) and subscribe to DOM
changes using the existing hooks used by SerpPreviewSection (useHeadChanges
and/or useLocationChanges) to recompute and set entries when changes occur; then
update component usages to call entries() and score() where needed so the UI
reacts to updates.

In `@packages/devtools-seo/src/tabs/serp-preview.tsx`:
- Line 343: The code currently calls script.textContent.trim(), which can throw
if textContent is null; update the logic around where script.textContent is used
(the variable named script in this file/tab) to guard against null by using a
null-coalescing or conditional check (e.g., const txt = (script.textContent ??
'').trim() or if (script.textContent) { const txt = script.textContent.trim();
... }) before calling trim(), ensuring downstream code uses the guarded txt
value.

---

Nitpick comments:
In `@packages/devtools-seo/src/tabs/seo-tab.tsx`:
- Around line 20-75: The tab buttons in seo-tab.tsx currently have role="tab"
and aria-selected but lack id and aria-controls, so add a unique id to each
button (e.g., id={`tab-${viewKey}`}) and set aria-controls to the matching panel
id (e.g., aria-controls={`panel-${viewKey}`}) where viewKey corresponds to
'overview', 'heading-structure', 'links-preview', 'social-previews',
'serp-preview', 'json-ld-preview'; then ensure each corresponding panel
component/element uses role="tabpanel", id={`panel-${viewKey}`}, and
aria-labelledby={`tab-${viewKey}`}. Keep using activeView() and
setActiveView(...) for state logic.

In `@packages/devtools-seo/src/utils/tokens.ts`:
- Line 208: The font family definition for the "sans" key in tokens.ts contains
a duplicated fallback ("sans-serif, sans-serif"); update the sans value (the
sans property) to remove the redundant "sans-serif" so the stack ends with a
single "sans-serif" fallback (e.g., "ui-sans-serif, Inter, system-ui,
sans-serif").

In `@packages/devtools-seo/src/utils/use-seo-styles.ts`:
- Around line 15-28: The css block for seoTabContainer contains a duplicate
property overflow-y: auto; — remove the redundant occurrence so overflow-y: auto
is declared only once in the seoTabContainer CSS template (locate the css
literal named seoTabContainer in use-seo-styles.ts and delete the
second/duplicate overflow-y line).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4999665e-9196-4950-8f50-6b219d900d09

📥 Commits

Reviewing files that changed from the base of the PR and between 2086fc1 and 4bc654e.

📒 Files selected for processing (15)

• packages/devtools-seo/src/index.ts
• packages/devtools-seo/src/solid-panel.tsx
• packages/devtools-seo/src/tabs/heading-structure-preview.tsx
• packages/devtools-seo/src/tabs/json-ld-preview.tsx
• packages/devtools-seo/src/tabs/links-preview.tsx
• packages/devtools-seo/src/tabs/seo-overview.tsx
• packages/devtools-seo/src/tabs/seo-tab.tsx
• packages/devtools-seo/src/tabs/serp-preview.tsx
• packages/devtools-seo/src/tabs/social-previews.tsx
• packages/devtools-seo/src/utils/canonical-url-data.ts
• packages/devtools-seo/src/utils/devtools-dom-filter.ts
• packages/devtools-seo/src/utils/seo-section-summary.ts
• packages/devtools-seo/src/utils/seo-severity.ts
• packages/devtools-seo/src/utils/tokens.ts
• packages/devtools-seo/src/utils/use-seo-styles.ts

✅ Files skipped from review due to trivial changes (2)

• packages/devtools-seo/src/index.ts
• packages/devtools-seo/src/solid-panel.tsx