feat: add next seo

next-seo-config.js

@@ -0,0 +1,33 @@
+const description =
+  "Certificate Generator for Ctrl + Solve: An Introduction to Google Solution Challenge";
+
+export default {
+  title: "SOLCHA Intro Certificate Generator",
+  description,
+  openGraph: {
+    type: "website",
+    url: "https://solcha23.omsimos.com/",
+    title: "SOLCHA Intro Certificate Generator",
+    description,
+    images: [
+      {
+        url: "/images/solcha-intro-thumbnail.png",
+        width: 1400,
+        height: 800,
+        alt: "solcha-intro",
+        type: "image/png",
+      },
+    ],
+    site_name: "SOLCHA Intro Certificate Generator",
+  },
+  twitter: {
+    cardType: "summary_large_image",
+  },
+  additionalLinkTags: [
+    {
+      rel: "icon",
+      href: "/favicon.ico",
+      type: "image/x-icon",
+    },
+  ],
+};

package.json

@@ -24,6 +24,7 @@
     "html-to-image": "^1.11.11",
     "nanoid": "^5.0.2",
     "next": "13.5.2",
+    "next-seo": "^6.4.0",
     "nodemailer": "^6.9.6",
     "nprogress": "^0.2.0",
     "postcss": "8.4.30",

src/pages/_app.tsx

@@ -7,6 +7,8 @@ import type { AppProps } from "next/app";
 
 import "@/styles/globals.css";
 import Layout from "@/components/Layout";
+import SEO from "../../next-seo-config.js";
+import { DefaultSeo } from "next-seo";
 
 Router.events.on("routeChangeStart", () => {
   NProgress.configure({ showSpinner: false });
@@ -25,6 +27,7 @@ const googleReg = localFont({
 export default function App({ Component, pageProps }: AppProps) {
   return (
     <Layout className={googleReg.className}>
+      <DefaultSeo {...SEO} />
       <Toaster />
       <Component {...pageProps} />
     </Layout>