fix(seo): improve comparison page trust and accessibility

Author: ericyangpan

src/app/[locale]/clis/comparison/page.client.tsx

@@ -318,6 +318,8 @@ export default function CLIComparisonPageClient({ locale: _locale }: Props) {
             columns={columns}
             itemLinkPrefix={`/clis`}
             nameColumnLabel={tShared('labels.name')}
+            caption={tPage('clis.title')}
+            scrollHint={tPage('table.scrollHint')}
           />
         </div>
       </section>

src/app/[locale]/extensions/comparison/page.client.tsx

@@ -301,6 +301,8 @@ export default function ExtensionComparisonPageClient({ locale: _locale }: Props
             columns={columns}
             itemLinkPrefix={`/extensions`}
             nameColumnLabel={tShared('labels.name')}
+            caption={tPage('extensions.title')}
+            scrollHint={tPage('table.scrollHint')}
           />
         </div>
       </section>

src/app/[locale]/ides/comparison/page.client.tsx

@@ -315,6 +315,8 @@ export default function IDEComparisonPageClient({ locale: _locale }: Props) {
             columns={columns}
             itemLinkPrefix={`/ides`}
             nameColumnLabel={tShared('labels.name')}
+            caption={tPage('ides.title')}
+            scrollHint={tPage('table.scrollHint')}
           />
         </div>
       </section>

src/components/product/ComparisonTable.tsx

@@ -22,6 +22,8 @@ export interface ComparisonTableProps {
   itemIdKey?: string
   stickyTopOffset?: number
   nameColumnLabel?: string
+  caption: string
+  scrollHint: string
 }
 
 export default function ComparisonTable({
@@ -32,6 +34,8 @@ export default function ComparisonTable({
   itemIdKey = 'id',
   stickyTopOffset,
   nameColumnLabel = 'Name',
+  caption,
+  scrollHint,
 }: ComparisonTableProps) {
   const containerRef = useRef<HTMLDivElement>(null)
   const tableRef = useRef<HTMLTableElement>(null)
@@ -119,6 +123,7 @@ export default function ComparisonTable({
       {/* Fixed header wrapper with clipping */}
       {isFixed && containerRef.current && (
         <div
+          aria-hidden="true"
           className="fixed z-30 overflow-hidden"
           style={{
             top: `${calculatedOffset}px`,
@@ -170,9 +175,13 @@ export default function ComparisonTable({
         </div>
       )}
 
+      <p className="mb-[var(--spacing-xs)] text-xs text-[var(--color-text-muted)] md:hidden">
+        {scrollHint}
+      </p>
       <div ref={containerRef} className="w-full overflow-x-auto relative">
         <div className="min-w-[1200px]">
           <table ref={tableRef} className="w-full border-collapse">
+            <caption className="sr-only">{caption}</caption>
             {/* Placeholder to prevent content jump when thead becomes fixed */}
             {isFixed && (
               <thead aria-hidden="true" style={{ visibility: 'hidden' }}>
@@ -215,12 +224,16 @@ export default function ComparisonTable({
               className={!isFixed ? 'relative z-10 bg-[var(--color-bg)]' : 'sr-only'}
             >
               <tr className="border-b border-t border-[var(--color-border-strong)]">
-                <th className="sticky left-0 z-50 bg-[var(--color-bg)] px-[var(--spacing-md)] py-[var(--spacing-sm)] text-left text-sm font-semibold uppercase tracking-wider text-[var(--color-text-muted)] border-r border-[var(--color-border)]">
+                <th
+                  scope="col"
+                  className="sticky left-0 z-50 bg-[var(--color-bg)] px-[var(--spacing-md)] py-[var(--spacing-sm)] text-left text-sm font-semibold uppercase tracking-wider text-[var(--color-text-muted)] border-r border-[var(--color-border)]"
+                >
                   {nameColumnLabel}
                 </th>
                 {columns.map(column => (
                   <th
                     key={column.key}
+                    scope="col"
                     className="pl-[var(--spacing-md)] pr-0 py-[var(--spacing-sm)] text-left text-sm font-semibold uppercase tracking-wider text-[var(--color-text-muted)] whitespace-nowrap"
                     style={{
                       ...(column.minWidth && { minWidth: column.minWidth }),
@@ -241,7 +254,10 @@ export default function ComparisonTable({
                     index % 2 === 0 ? 'bg-[var(--color-bg)]' : 'bg-[var(--color-hover)]'
                   }`}
                 >
-                  <td className="sticky left-0 z-10 bg-inherit px-[var(--spacing-md)] py-[var(--spacing-sm)] font-medium border-r border-[var(--color-border)] whitespace-nowrap">
+                  <th
+                    scope="row"
+                    className="sticky left-0 z-10 bg-inherit px-[var(--spacing-md)] py-[var(--spacing-sm)] text-left font-medium border-r border-[var(--color-border)] whitespace-nowrap"
+                  >
                     <div className="inline-flex items-center gap-[var(--spacing-xs)]">
                       <Link
                         href={`${itemLinkPrefix}/${item[itemIdKey] as string}`}
@@ -251,7 +267,7 @@ export default function ComparisonTable({
                       </Link>
                       {item.deprecated === true && <DeprecatedBadge />}
                     </div>
-                  </td>
+                  </th>
                   {columns.map(column => (
                     <td
                       key={column.key}

src/lib/metadata/generators.ts

@@ -378,7 +378,7 @@ export async function generateComparisonMetadata(
   const tPage = await getTranslations({ locale, namespace: 'pages.comparison' })
 
   // Build title and description using category-specific translations
-  const title = `${tPage(`${category}.title`)} ${METADATA_DEFAULTS.currentYear}`
+  const title = tPage(`${category}.title`)
   const description = tPage(`${category}.subtitle`)
 
   // Build keywords

translations/de/pages/comparison.json

@@ -38,7 +38,7 @@
           "title": "Funktionieren sie unter Windows, macOS und Linux?"
         }
       ],
-      "intro": "Vergleichen Sie {count} KI-Coding-CLIs anhand derselben Kriterien: Plattformen, Preise, Lizenz, Projektaktivität und offizielle Quellen. Definieren Sie Ihre Anforderungen, erstellen Sie eine Auswahlliste und prüfen Sie veränderliche Produktdetails direkt beim Anbieter.",
+      "intro": "Vergleichen Sie {count} KI-Coding-CLIs anhand derselben Kriterien: Plattformen, Preise, Lizenz, GitHub-Sterne und Projektlinks sowie offizielle Quellen. Definieren Sie Ihre Anforderungen, erstellen Sie eine Auswahlliste und prüfen Sie veränderliche Produktdetails direkt beim Anbieter.",
       "profiles": [
         {
           "description": "Plattformen, Preise und offizielle Quellen des Terminal-Agenten von Anthropic.",
@@ -61,8 +61,8 @@
           "title": "OpenCode"
         }
       ],
-      "profilesIntro": "Diese Profile sind Ausgangspunkte, keine Rangliste. Jeder Eintrag zeigt aktuelle Manifestdaten und Primärquellen.",
-      "profilesTitle": "Repräsentative CLI-Profile prüfen",
+      "profilesIntro": "Die folgenden Links führen direkt zu bereits in der Tabelle aufgeführten Produktdatensätzen; sie sind keine Rangliste oder Empfehlung. Öffnen Sie jeden Datensatz, um Manifestdaten und Primärquellen zu prüfen.",
+      "profilesTitle": "CLI-Produktprofile öffnen",
       "shortlistIntro": "Nutzen Sie einen einheitlichen Prozess, damit Popularität nicht die Workflow-Eignung ersetzt.",
       "shortlistTitle": "CLI-Auswahl in drei Schritten",
       "steps": [
@@ -108,7 +108,7 @@
         },
         {
           "title": "Lizenz und Wartung",
-          "description": "Nutzen Sie Lizenz, GitHub-Aktivität und das Veraltet-Kennzeichen, um aktive Open-Source-Projekte von proprietären oder eingestellten Produkten zu unterscheiden."
+          "description": "Nutzen Sie Lizenz, GitHub-Sterne und Projektlinks sowie das Veraltet-Kennzeichen, um Open-Source-Projekte von proprietären oder eingestellten Produkten zu unterscheiden."
         },
         {
           "title": "Prüfpfad",
@@ -138,12 +138,12 @@
           "description": "Die Kompatibilität variiert. Prüfen Sie die Spalte „Unterstützte IDEs“ und bestätigen Sie anschließend die genaue Editor-Version und Betriebssystemanforderungen im offiziellen Marketplace oder in der Installationsanleitung."
         }
       ],
-      "intro": "Vergleichen Sie {count} AI-Coding-Erweiterungen anhand derselben Signale: unterstützte IDEs, Preise, Lizenz, Projektaktivität, Lebenszyklus und offizielle Quellen. Filtern Sie zuerst nach Kompatibilität und prüfen Sie veränderliche Details vor der Installation an der Quelle.",
+      "intro": "Vergleichen Sie {count} AI-Coding-Erweiterungen anhand derselben Signale: unterstützte IDEs, Preise, Lizenz, GitHub-Sterne und Projektlinks, Lebenszyklus und offizielle Quellen. Filtern Sie zuerst nach Kompatibilität und prüfen Sie veränderliche Details vor der Installation an der Quelle.",
       "profiles": [
         {
           "title": "GitHub Copilot",
           "href": "/extensions/github-copilot",
-          "description": "Prüfen Sie unterstützte IDEs, Preise, Lizenz, Projektaktivität und offizielle Quellen."
+          "description": "Prüfen Sie unterstützte IDEs, Preise, Lizenz, GitHub-Sterne und Projektlinks sowie offizielle Quellen."
         },
         {
           "title": "Cline",
@@ -161,8 +161,8 @@
           "description": "Prüfen Sie Host-Kompatibilität, Preise, Projektlinks und offizielle Quellen."
         }
       ],
-      "profilesIntro": "Diese Profile sind Startpunkte, keine Rangliste. Öffnen Sie jeden Datensatz, um aktuelle Manifest-Daten, Lebenszyklus und Primärquellen zu prüfen.",
-      "profilesTitle": "Repräsentative Erweiterungsprofile prüfen",
+      "profilesIntro": "Die folgenden Links führen direkt zu bereits in der Tabelle aufgeführten Produktdatensätzen; sie sind keine Rangliste oder Empfehlung. Öffnen Sie jeden Datensatz, um Manifestdaten, Lebenszyklusstatus und Primärquellen zu prüfen.",
+      "profilesTitle": "Erweiterungsprofile öffnen",
       "shortlistIntro": "Nutzen Sie einen einheitlichen Ablauf, damit Popularität nicht wichtiger wird als Editor-Kompatibilität und Wartungsstatus.",
       "shortlistTitle": "Erweiterungen in drei Schritten auswählen",
       "steps": [
@@ -172,7 +172,7 @@
         },
         {
           "title": "Einheitlich filtern",
-          "description": "Entfernen Sie inkompatible oder veraltete Produkte und vergleichen Sie den Rest nach Preis, Lizenz, Aktivität und offiziellen Quellen."
+          "description": "Entfernen Sie inkompatible oder veraltete Produkte und vergleichen Sie den Rest nach Preis, Lizenz, GitHub-Sternen, Projektlinks und offiziellen Quellen."
         },
         {
           "title": "Prüfen und testen",
@@ -181,7 +181,7 @@
       ],
       "title": "AI-Coding-Erweiterungen vergleichen"
     },
-    "subtitle": "Vergleichen Sie AI-Coding-Erweiterungen nach unterstützten IDEs, Preisen, Lizenz, GitHub-Aktivität, Lebenszyklus und offiziellen Quellen.",
+    "subtitle": "Vergleichen Sie AI-Coding-Erweiterungen nach unterstützten IDEs, Preisen, Lizenz, GitHub-Sternen und Projektlinks, Lebenszyklus und offiziellen Quellen.",
     "title": "AI-Coding-Erweiterungs-Vergleich"
   },
   "ides": {
@@ -227,12 +227,12 @@
           "description": "Die Plattformunterstützung variiert. Prüfen Sie die Symbole für macOS, Windows und Linux in der Tabelle und bestätigen Sie Systemanforderungen im offiziellen Download oder in der Installationsanleitung."
         }
       ],
-      "intro": "Vergleichen Sie {count} AI-Coding-IDEs anhand einheitlicher Signale: Plattformunterstützung, Preise, Lizenz, Projektaktivität und offizielle Quellen. Beginnen Sie mit Teamvorgaben, erstellen Sie eine Auswahl und bestätigen Sie aktuelle Details vor dem Wechsel an der Quelle.",
+      "intro": "Vergleichen Sie {count} AI-Coding-IDEs anhand einheitlicher Signale: Plattformunterstützung, Preise, Lizenz, GitHub-Sterne und Projektlinks sowie offizielle Quellen. Beginnen Sie mit Teamvorgaben, erstellen Sie eine Auswahl und bestätigen Sie aktuelle Details vor dem Wechsel an der Quelle.",
       "profiles": [
         {
           "title": "Cursor",
           "href": "/ides/cursor",
-          "description": "Prüfen Sie unterstützte Plattformen, Preise, Lizenz, Projektaktivität und offizielle Quellen."
+          "description": "Prüfen Sie unterstützte Plattformen, Preise, Lizenz, GitHub-Sterne und Projektlinks sowie offizielle Quellen."
         },
         {
           "title": "Windsurf Editor",
@@ -250,8 +250,8 @@
           "description": "Prüfen Sie unterstützte Plattformen, Preise, Lizenz, Projektlinks und Dokumentation."
         }
       ],
-      "profilesIntro": "Diese Profile sind Startpunkte, keine Rangliste. Öffnen Sie jeden Datensatz, um aktuelle Manifest-Daten und Primärquellen zu prüfen.",
-      "profilesTitle": "Repräsentative IDE-Profile prüfen",
+      "profilesIntro": "Die folgenden Links führen direkt zu bereits in der Tabelle aufgeführten Produktdatensätzen; sie sind keine Rangliste oder Empfehlung. Öffnen Sie jeden Datensatz, um Manifestdaten und Primärquellen zu prüfen.",
+      "profilesTitle": "IDE-Produktprofile öffnen",
       "shortlistIntro": "Nutzen Sie einen einheitlichen Ablauf, damit Popularität nicht Plattform- und Workflow-Eignung ersetzt.",
       "shortlistTitle": "IDE-Auswahl in drei Schritten",
       "steps": [
@@ -270,7 +270,7 @@
       ],
       "title": "AI-Coding-IDEs vergleichen"
     },
-    "subtitle": "Vergleichen Sie AI-Coding-IDEs nach Preisen, Plattformen, Lizenz, GitHub-Aktivität und offiziellen Quellen, bevor Sie eine Entwicklungsumgebung wählen.",
+    "subtitle": "Vergleichen Sie AI-Coding-IDEs nach Preisen, Plattformen, Lizenz, GitHub-Sternen und Projektlinks sowie offiziellen Quellen, bevor Sie eine Entwicklungsumgebung wählen.",
     "title": "AI-Coding-IDE-Vergleich"
   },
   "modelCompareDescription": "Vergleichen Sie AI-Coding-Modelle nebeneinander: Spezifikationen, Preise, Funktionen und Benchmarks.",
@@ -279,5 +279,8 @@
     "backTo": "Zurück zu Modellen",
     "subtitle": "Vergleichen Sie Spezifikationen und Preise von AI-Coding-Modellen nebeneinander.",
     "title": "AI-Coding-Modell-Vergleich"
+  },
+  "table": {
+    "scrollHint": "Scrollen Sie horizontal, um alle Spalten anzuzeigen."
   }
 }