default seo

pages/_app.tsx

@@ -7,6 +7,7 @@ import { activateLocale } from "lib/i18n";
 import { locales } from "lib/lists/locales";
 import { Provider as NextAuthProvider } from "next-auth/client";
 import GoogleFonts from "next-google-fonts";
+import { DefaultSeo } from "next-seo";
 import type { AppProps } from "next/app";
 import Head from "next/head";
 import { Router } from "next/router";
@@ -143,6 +144,28 @@ const MyApp = (props: AppProps) => {
       <GoogleFonts
         href={`https://fonts.googleapis.com/css2?family=Rubik&display=swap`}
       />
+      <DefaultSeo
+        title="sendou.ink"
+        description="Competitive Splatoon hub featuring several tools and resources."
+        openGraph={{
+          url: "https://sendou.ink/",
+          title: "sendou.ink",
+          description:
+            "Competitive Splatoon hub featuring several tools and resources.",
+          images: [
+            {
+              url: "https://sendou.ink/seo/home.png",
+              width: 1200,
+              height: 628,
+            },
+          ],
+          site_name: "sendou.ink",
+        }}
+        twitter={{
+          site: "@sendouink",
+          cardType: "summary_large_image",
+        }}
+      />
 
       <NextAuthProvider session={props.pageProps.session}>
         <ChakraProvider theme={extendedTheme}>

pages/index.tsx

@@ -1,7 +1,6 @@
 import { Box, Container, Flex, Heading, useColorMode } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
 import MyLink from "components/common/MyLink";
-import SEO from "components/common/SEO";
 import { useMyTheme } from "lib/useMyTheme";
 import Image from "next/image";
 import Link from "next/link";
@@ -11,12 +10,12 @@ const Home = () => {
   const { colorMode } = useColorMode();
   return (
     <>
-      <SEO
+      {/* <SEO
         title="sendou.ink"
         appendTitle={false}
         description="Competitive Splatoon hub featuring several tools and resources."
         imageSrc="https://sendou.ink/seo/home.png"
-      />
+      /> */}
       <Box textAlign="center">
         <Image
           className="rgb"