feat: add json-ld scripts for SEO

Author: yuhwan-park

app/[slug]/page.tsx

@@ -8,7 +8,8 @@ import Giscus from '@/components/Giscus';
 import { HomeIcon } from '@/components/icons';
 import TableOfContent from '@/components/TableOfContent';
 import ZoomableImage from '@/components/ZoomableImage';
-import { allBlogPosts, parseToc } from '@/libs/post';
+import { allBlogPosts, contentToDescription, parseToc } from '@/libs/post';
+import { getPostJsonLD } from '@/libs/seo';
 
 interface PostPageProps {
   params: {
@@ -26,10 +27,10 @@ export async function generateMetadata({ params }: PostPageProps): Promise<Metad
   const post = allBlogPosts.find((post) => post.slug === `/${params.slug}`);
 
   if (!post) return {};
-
+  const description = contentToDescription(post.body.raw);
   return {
     title: `${post.title} | yuhwan park's blog`,
-    description: post.title,
+    description,
     alternates: {
       canonical: `https://yuhwan-park.github.io${post.slug}`,
     },
@@ -45,7 +46,7 @@ export async function generateMetadata({ params }: PostPageProps): Promise<Metad
       authors: ['yuhwan park'],
       title: post.title,
       url: `https://yuhwan-park.github.io${post.slug}`,
-      description: post.title,
+      description,
     },
   };
 }
@@ -66,6 +67,10 @@ export default function PostPage({ params }: PostPageProps) {
 
   return (
     <main>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(getPostJsonLD(post)) }}
+      />
       <div className="blur-layer" aria-hidden />
       <TableOfContent data-animate className="px-2 text-sm" toc={toc} />
       <div data-animate>

app/layout.tsx

@@ -19,7 +19,7 @@ const pretendard = localFont({
 
 export const metadata: Metadata = {
   title: `yuhwan park's blog`,
-  description: `yuhwan park's blog`,
+  description: `안녕하세요. UX와 DX 두 마리 토끼를 다 잡고 싶은 만 2년차 프론트엔드 개발자입니다.`,
   robots: {
     index: true,
     follow: true,
@@ -28,7 +28,8 @@ export const metadata: Metadata = {
   openGraph: {
     title: `yuhwan park's blog`,
     url: 'https://yuhwan-park.github.io/',
-    description: `yuhwan park's blog`,
+    siteName: `yuhwan park's blog`,
+    description: `안녕하세요. UX와 DX 두 마리 토끼를 다 잡고 싶은 만 2년차 프론트엔드 개발자입니다.`,
   },
   other: {
     ['google-site-verification']: '1tOVlPGznTkcAVpMjZVMHwrVgJrkxd9IPKcfLHd0LWc',

app/page.tsx

@@ -3,11 +3,16 @@ import Image from 'next/image';
 import { EmailIcon, GithubIcon } from '@/components/icons';
 import PostList from '@/components/PostList';
 import { reducedAllBlogPosts } from '@/libs/post';
+import { getHomeJsonLD } from '@/libs/seo';
 
 export default function Home() {
   const posts = reducedAllBlogPosts;
   return (
     <main data-animate>
+      <script
+        type="application/ld+json"
+        dangerouslySetInnerHTML={{ __html: JSON.stringify(getHomeJsonLD()) }}
+      />
       <div className="mb-8">
         <b>박유환</b>
       </div>

libs/post.ts

@@ -59,3 +59,17 @@ export const parseToc = (source: string) => {
       return acc;
     }, []);
 };
+
+export const contentToDescription = (content: string) => {
+  const parsedContent = content
+    .replace(/!\[.*?\]\(.*?\)/g, '')
+    .replace(/(?<=\])\((.*?)\)/g, '')
+    .replace(/(?<!\S)((http)(s?):\/\/|www\.).+?(?=\s)/g, '')
+    .replace(/[#*\|\[\]]|(\-{3,})|(`{3})(\S*)(?=\s)/g, '')
+    .replace(/<[^>]*>/g, '')
+    .replace(/\s+/g, ' ')
+    .trim()
+    .slice(0, 130);
+
+  return `${parsedContent}...`;
+};

libs/seo.ts

@@ -0,0 +1,45 @@
+import { contentToDescription } from './post';
+import { Post } from './types';
+
+export const getHomeJsonLD = () => {
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'Blog',
+    name: "yuhwan park's blog",
+    url: 'https://yuhwan-park.github.io/',
+    description: `안녕하세요. UX와 DX 두 마리 토끼를 다 잡고 싶은 만 2년차 프론트엔드 개발자입니다.`,
+    author: {
+      '@type': 'Person',
+      name: 'yuhwan park',
+      url: 'https://github.com/yuhwan-park',
+    },
+    datePublished: '2024-11-07',
+    dateModified: '2024-11-07',
+    inLanguage: 'ko',
+    mainEntityOfPage: 'https://yuhwan-park.github.io/',
+    copyrightYear: '2024',
+  };
+};
+
+export const getPostJsonLD = (post: Post) => {
+  const description = contentToDescription(post.body.raw);
+  return {
+    '@context': 'https://schema.org',
+    '@type': 'BlogPosting',
+    headline: post.title,
+    datePublished: post.date,
+    dateModified: post.date,
+    author: {
+      '@type': 'Person',
+      name: 'yuhwan park',
+      url: 'https://github.com/yuhwan-park',
+    },
+    description,
+    publisher: {
+      '@type': 'Organization',
+      name: "yuhwan park's blog",
+      url: 'https://yuhwan-park.github.io/',
+    },
+    articleBody: post.body.raw,
+  };
+};