feat(devtools): add SERP overflow reporting and improve styles

This commit enhances the SERP preview section by introducing a new overflow reporting mechanism for the title and description. It adds a list of issues when the title or description exceeds specified limits, improving user feedback. Additionally, new styles are implemented for better visual presentation of error messages in the SERP preview.

Author: abedshaaban

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

@@ -296,9 +296,15 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       font-size: 0.875rem;
       color: ${t(colors.gray[700], colors.gray[300])};
     `,
+    serpErrorList: css`
+      margin: 4px 0 0 0;
+      padding-left: 1.25rem;
+      list-style-type: disc;
+    `,
     serpReportItem: css`
-      margin-top: 0.5rem;
-      color: ${t(colors.yellow[700], colors.yellow[400])};
+      margin-top: 0.25rem;
+      color: ${t(colors.red[700], colors.red[400])};
+      font-size: 0.875rem;
     `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],

packages/devtools/src/tabs/seo-tab/serp-preview.tsx

@@ -1,4 +1,4 @@
-import { createEffect, createSignal } from 'solid-js'
+import { createEffect, createMemo, createSignal, For } from 'solid-js'
 import { useStyles } from '../../styles/use-styles'
 import { useHeadChanges } from '../../hooks/use-head-changes'
 import { Section, SectionDescription } from '@tanstack/devtools-ui'
@@ -37,8 +37,7 @@ function getSerpFromHead(): SerpData {
   const descriptionMeta = metaTags.find(
     (m) => m.getAttribute('name')?.toLowerCase() === 'description',
   )
-  const description =
-    descriptionMeta?.getAttribute('content')?.trim() || ''
+  const description = descriptionMeta?.getAttribute('content')?.trim() || ''
 
   const siteNameMeta = metaTags.find(
     (m) => m.getAttribute('property') === 'og:site_name',
@@ -50,9 +49,8 @@ function getSerpFromHead(): SerpData {
       : '')
 
   const linkTags = Array.from(document.head.querySelectorAll('link'))
-  const iconLink = linkTags.find(
-    (l) =>
-      l.getAttribute('rel')?.toLowerCase().split(/\s+/).includes('icon'),
+  const iconLink = linkTags.find((l) =>
+    l.getAttribute('rel')?.toLowerCase().split(/\s+/).includes('icon'),
   )
   let favicon: string | null = iconLink?.getAttribute('href') || null
   if (favicon && typeof window !== 'undefined') {
@@ -66,6 +64,32 @@ function getSerpFromHead(): SerpData {
   return { title, description, siteName, favicon, url }
 }
 
+type SerpOverflow = {
+  titleOverflow: boolean
+  descriptionOverflow: boolean
+}
+
+function getSerpReports(data: SerpData, overflow: SerpOverflow): string[] {
+  const issues: string[] = []
+  if (!data.title?.trim()) {
+    issues.push('No title tag set on the page.')
+  }
+  if (!data.description?.trim()) {
+    issues.push('No meta description set on the page.')
+  }
+  if (overflow.titleOverflow) {
+    issues.push(
+      'The title is wider than 600px and it may not be displayed in full length.',
+    )
+  }
+  if (overflow.descriptionOverflow) {
+    issues.push(
+      'The meta description may get trimmed at ~960 pixels on desktop and at ~680px on mobile. Keep it below ~158 characters.',
+    )
+  }
+  return issues
+}
+
 export function SerpPreviewSection() {
   const [serp, setSerp] = createSignal<SerpData>(getSerpFromHead())
   const [titleOverflow, setTitleOverflow] = createSignal(false)
@@ -110,6 +134,13 @@ export function SerpPreviewSection() {
     setDescriptionOverflow(truncatedDesc !== descText)
   })
 
+  const reports = createMemo(() =>
+    getSerpReports(serp(), {
+      titleOverflow: titleOverflow(),
+      descriptionOverflow: descriptionOverflow(),
+    }),
+  )
+
   const data = serp()
 
   return (
@@ -151,22 +182,16 @@ export function SerpPreviewSection() {
           aria-hidden="true"
         />
       </div>
-      {(titleOverflow() || descriptionOverflow()) && (
-        <div class={styles().serpReportSection}>
-          {titleOverflow() && (
-            <div class={styles().serpReportItem}>
-              The title is wider than 600px and it may not be displayed in full
-              length.
-            </div>
-          )}
-          {descriptionOverflow() && (
-            <div class={styles().serpReportItem}>
-              The meta description may get trimmed at ~960 pixels on desktop
-              and at ~680px on mobile. Keep it below ~158 characters.
-            </div>
-          )}
+      {reports().length > 0 ? (
+        <div class={styles().seoMissingTagsSection}>
+          <strong>SERP preview issues:</strong>
+          <ul class={styles().serpErrorList}>
+            <For each={reports()}>
+              {(issue) => <li class={styles().serpReportItem}>{issue}</li>}
+            </For>
+          </ul>
         </div>
-      )}
+      ) : null}
     </Section>
   )
 }