improvement(comparisons): keep the hero summary, section ids, and better-than question in the page's FAQ data

Restores the sr-only hero summary for pages that lead with a question, gives
every new section an id, includes the 'Is Sim better than' answer in the
page's question list so FAQ data matches the page, and asserts every answer
and at-a-glance value in the landing SEO E2E.

Author: waleedlatif1

apps/sim/app/(landing)/comparisons/[provider]/page.tsx

@@ -18,6 +18,7 @@ import { QuestionSections } from '@/app/(landing)/comparisons/components/questio
 import { getLibraryPostsForCompetitor } from '@/app/(landing)/comparisons/library-links'
 import {
   ALL_COMPETITORS,
+  betterThanQuestion,
   buildBottomLine,
   buildComparisonFaqs,
   getCompetitorBySlug,
@@ -200,7 +201,11 @@ export default async function ComparisonProviderPage({
               Sim vs {competitor.name}
             </h1>
             {competitor.leadQuestion && competitor.leadAnswer ? (
-              <section aria-labelledby='lead-question-heading' className='flex flex-col gap-3'>
+              <section
+                id='lead-question'
+                aria-labelledby='lead-question-heading'
+                className='flex flex-col gap-3'
+              >
                 <h2
                   id='lead-question-heading'
                   className='max-w-[720px] text-balance text-[var(--text-primary)] text-xl leading-[120%] tracking-[-0.02em] lg:text-2xl'
@@ -228,14 +233,14 @@ export default async function ComparisonProviderPage({
                   pricing, security, and support. Every fact below is sourced and dated, last
                   verified {verifiedDate}.
                 </p>
-                <p className='sr-only'>
-                  Sim is an open-source AI workspace for building, deploying, and managing AI
-                  agents. This page compares Sim to {competitor.name} across platform architecture,
-                  AI capabilities, integrations, pricing, security and compliance, observability,
-                  and support, using sourced, dated facts for buyers evaluating both platforms.
-                </p>
               </>
             )}
+            <p className='sr-only'>
+              Sim is an open-source AI workspace for building, deploying, and managing AI agents.
+              This page compares Sim to {competitor.name} across platform architecture, AI
+              capabilities, integrations, pricing, security and compliance, observability, and
+              support, using sourced, dated facts for buyers evaluating both platforms.
+            </p>
           </div>
         </div>
 
@@ -256,7 +261,7 @@ export default async function ComparisonProviderPage({
                     id='better-than-heading'
                     className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'
                   >
-                    Is Sim better than {competitor.name}?
+                    {betterThanQuestion(competitor)}
                   </h2>
                   <p className='max-w-[720px] text-[var(--text-body)] text-small leading-[150%]'>
                     <ProseText prose={competitor.betterThanAnswer} />

apps/sim/app/(landing)/comparisons/components/glance-table/glance-table.tsx

@@ -21,7 +21,7 @@ const STACKED_LABEL_CLASS = 'block font-medium text-[var(--text-muted)] text-cap
 export function GlanceTable({ rows, competitorName }: GlanceTableProps) {
   const heading = `Sim vs ${competitorName}: at a glance`
   return (
-    <section aria-labelledby='glance-heading' className='px-6 py-10'>
+    <section id='glance' aria-labelledby='glance-heading' className='px-6 py-10'>
       <h2
         id='glance-heading'
         className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'

apps/sim/app/(landing)/comparisons/components/question-sections/question-sections.tsx

@@ -4,7 +4,7 @@ import { ProseText } from '@/app/(landing)/comparisons/components/prose-text'
 
 interface QuestionSectionsProps {
   questions: ComparisonQuestion[]
-  /** Prefix for each section's heading id, unique on the page. */
+  /** Prefix for each section's id, unique on the page. */
   idPrefix: string
 }
 
@@ -15,10 +15,11 @@ interface QuestionSectionsProps {
  */
 export function QuestionSections({ questions, idPrefix }: QuestionSectionsProps) {
   return questions.map(({ question, answer }, index) => {
-    const headingId = `${idPrefix}-${index}-heading`
+    const sectionId = `${idPrefix}-${index}`
+    const headingId = `${sectionId}-heading`
     return (
       <Fragment key={question}>
-        <section aria-labelledby={headingId} className='px-6 py-10'>
+        <section id={sectionId} aria-labelledby={headingId} className='px-6 py-10'>
           <h2
             id={headingId}
             className='mb-4 text-[var(--text-primary)] text-xl leading-[100%] tracking-[-0.02em] lg:text-2xl'

apps/sim/app/(landing)/comparisons/utils.ts

@@ -178,14 +178,22 @@ export function buildComparisonFaqs(competitor: CompetitorProfile): ComparisonFa
   return faqs
 }
 
+/** Heading of the section answering {@link CompetitorProfile.betterThanAnswer}. */
+export function betterThanQuestion(competitor: CompetitorProfile): string {
+  return `Is Sim better than ${competitor.name}?`
+}
+
 /**
  * Every buyer question the page answers in its own section, in page order: the lead question,
- * then the intro, glance, and closing questions.
+ * the "better than" question, then the intro, glance, and closing questions.
  */
 export function getQuestionSections(competitor: CompetitorProfile): ComparisonQuestion[] {
-  const { leadQuestion, leadAnswer, questions } = competitor
+  const { leadQuestion, leadAnswer, betterThanAnswer, questions } = competitor
   return [
     ...(leadQuestion && leadAnswer ? [{ question: leadQuestion, answer: leadAnswer }] : []),
+    ...(betterThanAnswer
+      ? [{ question: betterThanQuestion(competitor), answer: betterThanAnswer }]
+      : []),
     ...(questions?.intro ?? []),
     ...(questions?.glance ?? []),
     ...(questions?.closing ?? []),

apps/sim/app/llms-full.txt/route.ts

@@ -100,7 +100,6 @@ function comparisonMarkdown(competitor: CompetitorProfile): string {
     `URL: ${toSiteUrl(`/comparisons/${competitor.id}`)} · Facts last verified ${isoDate(verified)}`,
     `${competitor.name}: ${competitor.oneLiner}`,
     competitor.leadAnswer && !competitor.leadQuestion ? proseToMarkdown(competitor.leadAnswer) : '',
-    competitor.betterThanAnswer ? proseToMarkdown(competitor.betterThanAnswer) : '',
     ...getQuestionSections(competitor).map(
       ({ question, answer }) => `**${question}**\n\n${proseToMarkdown(answer)}`
     ),

apps/sim/scripts/test-landing-seo-e2e.ts

@@ -17,6 +17,7 @@ import {
   n8nProfile,
   openaiAgentkitProfile,
   openClawProfile,
+  type Prose,
   pipedreamProfile,
   vellumProfile,
 } from '@/lib/compare/data'
@@ -510,6 +511,24 @@ async function run() {
         assert(text.includes(`${row.label}</th>`), `at-a-glance row missing: ${row.label}`)
       }
 
+      const visibleText = decodeHtml(
+        body
+          .replace(/<script\b[\s\S]*?<\/script>/g, '')
+          .replace(/<!--[\s\S]*?-->/g, '')
+          .replace(/<[^>]+>/g, '')
+      )
+      const proseText = (prose: Prose) =>
+        prose.map((part) => (typeof part === 'string' ? part : part.text)).join('')
+      const expectedProse = [
+        ...(profile.leadAnswer ? [profile.leadAnswer] : []),
+        ...[...intro, ...glance, ...closing].map((q) => q.answer),
+        ...(profile.glance ?? []).flatMap((row) => [row.sim, row.competitor]),
+      ]
+      for (const prose of expectedProse) {
+        const expected = proseText(prose)
+        assert(visibleText.includes(expected), `page text missing: ${expected.slice(0, 80)}`)
+      }
+
       const relatedStart = text.indexOf('Related reading</h2>')
       const relatedEnd = text.indexOf('More comparisons</h2>')
       assert(relatedStart >= 0 && relatedEnd > relatedStart, 'related reading section missing')