JSON-LD

1import { getBrand } from "@/lib/brand"
2import { getSiteDomain } from "@/lib/seo"
3import { getSiteUrl } from "@/lib/site-url"
4 
5function serializeJsonLd(data: unknown): string {
6  return JSON.stringify(data).replace(/</g, "\u003c")
7}
8 
9 
10type OrgJsonLdProps = {
11  name?: string
12}
13 
14export function SiteGraphJsonLd({ name }: OrgJsonLdProps = {}) {
15  const brand = getBrand()
16  const orgName = name ?? brand.name
17  const siteUrl = getSiteUrl()
18  const domain = getSiteDomain()
19  const orgId = `${siteUrl}#organization`
20  const webId = `${siteUrl}#website`
21 
22  const data = {
23    "@context": "https://schema.org",
24    "@graph": [
25      {
26        "@type": "Organization",
27        "@id": orgId,
28        name: orgName,
29        alternateName: [domain],
30        url: siteUrl,
31        logo: {
32          "@type": "ImageObject",
33          url: `${siteUrl}/favicon-192.png`,
34          width: 192,
35          height: 192,
36        },
37        description: brand.tagline,
38      },
39      {
40        "@type": "WebSite",
41        "@id": webId,
42        name: orgName,
43        alternateName: [domain],
44        url: siteUrl,
45        inLanguage: "en-US",
46        publisher: { "@id": orgId },
47      },
48    ],
49  }
50 
51  return (
52    <script
53      type="application/ld+json"
54      dangerouslySetInnerHTML={{ __html: serializeJsonLd(data) }}
55    />
56  )
57}
58 
59export function ArticleJsonLd({
60  title,
61  description,
62  slug,
63  date,
64  dateModified,
65  author,
66  image,
67  basePath = "/blog",
68}: {
69  title: string
70  description: string
71  slug: string
72  date: string
73  dateModified?: string
74  author?: string
75  image?: string
76  basePath?: string
77}) {
78  const siteUrl = getSiteUrl()
79  const brandName = getBrand().name
80  const authorName = author ?? brandName
81  const segment = basePath.startsWith("/") ? basePath : `/${basePath}`
82  const pageUrl = `${siteUrl}${segment}/${slug}`
83  const imageUrl = image?.startsWith("http")
84    ? image
85    : image
86      ? `${siteUrl}${image.startsWith("/") ? image : `/${image}`}`
87      : `${siteUrl}${segment}/${slug}/opengraph-image`
88 
89  const data = {
90    "@context": "https://schema.org",
91    "@type": "Article",
92    headline: title,
93    description,
94    datePublished: date,
95    dateModified: dateModified ?? date,
96    image: imageUrl,
97    mainEntityOfPage: {
98      "@type": "WebPage",
99      "@id": pageUrl,
100    },
101    author: {
102      "@type": "Organization",
103      name: authorName,
104      url: siteUrl,
105    },
106    publisher: {
107      "@type": "Organization",
108      name: brandName,
109// … truncated