Feat seo serp preview (#373)

abedshaaban · AlemTuzlak · web-flow · commit e04bb11becc8 · 2026-03-30T14:46:35.000+02:00
* refactor(devtools): remove SeoTab component and related functionality

This commit deletes the SeoTab component from the devtools package, which included social media preview functionality and meta tag analysis. The removal streamlines the codebase by eliminating unused features.

* refactor(devtools): rename SocialPreviewSection to SocialPreviewsSection

This commit updates the naming of the SocialPreviewSection component to SocialPreviewsSection for consistency and clarity in the SEO tab of the devtools package. The change improves code readability and aligns with the pluralization of the component's purpose.

* refactor(devtools): rename social-preview file to social-previews and update import path

This commit renames the social-preview.tsx file to social-previews.tsx for consistency with the component naming convention. The import path in the SeoTab component is also updated accordingly, enhancing code clarity and maintainability.

* feat(devtools): add SEO tab navigation and enhance SocialPreviewsSection

This commit introduces a navigation bar in the SeoTab component, allowing users to switch between 'Social Previews' and 'SERP Preview' sections. It also updates the SocialPreviewsSection to conditionally render its title based on a new prop, improving flexibility in display options. New styles for the navigation elements are added to enhance the user interface.

* feat(devtools): enhance SERP and Social Previews with new styles and data handling

This commit introduces new styles for the SERP snippet and updates the SERP and Social Previews sections to dynamically display data from the current page's metadata. The SocialPreviewsSection and SerpPreviewSection components are refactored to improve clarity and functionality, removing unnecessary props and enhancing the user interface with better styling.

* refactor(devtools): update SERP snippet styles and structure

This commit refactors the SERP snippet styles by renaming the `serpSnippetUrlRow` to `serpSnippetTopRow` and introduces new styles for site name and URL. The structure of the SERP preview is enhanced to better organize the display of site information, improving the overall layout and visual consistency.

* feat(devtools): enhance SERP preview with truncation logic and overflow reporting

This commit adds functionality to the SERP preview section, implementing text truncation for the title and description based on specified width limits. It introduces new state management for overflow detection and displays warnings when the title or description exceeds the defined character limits. Additionally, new styles are added to support the hidden measurement elements for accurate text sizing.

* 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.

* feat(devtools): add meta description and default favicon styles

This commit enhances the SEO capabilities of the basic example by adding a meta description tag for improved search engine visibility. Additionally, it introduces new styles for a default favicon, ensuring a consistent visual representation when no favicon is provided. This improves user feedback in the SERP preview section.

* feat(devtools): enhance SERP preview layout with new styles

This commit introduces new styles for the SERP preview section, including a dedicated block for the preview and a label for better organization. The layout improvements enhance the visual presentation of the desktop preview, ensuring a clearer display of the site name, URL, title, and description.

* feat(devtools): enhance SERP preview for mobile with new styles and overflow reporting

This commit introduces new styles for the mobile SERP preview, including a dedicated snippet layout and improved overflow reporting for the title and description. It adds functionality to handle mobile-specific text truncation and displays warnings for descriptions exceeding a three-line limit, enhancing user feedback and visual consistency across devices.

* feat(devtools): implement comprehensive SERP issue reporting and enhance component structure

This commit introduces a robust mechanism for reporting SERP issues, including checks for favicon, title, and description validity. It refactors the SERP preview component to utilize a more structured approach for handling overflow conditions and displaying relevant warnings. Additionally, it enhances the layout for both desktop and mobile previews, ensuring a consistent and informative user experience across devices.

* refactor(devtools): update SERP preview truncation logic and improve character limits

This commit refines the SERP preview component by replacing pixel-based truncation with character-based limits for titles and descriptions. It introduces constants for maximum character counts, enhancing the clarity of the truncation logic. Additionally, it simplifies the component structure by removing unnecessary measurement elements, improving overall readability and maintainability.

* refactor(devtools): streamline SERP preview component and improve character limit handling

This commit refines the SERP preview component by enhancing the character limit handling for titles and descriptions. It simplifies the component structure, removing redundant elements, and improves the overall readability and maintainability of the code. Additionally, it ensures consistent behavior across different display scenarios.

* refactor(devtools): reorder imports in social-previews component for consistency

---------

Co-authored-by: Alem Tuzlak &lt;t.zlak97@gmail.com&gt;
diff --git a/.changeset/vast-apes-attend.md b/.changeset/vast-apes-attend.md
@@ -0,0 +1,5 @@
+---
+'@tanstack/devtools': patch
+---
+
+Implemented a new SERP (Search Engine Results Page) section in the SEO tab. This update introduces desktop and mobile preview of search results. It displays the current site's favicon, title and description while displaying errors and issues when they are not found or they exceed the character limit.
diff --git a/examples/react/basic/index.html b/examples/react/basic/index.html
@@ -28,6 +28,11 @@
     <meta name="twitter:url" content="https://example.com/basic" />
     <script src="https://unpkg.com/react-scan/dist/auto.global.js"></script>
     <title>Basic Example - TanStack Devtools</title>
+    <meta
+      name="description"
+      content="A basic example of using TanStack Devtools with React."
+    />
+
     <description
       >A basic example of using TanStack Devtools with React.</description
     >
diff --git a/packages/devtools/src/styles/use-styles.ts b/packages/devtools/src/styles/use-styles.ts
@@ -119,6 +119,32 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       margin-bottom: 2rem;
       border-radius: 0.75rem;
     `,
+    seoSubNav: css`
+      display: flex;
+      flex-direction: row;
+      gap: 0;
+      margin-bottom: 1rem;
+      border-bottom: 1px solid ${t(colors.gray[200], colors.gray[800])};
+    `,
+    seoSubNavLabel: css`
+      padding: 0.5rem 1rem;
+      font-size: 0.875rem;
+      font-weight: 500;
+      color: ${t(colors.gray[600], colors.gray[400])};
+      background: none;
+      border: none;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      cursor: pointer;
+      font-family: inherit;
+      &:hover {
+        color: ${t(colors.gray[800], colors.gray[200])};
+      }
+    `,
+    seoSubNavLabelActive: css`
+      color: ${t(colors.gray[900], colors.gray[100])};
+      border-bottom-color: ${t(colors.gray[900], colors.gray[100])};
+    `,
     seoPreviewSection: css`
       display: flex;
       flex-direction: row;
@@ -205,6 +231,139 @@ const stylesFactory = (theme: DevtoolsStore['settings']['theme']) => {
       padding: 0 10px 8px 10px;
       font-size: 0.875rem;
     `,
+    serpPreviewBlock: css`
+      margin-bottom: 1.5rem;
+      border: 1px solid ${t(colors.gray[200], colors.gray[700])};
+      border-radius: 10px;
+      padding: 1rem;
+    `,
+    serpPreviewLabel: css`
+      font-size: 0.875rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+    `,
+    serpSnippet: css`
+      border: 1px solid ${t(colors.gray[100], colors.gray[800])};
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      background: ${t(colors.white, colors.darkGray[900])};
+      max-width: 600px;
+      font-family: ${fontFamily.sans};
+      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+    `,
+    serpSnippetMobile: css`
+      border: 1px solid ${t(colors.gray[100], colors.gray[800])};
+      border-radius: 8px;
+      padding: 1rem 1.25rem;
+      background: ${t(colors.white, colors.darkGray[900])};
+      max-width: 380px;
+      font-family: ${fontFamily.sans};
+      box-shadow: 0 1px 2px ${t('rgba(0,0,0,0.04)', 'rgba(0,0,0,0.08)')};
+    `,
+    serpSnippetDescMobile: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      margin: 0;
+      line-height: 1.5;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 3;
+      overflow: hidden;
+    `,
+    serpSnippetTopRow: css`
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 8px;
+    `,
+    serpSnippetFavicon: css`
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      object-fit: contain;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    serpSnippetDefaultFavicon: css`
+      width: 28px;
+      height: 28px;
+      background-color: ${t(colors.gray[200], colors.gray[800])};
+      border-radius: 50%;
+      flex-shrink: 0;
+      object-fit: contain;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    `,
+    serpSnippetSiteColumn: css`
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+      min-width: 0;
+    `,
+    serpSnippetSiteName: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[900], colors.gray[100])};
+      line-height: 1.4;
+      margin: 0;
+    `,
+    serpSnippetSiteUrl: css`
+      font-size: 0.75rem;
+      color: ${t(colors.gray[500], colors.gray[500])};
+      line-height: 1.4;
+      margin: 0;
+    `,
+    serpSnippetTitle: css`
+      font-size: 1.25rem;
+      font-weight: 400;
+      color: ${t('#1a0dab', '#8ab4f8')};
+      margin: 0 0 4px 0;
+      line-height: 1.3;
+    `,
+    serpSnippetDesc: css`
+      font-size: 0.875rem;
+      color: ${t(colors.gray[700], colors.gray[300])};
+      margin: 0;
+      line-height: 1.5;
+    `,
+    serpMeasureHidden: css`
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      visibility: hidden;
+      pointer-events: none;
+      box-sizing: border-box;
+    `,
+    serpMeasureHiddenMobile: css`
+      position: absolute;
+      left: -9999px;
+      top: 0;
+      width: 340px;
+      visibility: hidden;
+      pointer-events: none;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    `,
+    serpReportSection: css`
+      margin-top: 1rem;
+      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.25rem;
+      color: ${t(colors.red[700], colors.red[400])};
+      font-size: 0.875rem;
+    `,
     devtoolsPanelContainer: (
       panelLocation: TanStackDevtoolsConfig['panelLocation'],
       isDetached: boolean,
diff --git a/packages/devtools/src/tabs/seo-tab/index.tsx b/packages/devtools/src/tabs/seo-tab/index.tsx
@@ -0,0 +1,41 @@
+import { Show, createSignal } from 'solid-js'
+import { MainPanel } from '@tanstack/devtools-ui'
+import { useStyles } from '../../styles/use-styles'
+import { SocialPreviewsSection } from './social-previews'
+import { SerpPreviewSection } from './serp-preview'
+
+type SeoSubView = 'social-previews' | 'serp-preview'
+
+export const SeoTab = () => {
+  const [activeView, setActiveView] =
+    createSignal<SeoSubView>('social-previews')
+  const styles = useStyles()
+
+  return (
+    <MainPanel withPadding>
+      <nav class={styles().seoSubNav} aria-label="SEO sections">
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'social-previews' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('social-previews')}
+        >
+          Social previews
+        </button>
+        <button
+          type="button"
+          class={`${styles().seoSubNavLabel} ${activeView() === 'serp-preview' ? styles().seoSubNavLabelActive : ''}`}
+          onClick={() => setActiveView('serp-preview')}
+        >
+          SERP Preview
+        </button>
+      </nav>
+
+      <Show when={activeView() === 'social-previews'}>
+        <SocialPreviewsSection />
+      </Show>
+      <Show when={activeView() === 'serp-preview'}>
+        <SerpPreviewSection />
+      </Show>
+    </MainPanel>
+  )
+}
diff --git a/packages/devtools/src/tabs/seo-tab/serp-preview.tsx b/packages/devtools/src/tabs/seo-tab/serp-preview.tsx
diff --git a/packages/devtools/src/tabs/seo-tab/social-previews.tsx b/packages/devtools/src/tabs/seo-tab/social-previews.tsx

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@tanstack/devtools': patch
 +---
++
 +Implemented a new SERP (Search Engine Results Page) section in the SEO tab. This update introduces desktop and mobile preview of search results. It displays the current site's favicon, title and description while displaying errors and issues when they are not found or they exceed the character limit.