diff --git a/bun.lockb b/bun.lockb
index d8af75f..3921e2c 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index 48b4519..416e5b8 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "neverthrow": "^8.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.53.0",
     "react-intersection-observer": "^9.13.1",
     "react-leaflet": "^4.2.1",
diff --git a/src/assets/img/ogp/ogp_main.png b/src/assets/img/ogp/ogp_main.png
new file mode 100644
index 0000000..4b1c3d8
Binary files /dev/null and b/src/assets/img/ogp/ogp_main.png differ
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index e1c294e..d66588e 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import { createFileRoute, Link } from "@tanstack/react-router";
 import { styled as p } from "panda/jsx";
+import { Helmet, HelmetProvider } from "react-helmet-async";
 import { useInView } from "react-intersection-observer";
 import circle from "@/assets/svg/background/circle.svg";
 import decorationRight from "@/assets/svg/background/decoration-right.svg";
@@ -66,304 +67,324 @@ export const Route = createFileRoute("/")({
 
     return (
       <Expanded alignItems="start">
-        <p.div
-          ref={header}
-          backgroundColor="white"
-          display="grid"
-          fadeIn="10"
-          height={{
-            base: "400px",
-            sm: "600px",
-            lg: "30vh",
-            xl: "50vh",
-          }}
-          placeItems="center"
-          py="20"
-          style={{
-            position: "relative",
-            backgroundImage: `url(${headerRight}), url(${headerLeft})`,
-            backgroundRepeat: "no-repeat, no-repeat",
-            backgroundPosition: "right top, left bottom",
-            backgroundSize: "auto 50%, auto 50%",
-          }}
-        >
-          {inViewHeader && (
-            <LogoComposite
-              duration="1000"
-              fadeIn="10"
-              slideInY="10"
-              style={{
-                zIndex: 1,
-                position: "relative",
-              }}
-              zoom={{
-                base: 2,
-                smDown: 1.5,
-              }}
-            />
-          )}
-        </p.div>
+        <HelmetProvider>
+          <Helmet
+            meta={[
+              { name: "twitter:card", content: "summary" },
+              { name: "twitter:title", content: "Home" },
+              { name: "twitter:description", content: "description of Home" },
+              {
+                name: "twitter:image",
+                content: "/src/assets/img/ogp/ogp_main.png",
+              },
+              { property: "og:title", content: "Home" },
+              { property: "og:type", content: "website" },
+              { property: "og:url", content: "http://path/to/this/url" },
+              { property: "og:image", content: "http://path/to/image" },
+              { property: "og:description", content: "description of Home" },
+            ]}
+            title="Wakaba"
+          >
+            <title>Wakaba</title>
+          </Helmet>
+          <p.div
+            ref={header}
+            backgroundColor="white"
+            display="grid"
+            fadeIn="10"
+            height={{
+              sm: "600px",
+              lg: "40vh",
+              xl: "50vh",
+            }}
+            placeItems="center"
+            py="20"
+            style={{
+              position: "relative",
+              backgroundImage: `url(${headerRight}), url(${headerLeft})`,
+              backgroundRepeat: "no-repeat, no-repeat",
+              backgroundPosition: "right top, left bottom",
+              backgroundSize: "auto 50%, auto 50%",
+            }}
+          >
+            {inViewHeader && (
+              <LogoComposite
+                duration="1000"
+                fadeIn="10"
+                slideInY="10"
+                style={{
+                  zIndex: 1,
+                  position: "relative",
+                }}
+                zoom={{
+                  base: 2,
+                  smDown: 1.5,
+                }}
+              />
+            )}
+          </p.div>
 
-        <p.div
-          ref={ref1}
-          display="grid"
-          fadeIn="2"
-          height={{ base: "400px", sm: "600px", xl: "60vh" }}
-          placeItems="center"
-          style={{
-            position: "relative",
-            backgroundImage: `url(${wakabaIcon}), url(${decorationRight})`,
-            backgroundSize: "auto 15%, auto 15%",
-            backgroundPosition: "5% bottom , 85% bottom",
-            backgroundRepeat: "no-repeat, no-repeat",
-          }}
-        >
-          {inView1 && (
-            <p.div duration="1000" fadeIn="5" slideInY="10">
-              <p.h2 fontSize="3rem" fontWeight="bold" textAlign="center">
-                Wakabaとは
-              </p.h2>
+          <p.div
+            ref={ref1}
+            display="grid"
+            fadeIn="2"
+            height={{ base: "400px", sm: "600px", xl: "60vh" }}
+            placeItems="center"
+            style={{
+              position: "relative",
+              backgroundImage: `url(${wakabaIcon}), url(${decorationRight})`,
+              backgroundSize: "auto 15%, auto 15%",
+              backgroundPosition: "5% bottom , 85% bottom",
+              backgroundRepeat: "no-repeat, no-repeat",
+            }}
+          >
+            {inView1 && (
+              <p.div duration="1000" fadeIn="5" slideInY="10">
+                <p.h2 fontSize="3rem" fontWeight="bold" textAlign="center">
+                  Wakabaとは
+                </p.h2>
+
+                <p.p fontSize="1rem" mt="20px" mx="auto" textAlign="center">
+                  アイデアの種をあつめ形にするサービスです。
+                  <br />
+                  あなたの投稿したアイデアがこの町の明日を豊かにするかも！
+                </p.p>
+              </p.div>
+            )}
+          </p.div>
+
+          <p.div
+            ref={ref4}
+            background="wkb.primary"
+            display="grid"
+            fadeIn="2"
+            height={{ base: "400px", sm: "600px", xl: "60vh" }}
+            placeItems="center"
+            style={{
+              backgroundImage: `url(${wakaba}), url(${circle})`,
+              backgroundSize: "auto 40%, auto 5%",
+              backgroundPosition: "5% bottom , 73% 20%",
+              backgroundRepeat: "no-repeat, no-repeat",
+            }}
+          >
+            {inView4 && (
+              <p.div
+                ref={ref2}
+                display="grid"
+                fadeIn="5"
+                height="100%"
+                placeItems="center"
+                width="100%"
+              >
+                {inView2 && (
+                  <p.div duration="1000" placeItems="center" slideInY="10">
+                    <p.h2
+                      color="wkb.bg"
+                      fadeIn="5"
+                      fontSize="3rem"
+                      fontWeight="bold"
+                      textAlign="center"
+                    >
+                      種を植える
+                    </p.h2>
 
-              <p.p fontSize="1rem" mt="20px" mx="auto" textAlign="center">
-                アイデアの種をあつめ形にするサービスです。
-                <br />
-                あなたの投稿したアイデアがこの町の明日を豊かにするかも！
-              </p.p>
-            </p.div>
-          )}
-        </p.div>
+                    <p.p
+                      color="wkb.bg"
+                      fadeIn="5"
+                      fontSize="1rem"
+                      mt="20px"
+                      mx="auto"
+                      textAlign="center"
+                    >
+                      意見を投稿して、住みやすい街を
+                      <br />
+                      作るアイデアの種を植えよう！
+                    </p.p>
+                    <Link to="/seeds/new">
+                      <Button
+                        _hover={{
+                          background: "wkb.bg",
+                          shadow: "md",
+                        }}
+                        background="wkb.bg"
+                        display="flex"
+                        duration="3000"
+                        fadeIn="5"
+                        fontSize="150%"
+                        fontWeight="bold"
+                        mt="40px"
+                        mx="auto"
+                        slideInY="10"
+                      >
+                        実際に初めてみる
+                      </Button>
+                    </Link>
+                  </p.div>
+                )}
+              </p.div>
+            )}
+          </p.div>
 
-        <p.div
-          ref={ref4}
-          background="wkb.primary"
-          display="grid"
-          fadeIn="2"
-          height={{ base: "400px", sm: "600px", xl: "60vh" }}
-          placeItems="center"
-          style={{
-            backgroundImage: `url(${wakaba}), url(${circle})`,
-            backgroundSize: "auto 40%, auto 5%",
-            backgroundPosition: "5% bottom , 73% 20%",
-            backgroundRepeat: "no-repeat, no-repeat",
-          }}
-        >
-          {inView4 && (
-            <p.div
-              ref={ref2}
-              display="grid"
-              fadeIn="5"
-              height="100%"
-              placeItems="center"
-              width="100%"
-            >
-              {inView2 && (
-                <p.div duration="1000" placeItems="center" slideInY="10">
+          <p.div
+            ref={ref3}
+            background="wkb.bg"
+            display="grid"
+            height={{ base: "500px", sm: "800px", xl: "60vh" }}
+            placeItems="center"
+            width={{ base: "100%", sm: "100%" }}
+          >
+            {inView3 && (
+              <p.div
+                display="grid"
+                duration="1000"
+                fadeIn="5"
+                placeItems="center"
+                slideInY="10"
+                width="100%"
+              >
+                <p.div width="100%">
                   <p.h2
-                    color="wkb.bg"
-                    fadeIn="5"
-                    fontSize="3rem"
+                    color="wkb.text"
+                    fontSize="300%"
                     fontWeight="bold"
                     textAlign="center"
                   >
-                    種を植える
+                    Projects
                   </p.h2>
-
                   <p.p
-                    color="wkb.bg"
-                    fadeIn="5"
-                    fontSize="1rem"
+                    color="wkb.text"
+                    fontSize="100%"
+                    maxWidth={{ base: "85%", sm: "70%" }}
                     mt="20px"
                     mx="auto"
                     textAlign="center"
                   >
-                    意見を投稿して、住みやすい街を
-                    <br />
-                    作るアイデアの種を植えよう！
+                    試しに好きなジャンルのプロジェクトを調べてみる
                   </p.p>
-                  <Link to="/seeds/new">
+                </p.div>
+                <p.div
+                  display="grid"
+                  gap="20px"
+                  gridTemplateColumns="repeat(3, 1fr)"
+                  pt={150}
+                  px="5%"
+                  width="100%"
+                >
+                  <p.a height={100} href="/projects?q=cafe" width="100%">
                     <Button
                       _hover={{
-                        background: "wkb.bg",
+                        background: "wkb.primary",
                         shadow: "md",
                       }}
-                      background="wkb.bg"
-                      display="flex"
-                      duration="3000"
-                      fadeIn="5"
+                      background="wkb.primary"
+                      color="wkb.bg"
                       fontSize="150%"
                       fontWeight="bold"
-                      mt="40px"
-                      mx="auto"
-                      slideInY="10"
+                      height="100%"
+                      width="100%"
                     >
-                      実際に初めてみる
+                      # 休憩
                     </Button>
-                  </Link>
+                  </p.a>
+                  <p.a height={100} href="/projects?q=library" width="100%">
+                    <Button
+                      _hover={{
+                        background: "wkb.primary",
+                        shadow: "md",
+                      }}
+                      background="wkb.primary"
+                      color="wkb.bg"
+                      fontSize="150%"
+                      fontWeight="bold"
+                      height="100%"
+                      width="100%"
+                    >
+                      # 施設
+                    </Button>
+                  </p.a>
+                  <p.a height={100} href="/projects?q=gym" width="100%">
+                    <Button
+                      _hover={{
+                        background: "wkb.primary",
+                        shadow: "md",
+                      }}
+                      background="wkb.primary"
+                      color="wkb.bg"
+                      fontSize="150%"
+                      fontWeight="bold"
+                      height="100%"
+                      width="100%"
+                    >
+                      # 飲食
+                    </Button>
+                  </p.a>
                 </p.div>
-              )}
-            </p.div>
-          )}
-        </p.div>
-
-        <p.div
-          ref={ref3}
-          background="wkb.bg"
-          display="grid"
-          height={{ base: "500px", sm: "800px", xl: "60vh" }}
-          placeItems="center"
-          width={{ base: "100%", sm: "100%" }}
-        >
-          {inView3 && (
-            <p.div
-              display="grid"
-              duration="1000"
-              fadeIn="5"
-              placeItems="center"
-              slideInY="10"
-              width="100%"
-            >
-              <p.div width="100%">
-                <p.h2
-                  color="wkb.text"
-                  fontSize="300%"
-                  fontWeight="bold"
-                  textAlign="center"
-                >
-                  Projects
-                </p.h2>
-                <p.p
-                  color="wkb.text"
-                  fontSize="100%"
-                  maxWidth={{ base: "85%", sm: "70%" }}
-                  mt="20px"
-                  mx="auto"
-                  textAlign="center"
-                >
-                  試しに好きなジャンルのプロジェクトを調べてみる
-                </p.p>
               </p.div>
+            )}
+          </p.div>
+          <p.div
+            ref={ref5}
+            backgroundColor="white"
+            display="grid"
+            height={{ base: "500px", sm: "800px", xl: "60vh" }}
+            placeItems="center"
+            width={{ base: "100%", sm: "100%" }}
+          >
+            {inView5 && (
               <p.div
                 display="grid"
-                gap="20px"
-                gridTemplateColumns="repeat(3, 1fr)"
-                pt={150}
-                px="5%"
+                duration="1000"
+                fadeIn="5"
+                placeItems="center"
+                slideInY="10"
                 width="100%"
               >
-                <p.a height={100} href="/projects?q=cafe" width="100%">
-                  <Button
-                    _hover={{
-                      background: "wkb.primary",
-                      shadow: "md",
-                    }}
-                    background="wkb.primary"
-                    color="wkb.bg"
-                    fontSize="150%"
-                    fontWeight="bold"
-                    height="100%"
-                    width="100%"
-                  >
-                    # 休憩
-                  </Button>
-                </p.a>
-                <p.a height={100} href="/projects?q=library" width="100%">
-                  <Button
-                    _hover={{
-                      background: "wkb.primary",
-                      shadow: "md",
-                    }}
-                    background="wkb.primary"
-                    color="wkb.bg"
-                    fontSize="150%"
-                    fontWeight="bold"
-                    height="100%"
-                    width="100%"
-                  >
-                    # 施設
-                  </Button>
-                </p.a>
-                <p.a height={100} href="/projects?q=gym" width="100%">
-                  <Button
-                    _hover={{
-                      background: "wkb.primary",
-                      shadow: "md",
-                    }}
-                    background="wkb.primary"
-                    color="wkb.bg"
-                    fontSize="150%"
+                <p.div width="100%">
+                  <p.h2
+                    color="wkb.text"
+                    fontSize="300%"
                     fontWeight="bold"
-                    height="100%"
-                    width="100%"
+                    textAlign="center"
                   >
-                    # 飲食
-                  </Button>
-                </p.a>
-              </p.div>
-            </p.div>
-          )}
-        </p.div>
-        <p.div
-          ref={ref5}
-          backgroundColor="white"
-          display="grid"
-          height={{ base: "500px", sm: "800px", xl: "60vh" }}
-          placeItems="center"
-          width={{ base: "100%", sm: "100%" }}
-        >
-          {inView5 && (
-            <p.div
-              display="grid"
-              duration="1000"
-              fadeIn="5"
-              placeItems="center"
-              slideInY="10"
-              width="100%"
-            >
-              <p.div width="100%">
-                <p.h2
-                  color="wkb.text"
-                  fontSize="300%"
-                  fontWeight="bold"
-                  textAlign="center"
-                >
-                  Overview
-                </p.h2>
-                <p.p
-                  color="wkb.text"
-                  fontSize="100%"
-                  maxWidth={{ base: "85%", sm: "70%" }}
-                  mt="20px"
-                  mx="auto"
-                  textAlign="center"
-                >
-                  マップ上から近くのプロジェクトを探してみる
-                </p.p>
-              </p.div>
-              <p.div display="grid">
-                <Link to="/overview">
-                  <Button
-                    _hover={{
-                      background: "wkb.primary",
-                      shadow: "md",
-                    }}
-                    background="wkb.primary"
-                    color="wkb.bg"
-                    display="flex"
-                    duration="3000"
-                    fadeIn="5"
-                    fontSize="150%"
-                    fontWeight="bold"
-                    mt="40px"
+                    Overview
+                  </p.h2>
+                  <p.p
+                    color="wkb.text"
+                    fontSize="100%"
+                    maxWidth={{ base: "85%", sm: "70%" }}
+                    mt="20px"
                     mx="auto"
-                    slideInY="10"
+                    textAlign="center"
                   >
-                    近くのプロジェクトを探す
-                  </Button>
-                </Link>
+                    マップ上から近くのプロジェクトを探してみる
+                  </p.p>
+                </p.div>
+                <p.div display="grid">
+                  <Link to="/overview">
+                    <Button
+                      _hover={{
+                        background: "wkb.primary",
+                        shadow: "md",
+                      }}
+                      background="wkb.primary"
+                      color="wkb.bg"
+                      display="flex"
+                      duration="3000"
+                      fadeIn="5"
+                      fontSize="150%"
+                      fontWeight="bold"
+                      mt="40px"
+                      mx="auto"
+                      slideInY="10"
+                    >
+                      近くのプロジェクトを探す
+                    </Button>
+                  </Link>
+                </p.div>
               </p.div>
-            </p.div>
-          )}
-        </p.div>
+            )}
+          </p.div>
+        </HelmetProvider>
       </Expanded>
     );
   },