feat: improve SEO and GEO with JSON-LD structured data

Author: Clickin

src/components/SeoHead.astro

@@ -1,17 +1,37 @@
 ---
 import { site as siteCfg } from "../site.config";
-const { title, description, canonical, ogImage } = Astro.props;
+const { 
+  title, 
+  description, 
+  canonical, 
+  ogImage, 
+  type = "website",
+  publishDate,
+  updatedDate,
+  structuredData
+} = Astro.props;
 const pageTitle = title ? `${title} — ${siteCfg.title}` : siteCfg.title;
 const canonicalUrl = canonical ?? Astro.url.href;
 const resolvedOgImage = ogImage ?? "/og-default.svg";
 ---
 <meta name="description" content={description ?? siteCfg.description} />
 <link rel="canonical" href={canonicalUrl} />
+<meta property="og:site_name" content={siteCfg.title} />
 <meta property="og:title" content={pageTitle} />
 <meta property="og:description" content={description ?? siteCfg.description} />
 <meta property="og:url" content={canonicalUrl} />
+<meta property="og:type" content={type} />
 <meta property="og:image" content={new URL(resolvedOgImage, Astro.site ?? canonicalUrl).href} />
+{type === "article" && publishDate && (
+  <meta property="article:published_time" content={publishDate instanceof Date ? publishDate.toISOString() : publishDate} />
+)}
+{type === "article" && updatedDate && (
+  <meta property="article:modified_time" content={updatedDate instanceof Date ? updatedDate.toISOString() : updatedDate} />
+)}
 <meta name="twitter:card" content="summary_large_image" />
 <meta name="twitter:title" content={pageTitle} />
 <meta name="twitter:description" content={description ?? siteCfg.description} />
 <meta name="twitter:image" content={new URL(resolvedOgImage, Astro.site ?? canonicalUrl).href} />
+{structuredData && (
+  <script type="application/ld+json" set:html={JSON.stringify(structuredData)} />
+)}

src/layouts/BaseLayout.astro

@@ -3,7 +3,17 @@ import "../styles/global.css";
 import Header from "../components/Header.astro";
 import SeoHead from "../components/SeoHead.astro";
 import { site as siteCfg } from "../site.config";
-const { title, description, canonical, ogImage, mainClass = "container-blog" } = Astro.props;
+const { 
+  title, 
+  description, 
+  canonical, 
+  ogImage, 
+  mainClass = "container-blog",
+  type,
+  publishDate,
+  updatedDate,
+  structuredData
+} = Astro.props;
 const siteUrl = Astro.site ?? Astro.url;
 const baseUrl = new URL(import.meta.env.BASE_URL, siteUrl);
 const sitemapUrl = new URL("sitemap-index.xml", baseUrl).href;
@@ -40,7 +50,16 @@ const hasGaMeasurementId = typeof gaMeasurementId === "string" && gaMeasurementI
     </noscript>
     <link rel="sitemap" type="application/xml" href={sitemapUrl} />
     <title>{title ? `${title} — ${siteCfg.title}` : siteCfg.title}</title>
-    <SeoHead title={title} description={description} canonical={canonical} ogImage={resolvedOgImage} />
+    <SeoHead 
+      title={title} 
+      description={description} 
+      canonical={canonical} 
+      ogImage={resolvedOgImage}
+      type={type}
+      publishDate={publishDate}
+      updatedDate={updatedDate}
+      structuredData={structuredData}
+    />
     <!-- Inline theme init to prevent FOUC -->
     <script is:inline>
       (function(){

src/pages/blog/[slug].astro

@@ -18,8 +18,47 @@ const ogImage = `/og/blog/${normalizePostSlug(post.slug)}.png`;
 
 const dateStr = post.data.date.toISOString().slice(0, 10);
 const updatedStr = post.data.updated ? post.data.updated.toISOString().slice(0, 10) : null;
+
+const siteUrl = Astro.site?.href ?? "https://clickin.github.io/";
+const postUrl = new URL(`/blog/${normalizePostSlug(post.slug)}/`, siteUrl).href;
+
+const structuredData = {
+  "@context": "https://schema.org",
+  "@type": "BlogPosting",
+  "headline": post.data.title,
+  "description": post.data.description,
+  "image": new URL(ogImage, siteUrl).href,
+  "datePublished": post.data.date.toISOString(),
+  "dateModified": post.data.updated?.toISOString() ?? post.data.date.toISOString(),
+  "author": {
+    "@type": "Person",
+    "name": "Clickin",
+    "url": siteUrl
+  },
+  "publisher": {
+    "@type": "Organization",
+    "name": "Clickin Devlog",
+    "logo": {
+      "@type": "ImageObject",
+      "url": new URL("/favicon.png", siteUrl).href
+    }
+  },
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": postUrl
+  }
+};
 ---
-<BaseLayout title={post.data.title} description={post.data.description} ogImage={ogImage} mainClass="max-w-7xl mx-auto px-4 sm:px-6">
+<BaseLayout 
+  title={post.data.title} 
+  description={post.data.description} 
+  ogImage={ogImage} 
+  mainClass="max-w-7xl mx-auto px-4 sm:px-6"
+  type="article"
+  publishDate={post.data.date}
+  updatedDate={post.data.updated}
+  structuredData={structuredData}
+>
   <!-- Mobile Category Navigation -->
   <div class="lg:hidden mb-4">
     <CategorySidebar activeCategoryPath={post.data.category.split(">").map(s => s.trim()).join("/")} />

src/pages/index.astro

@@ -8,8 +8,25 @@ const posts = (await getCollection("posts", ({ data }) => !data.draft && data.pu
   .slice(0, 5);
 
 const base = import.meta.env.BASE_URL;
+const siteUrl = Astro.site?.href ?? "https://clickin.github.io/";
+
+const structuredData = {
+  "@context": "https://schema.org",
+  "@type": "WebSite",
+  "name": "Clickin Devlog",
+  "url": siteUrl,
+  "description": "Developer blog — notes, write-ups, and explorations.",
+  "author": {
+    "@type": "Person",
+    "name": "Clickin"
+  }
+};
 ---
-<BaseLayout title="Home" description="Developer blog — notes, write-ups, and explorations.">
+<BaseLayout 
+  title="Home" 
+  description="Developer blog — notes, write-ups, and explorations."
+  structuredData={structuredData}
+>
   <section class="py-8">
     <h1 class="text-4xl sm:text-5xl font-extrabold mb-4">
       Welcome 👋