fix: Use JSON-LD differently

Author: LekoArts

www/src/components/seo.tsx

@@ -63,7 +63,10 @@ export const SEO: React.FC<React.PropsWithChildren<SEOProps>> = ({
       <meta name="msapplication-TileColor" content="#0f172a" />
       {noIndex && <meta name="robots" content="noindex, nofollow" />}
       {breadcrumbListItems.length >= 1 && (
-        <script type="application/ld+json">{JSON.stringify(breadcrumbList(breadcrumbListItems))}</script>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(breadcrumbList(breadcrumbListItems)) }}
+        />
       )}
       {children}
     </>

www/src/pages/index.tsx

@@ -326,7 +326,7 @@ export default Index
 
 export const Head = () => (
   <SEO>
-    <script type="application/ld+json">{JSON.stringify(homepage)}</script>
+    <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(homepage) }} />
   </SEO>
 )
 

www/src/templates/garden.tsx

@@ -167,26 +167,29 @@ export const Head: HeadFC<DataProps> = ({ data: { garden } }) => (
     <meta name="twitter:data2" value={garden.icon} />
     <meta name="article:published_time" content={garden.seoDate} />
     <meta name="article:modified_time" content={garden.seoLastUpdated} />
-    <script type="application/ld+json">
-      {JSON.stringify(
-        article({
-          isGarden: true,
-          post: {
-            title: garden.title,
-            description: garden.excerpt,
-            slug: garden.slug,
-            image: `/social/digital-garden.png`,
-            date: garden.seoDate,
-            lastUpdated: garden.seoLastUpdated,
-            year: garden.yearDate,
-          },
-          category: {
-            name: `Digital Garden`,
-            slug: `/garden`,
-          },
-        })
-      )}
-    </script>
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(
+          article({
+            isGarden: true,
+            post: {
+              title: garden.title,
+              description: garden.excerpt,
+              slug: garden.slug,
+              image: `/social/digital-garden.png`,
+              date: garden.seoDate,
+              lastUpdated: garden.seoLastUpdated,
+              year: garden.yearDate,
+            },
+            category: {
+              name: `Digital Garden`,
+              slug: `/garden`,
+            },
+          })
+        ),
+      }}
+    />
   </SEO>
 )
 

www/src/templates/prose.tsx

@@ -40,26 +40,29 @@ export const Head: HeadFC<WritingViewDataProps> = ({ data: { post } }) => (
     <meta name="twitter:data2" value={post.category.name} />
     <meta name="article:published_time" content={post.seoDate} />
     <meta name="article:modified_time" content={post.seoLastUpdated} />
-    <script type="application/ld+json">
-      {JSON.stringify(
-        article({
-          isGarden: false,
-          post: {
-            title: post.title,
-            description: post.description ? post.description : post.excerpt,
-            date: post.seoDate,
-            lastUpdated: post.seoLastUpdated,
-            year: post.yearDate,
-            image: post.image,
-            slug: post.slug,
-          },
-          category: {
-            name: post.category.name,
-            slug: post.category.slug,
-          },
-        })
-      )}
-    </script>
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(
+          article({
+            isGarden: false,
+            post: {
+              title: post.title,
+              description: post.description ? post.description : post.excerpt,
+              date: post.seoDate,
+              lastUpdated: post.seoLastUpdated,
+              year: post.yearDate,
+              image: post.image,
+              slug: post.slug,
+            },
+            category: {
+              name: post.category.name,
+              slug: post.category.slug,
+            },
+          })
+        ),
+      }}
+    />
   </SEO>
 )
 

www/src/templates/tutorial.tsx

@@ -57,26 +57,29 @@ export const Head: HeadFC<WritingViewDataProps> = ({ data: { post } }) => (
     <meta name="twitter:data2" value={post.category.name} />
     <meta name="article:published_time" content={post.seoDate} />
     <meta name="article:modified_time" content={post.seoLastUpdated} />
-    <script type="application/ld+json">
-      {JSON.stringify(
-        article({
-          isGarden: false,
-          post: {
-            title: post.title,
-            description: post.description ? post.description : post.excerpt,
-            date: post.seoDate,
-            lastUpdated: post.seoLastUpdated,
-            year: post.yearDate,
-            image: post.image,
-            slug: post.slug,
-          },
-          category: {
-            name: post.category.name,
-            slug: post.category.slug,
-          },
-        })
-      )}
-    </script>
+    <script
+      type="application/ld+json"
+      dangerouslySetInnerHTML={{
+        __html: JSON.stringify(
+          article({
+            isGarden: false,
+            post: {
+              title: post.title,
+              description: post.description ? post.description : post.excerpt,
+              date: post.seoDate,
+              lastUpdated: post.seoLastUpdated,
+              year: post.yearDate,
+              image: post.image,
+              slug: post.slug,
+            },
+            category: {
+              name: post.category.name,
+              slug: post.category.slug,
+            },
+          })
+        ),
+      }}
+    />
   </SEO>
 )