Detail : Add meta tag for SEO

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "next": "12.2.5",
+    "next-seo": "^5.5.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0",

src/components/SEO/index.tsx

@@ -0,0 +1,22 @@
+import { useConfig } from '@contexts/ConfigContext';
+import { DefaultSeo } from 'next-seo';
+import { ComponentType } from 'react';
+
+const SEO: ComponentType = () => {
+  const { name, url } = useConfig();
+
+  return (
+    <DefaultSeo
+      title={name}
+      description={name}
+      openGraph={{
+        type: 'website',
+        url,
+        title: name,
+        description: name,
+      }}
+    />
+  );
+};
+
+export default SEO;

src/pages/_app.tsx

@@ -1,11 +1,13 @@
 import '@styles/globals.css';
 
+import SEO from '@components/SEO';
 import { ConfigProvider } from '@contexts/ConfigContext';
 import type { AppProps } from 'next/app';
 
 function MyApp({ Component, pageProps }: AppProps) {
   return (
     <ConfigProvider>
+      <SEO />
       <Component {...pageProps} />
     </ConfigProvider>
   );

yarn.lock

@@ -2353,6 +2353,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-seo@^5.5.0:
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/next-seo/-/next-seo-5.5.0.tgz#12bdfce60a6ae098f49617357a166c2d44dbc29e"
+  integrity sha512-5ouBHFtx8YrSDW44lj0qIEQ+oMcz6stgoITB+SqHUZbhgizoJsyLmq73gJ0lxtEKpcN8vG2QgRIJfdb8OAPChw==
+
 [email protected]:
   version "12.2.5"
   resolved "https://registry.npmjs.org/next/-/next-12.2.5.tgz"