feat: use next-seo

hannanhafeez · Dec 15, 2022 · faadb0f · faadb0f
1 parent 4ac0f00
commit faadb0f
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 30 deletions.
diff --git a/package.json b/package.json
@@ -27,6 +27,7 @@
     "framer-motion": "^7.6.6",
     "front-matter": "^4.0.2",
     "next": "13.0.0",
+    "next-seo": "^5.15.0",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

diff --git a/src/components/layouts/PostContentsLayout.tsx b/src/components/layouts/PostContentsLayout.tsx
@@ -1,11 +1,12 @@
 import clsx from 'clsx';
+import { ArticleJsonLd } from 'next-seo';
 
 import Head from '@/components/meta/Head';
-import StructuredData from '@/components/meta/StructuredData';
 import PageHeader from '@/components/shared/Header/PageHeader';
 import TableOfContents from '@/components/shared/TableOfContents';
 
 import { formatDateISO, getPostOgImageUrl } from '@/helpers/post';
+import { getBaseUrl } from '@/helpers/url';
 
 import type { TPostFrontMatter, TTableOfContents } from '@/types';
 
@@ -28,38 +29,26 @@ function PostContentsLayout({
     tags,
   });
 
-  const structuredData = JSON.stringify({
-    '@context': 'https://schema.org',
-    '@type': 'BlogPosting',
-    headline: title,
-    image: [
-      {
-        '@type': 'ImageObject',
-        contentUrl: ogImage,
-        creditText: 'enji.dev',
-        creator: {
-          '@type': 'Person',
-          name: 'Enji Kusnadi',
-          url: 'https://twitter.com/enjidev',
-        },
-        copyrightNotice: 'Enji Kusnadi',
-      },
-    ],
-    datePublished: formatDateISO(date),
-    dateModified: formatDateISO(date),
-    author: [
-      {
-        '@type': 'Person',
-        name: 'Enji Kusnadi',
-        url: 'https://twitter.com/enjidev',
-      },
-    ],
-  });
-
   return (
     <>
       <Head title={title} description={description} ogImage={ogImage} />
-      <StructuredData data={structuredData} />
+      <ArticleJsonLd
+        url={`${getBaseUrl()}/blog`}
+        title={title}
+        images={[ogImage]}
+        datePublished={formatDateISO(date)}
+        dateModified={formatDateISO(date)}
+        authorName={[
+          {
+            name: 'Enji Kusnadi',
+            url: 'https://twitter.com/enjidev',
+          },
+        ]}
+        publisherName="Enji Kusnadi"
+        publisherLogo="https://github.com/enjidev.png"
+        description={description}
+        isAccessibleForFree
+      />
       <div className={clsx('')}>
         <PageHeader
           title={title}

diff --git a/yarn.lock b/yarn.lock
@@ -2587,6 +2587,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-seo@^5.15.0:
+  version "5.15.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.15.0.tgz#b1a90508599774982909ea44803323c6fb7b50f4"
+  integrity sha512-LGbcY91yDKGMb7YI+28n3g+RuChUkt6pXNpa8FkfKkEmNiJkeRDEXTnnjVtwT9FmMhG6NH8qwHTelGrlYm9rgg==
+
 next-themes@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"