diff --git a/components/common/SEO.tsx b/components/common/SEO.tsx
new file mode 100644
index 000000000..3de3096ea
--- /dev/null
+++ b/components/common/SEO.tsx
@@ -0,0 +1,43 @@
+import Head from "next/head";
+import { useRouter } from "next/router";
+
+interface Props {
+  title: string;
+  description: string;
+  // 1200x628
+  imageSrc: string;
+  appendTitle?: boolean;
+}
+
+const SEO: React.FC<Props> = ({
+  title,
+  description,
+  imageSrc,
+  appendTitle = true,
+}) => {
+  const router = useRouter();
+  const fullTitle = appendTitle ? `${title} | sendou.ink` : title;
+  const url = "https://sendou.ink" + router.pathname;
+
+  return (
+    <Head>
+      <title>{fullTitle}</title>
+      <meta name="title" content={fullTitle} />
+      <meta name="description" content={description} />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content={url} />
+      <meta property="og:title" content={fullTitle} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={imageSrc} />
+
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta property="twitter:url" content={url} />
+      <meta property="twitter:title" content={fullTitle} />
+      <meta property="twitter:description" content={description} />
+      <meta property="twitter:image" content={imageSrc} />
+    </Head>
+  );
+};
+
+export default SEO;
diff --git a/pages/index.tsx b/pages/index.tsx
index 6bbc57afe..4fae1da14 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,7 +1,7 @@
 import { Box, Container, Flex, Heading, useColorMode } from "@chakra-ui/react";
 import { t, Trans } from "@lingui/macro";
-import MyHead from "components/common/MyHead";
 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,9 +11,11 @@ const Home = () => {
   const { colorMode } = useColorMode();
   return (
     <>
-      <MyHead
-        title={`sendou.ink | ${t`Competitive Splatoon Hub`}`}
-        appendSendouInk={false}
+      <SEO
+        title="sendou.ink"
+        appendTitle={false}
+        description="Competitive Splatoon hub featuring several tools and resources."
+        imageSrc="/seo/home.png"
       />
       <Box textAlign="center">
         <Image
@@ -25,7 +27,7 @@ const Home = () => {
         />
         <Heading size="2xl">Sendou.ink</Heading>
         <Box fontWeight="semibold" letterSpacing="wide" color={gray}>
-          Competitive Splatoon Hub
+          <Trans>Competitive Splatoon Hub</Trans>
         </Box>
       </Box>
       <Container>
diff --git a/public/seo/home.png b/public/seo/home.png
new file mode 100644
index 000000000..d9a7b69be
Binary files /dev/null and b/public/seo/home.png differ
