feat(seo): add context-driven page h1

Author: jaysin586

src/lib/components/BlogPost.svelte

@@ -33,6 +33,7 @@
         if (!seo) return
         seo.title = `${post.title} | ${config.name}`
         seo.description = post.description
+        seo.h1 = undefined
         seo.ogSlug = post.ogSlug ?? `blog-${post.slug}`
         seo.ogTitle = post.title
     }

src/lib/components/BlogPostV2.svelte

@@ -52,6 +52,7 @@
         if (!seo) return
         seo.title = `${post.title} | ${config.name}`
         seo.description = post.description
+        seo.h1 = undefined
         seo.ogSlug = post.ogSlug ?? `blog-${post.slug}`
         seo.ogTitle = post.title
     }

src/lib/components/CompareIndexV2.svelte

@@ -73,6 +73,7 @@
         const namesList = competitors.map((c) => c.name).join(', ')
         seo.title = `Compare | ${ours.name} vs ${namesList}`
         seo.description = `See how ${ours.npmPackage} compares to ${namesList}. Honest, side-by-side comparisons with feature matrices and verdicts.`
+        seo.h1 = undefined
         seo.ogTitle = `${ours.name} vs Alternatives`
         seo.ogTagline = 'Honest, side-by-side comparisons.'
         seo.ogFeatures = ogFeatures

src/lib/components/ComparisonPageV2.svelte

@@ -78,6 +78,7 @@
         if (!seo) return
         seo.title = `${ours.name} vs ${competitor.name} | Compare`
         seo.description = competitor.description
+        seo.h1 = undefined
         seo.ogTitle = `vs ${competitor.name}`
         seo.ogTagline = competitor.tagline
         seo.ogFeatures = ogFeatures

src/lib/components/RootLayout.svelte

@@ -11,6 +11,7 @@
     import BreadcrumbContextProvider from './BreadcrumbContextProvider.svelte'
     import BreadcrumbJsonLd from './BreadcrumbJsonLd.svelte'
     import SeoContextProvider from './SeoContextProvider.svelte'
+    import SeoH1 from './SeoH1.svelte'
     import SeoHead from './SeoHead.svelte'
 
     const {
@@ -34,42 +35,42 @@
     const softwareAppJsonLd = $derived(
         stars != null
             ? '<script type="application/ld+json">' +
-              JSON.stringify({
-                  '@context': 'https://schema.org',
-                  '@type': 'SoftwareApplication',
-                  name: config.name,
-                  description: config.description,
-                  url: config.url,
-                  downloadUrl: npmUrl,
-                  applicationCategory: 'DeveloperApplication',
-                  operatingSystem: 'Any',
-                  softwareRequirements: config.softwareRequirements ?? 'Svelte 5',
-                  license: 'https://opensource.org/licenses/MIT',
-                  keywords: config.keywords,
-                  releaseNotes: `${repoUrl}/releases`,
-                  ...(config.programmingLanguages
-                      ? { programmingLanguage: config.programmingLanguages }
-                      : {}),
-                  author: {
-                      '@type': 'Organization',
-                      name: 'Humanspeak, Inc.',
-                      url: 'https://humanspeak.com',
-                      sameAs: ['https://github.com/humanspeak', npmUrl, repoUrl]
-                  },
-                  offers: {
-                      '@type': 'Offer',
-                      price: '0',
-                      priceCurrency: 'USD'
-                  },
-                  aggregateRating: {
-                      '@type': 'AggregateRating',
-                      ratingValue: '5',
-                      ratingCount: String(stars),
-                      bestRating: '5'
-                  }
-              }) +
-              '<' +
-              '/script>'
+                  JSON.stringify({
+                      '@context': 'https://schema.org',
+                      '@type': 'SoftwareApplication',
+                      name: config.name,
+                      description: config.description,
+                      url: config.url,
+                      downloadUrl: npmUrl,
+                      applicationCategory: 'DeveloperApplication',
+                      operatingSystem: 'Any',
+                      softwareRequirements: config.softwareRequirements ?? 'Svelte 5',
+                      license: 'https://opensource.org/licenses/MIT',
+                      keywords: config.keywords,
+                      releaseNotes: `${repoUrl}/releases`,
+                      ...(config.programmingLanguages
+                          ? { programmingLanguage: config.programmingLanguages }
+                          : {}),
+                      author: {
+                          '@type': 'Organization',
+                          name: 'Humanspeak, Inc.',
+                          url: 'https://humanspeak.com',
+                          sameAs: ['https://github.com/humanspeak', npmUrl, repoUrl]
+                      },
+                      offers: {
+                          '@type': 'Offer',
+                          price: '0',
+                          priceCurrency: 'USD'
+                      },
+                      aggregateRating: {
+                          '@type': 'AggregateRating',
+                          ratingValue: '5',
+                          ratingCount: String(stars),
+                          bestRating: '5'
+                      }
+                  }) +
+                  '<' +
+                  '/script>'
             : null
     )
 </script>
@@ -90,5 +91,6 @@
         </MotionConfig>
         <BreadcrumbJsonLd {config} />
     </BreadcrumbContextProvider>
+    <SeoH1 {seo} />
     <SeoHead {seo} {config} {favicon} />
 </SeoContextProvider>

src/lib/components/SeoH1.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+    import type { SeoContext } from '../contexts/seo.js'
+
+    const { seo } = $props<{
+        seo: SeoContext
+    }>()
+
+    const h1 = $derived(seo.h1)
+    const isVisible = $derived(h1?.mode === 'visible')
+</script>
+
+{#if h1?.title && h1.mode !== 'none'}
+    <h1 id={h1.id} class={isVisible ? undefined : 'seo-h1-sr-only'}>{h1.title}</h1>
+{/if}
+
+<style>
+    .seo-h1-sr-only {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip: rect(0, 0, 0, 0);
+        white-space: nowrap;
+        border: 0;
+    }
+</style>

src/lib/contexts/seo.ts

@@ -3,6 +3,11 @@ import { getContext, setContext } from 'svelte'
 export type SeoContext = {
     title?: string
     description?: string
+    h1?: {
+        title: string
+        id?: string
+        mode?: 'sr-only' | 'visible' | 'none'
+    }
     ogTitle?: string
     ogTagline?: string
     ogFeatures?: string[]

src/lib/index.ts

@@ -30,6 +30,7 @@ export { default as HeaderV2 } from './components/HeaderV2.svelte'
 export { default as OG } from './components/OG.svelte'
 export { default as RootLayout } from './components/RootLayout.svelte'
 export { default as SeoContextProvider } from './components/SeoContextProvider.svelte'
+export { default as SeoH1 } from './components/SeoH1.svelte'
 export { default as SeoHead } from './components/SeoHead.svelte'
 export { default as Sidebar } from './components/Sidebar.svelte'
 export { default as SidebarV2 } from './components/SidebarV2.svelte'