seo(website): add JSON-LD Article to blog posts and BreadcrumbList to docs pages (issue #404)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: 2 people

website/src/app/blog/[slug]/page.tsx

@@ -55,9 +55,49 @@ export default async function BlogPostPage({ params }: Props) {
   const prevPost = currentIndex < allPosts.length - 1 ? allPosts[currentIndex + 1] : null;
   const nextPost = currentIndex > 0 ? allPosts[currentIndex - 1] : null;
 
+  const jsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'TechArticle',
+    headline: post.title,
+    description: `GoSQLX ${post.title} release notes.`,
+    datePublished: post.date ? `${post.date}T00:00:00Z` : undefined,
+    dateModified: post.date ? `${post.date}T00:00:00Z` : undefined,
+    url: `https://gosqlx.dev/blog/${slug}/`,
+    author: {
+      '@type': 'Organization',
+      name: 'GoSQLX',
+      url: 'https://gosqlx.dev',
+    },
+    publisher: {
+      '@type': 'Organization',
+      name: 'GoSQLX',
+      url: 'https://gosqlx.dev',
+      logo: {
+        '@type': 'ImageObject',
+        url: 'https://gosqlx.dev/images/logo.webp',
+      },
+    },
+    image: {
+      '@type': 'ImageObject',
+      url: 'https://gosqlx.dev/images/og-image.png',
+      width: 1200,
+      height: 630,
+    },
+    mainEntityOfPage: {
+      '@type': 'WebPage',
+      '@id': `https://gosqlx.dev/blog/${slug}/`,
+    },
+  };
+
   return (
-    <main className="min-h-screen py-20 px-4">
-      <article className="max-w-3xl mx-auto">
+    <>
+      <script
+        type="application/ld+json"
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+      />
+      <main className="min-h-screen py-20 px-4">
+        <article className="max-w-3xl mx-auto">
         {/* Back link */}
         <Link
           href="/blog"
@@ -118,8 +158,9 @@ export default async function BlogPostPage({ params }: Props) {
             <div />
           )}
         </nav>
-      </article>
-    </main>
+        </article>
+      </main>
+    </>
   );
 }
 

website/src/app/docs/[...slug]/page.tsx

@@ -65,8 +65,34 @@ export default async function DocPage({ params }: PageProps) {
     g.items.some((i) => i.slug === slugStr)
   );
 
+  const breadcrumbItems: Array<{ '@type': string; position: number; name: string; item: string }> = [
+    { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://gosqlx.dev/' },
+    { '@type': 'ListItem', position: 2, name: 'Documentation', item: 'https://gosqlx.dev/docs/' },
+    ...(categoryItem
+      ? [{ '@type': 'ListItem', position: 3, name: categoryItem.category, item: 'https://gosqlx.dev/docs/' }]
+      : []),
+    {
+      '@type': 'ListItem',
+      position: categoryItem ? 4 : 3,
+      name: doc.title,
+      item: `https://gosqlx.dev/docs/${slugStr}/`,
+    },
+  ];
+
+  const breadcrumbJsonLd = {
+    '@context': 'https://schema.org',
+    '@type': 'BreadcrumbList',
+    itemListElement: breadcrumbItems,
+  };
+
   return (
-    <div className="mx-auto flex max-w-[90rem]">
+    <>
+      <script
+        type="application/ld+json"
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbJsonLd) }}
+      />
+      <div className="mx-auto flex max-w-[90rem]">
       {/* Sidebar */}
       <div className="hidden lg:block w-64 shrink-0">
         <Sidebar />
@@ -129,6 +155,7 @@ export default async function DocPage({ params }: PageProps) {
       <div className="hidden xl:block w-48 shrink-0 py-10 pr-6">
         <Toc headings={headings} />
       </div>
-    </div>
+      </div>
+    </>
   );
 }