feat: add JSON-LD structured data (#260)

- Add author profile to SITE variables - Add JSON-LD to Layout.astro
satnaing · Jul 14, 2024 · 8fbb0b4 · 8fbb0b4
1 parent 242729a
commit 8fbb0b4
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 0 deletions.
diff --git a/src/config.ts b/src/config.ts
@@ -3,6 +3,7 @@ import type { Site, SocialObjects } from "./types";
 export const SITE: Site = {
  website: "https://astro-paper.pages.dev/", // replace this with your deployed domain
  author: "Sat Naing",
+ profile: "https://satnaing.dev/",
  desc: "A minimal, responsive and SEO-friendly Astro blog theme.",
  title: "AstroPaper",
  ogImage: "astropaper-og.jpg",

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -8,6 +8,7 @@ const googleSiteVerification = import.meta.env.PUBLIC_GOOGLE_SITE_VERIFICATION;
 export interface Props {
  title?: string;
  author?: string;
+ profile?: string;
  description?: string;
  ogImage?: string;
  canonicalURL?: string;
@@ -19,6 +20,7 @@ export interface Props {
 const {
  title = SITE.title,
  author = SITE.author,
+ profile = SITE.profile,
  description = SITE.desc,
  ogImage = SITE.ogImage,
  canonicalURL = new URL(Astro.url.pathname, Astro.site).href,
@@ -31,6 +33,22 @@ const socialImageURL = new URL(
  ogImage ?? SITE.ogImage ?? "og.png",
  Astro.url.origin
 ).href;
+
+const structuredData = {
+ "@context": "https://schema.org",
+ "@type": "BlogPosting",
+ headline: `${title}`,
+ image: `${socialImageURL}`,
+ datePublished: `${pubDatetime?.toISOString()}`,
+ ...(modDatetime && { dateModified: modDatetime.toISOString() }),
+ author: [
+ {
+ "@type": "Person",
+ name: `${author}`,
+ url: `${profile}`,
+ },
+ ],
+};
 ---
 
 <!doctype html>
@@ -83,6 +101,12 @@ const socialImageURL = new URL(
  <meta property="twitter:description" content={description} />
  <meta property="twitter:image" content={socialImageURL} />
 
+ <!-- Google JSON-LD Structured data -->
+ <script
+ type="application/ld+json"
+ set:html={JSON.stringify(structuredData)}
+ />
+
  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

diff --git a/src/types.ts b/src/types.ts
@@ -3,6 +3,7 @@ import type socialIcons from "@assets/socialIcons";
 export type Site = {
  website: string;
  author: string;
+ profile: string;
  desc: string;
  title: string;
  ogImage?: string;