feat: update SEO

consolelabs · Mar 10, 2023 · e9432d3 · e9432d3 · vercel · Mar 10, 2023
1 parent 18cb0ba
commit e9432d3
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 15 deletions.
diff --git a/components/SEO.tsx b/components/SEO.tsx
@@ -0,0 +1,48 @@
+import Head from "next/head";
+import React from "react";
+
+export const SEO = () => {
+  return (
+    <Head>
+      <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
+      <meta content="width=device-width, initial-scale=1" name="viewport" />
+      <title>Hunger Game</title>
+      <meta name="title" content="Hunger Game" />
+      <meta
+        name="description"
+        content="Join the Hunger Game fun with four players and a random portal location. Collect points while racing to find the portal before your opponents. Just watch out for explosions!"
+      />
+
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://the-hunger-game.vercel.app/" />
+      <meta property="og:title" content="Hunger Game" />
+      <meta
+        property="og:description"
+        content="Join the Hunger Game fun with four players and a random portal location. Collect points while racing to find the portal before your opponents. Just watch out for explosions!"
+      />
+      <meta
+        property="og:image"
+        content={`https://the-hunger-game.vercel.app/thumbnail.png`}
+      />
+
+      <meta property="twitter:card" content="summary_large_image" />
+      <meta
+        property="twitter:url"
+        content="https://the-hunger-game.vercel.app/"
+      />
+      <meta property="twitter:title" content="Hunger Game" />
+      <meta
+        property="twitter:description"
+        content="Join the Hunger Game fun with four players and a random portal location. Collect points while racing to find the portal before your opponents. Just watch out for explosions!"
+      />
+      <meta
+        property="twitter:image"
+        content={`https://the-hunger-game.vercel.app/thumbnail.png`}
+      />
+      <link
+        rel="icon"
+        href={`https://the-hunger-game.vercel.app/favicon.ico`}
+      />
+    </Head>
+  );
+};
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -1,26 +1,13 @@
 import "../styles/fonts.css";
 import "../styles/globals.css";
 import type { AppProps } from "next/app";
-import Head from "next/head";
 import { GameContextProvider } from "../contexts/game";
+import { SEO } from "../components/SEO";
 
 export default function App({ Component, pageProps }: AppProps) {
-  const metaDesc =
-    "Join the Hunger Game fun with four players and a random portal location. Collect points while racing to find the portal before your opponents. Just watch out for explosions!";
   return (
     <>
-      <Head>
-        <meta content="IE=edge" httpEquiv="X-UA-Compatible" />
-        <meta content="width=device-width, initial-scale=1" name="viewport" />
-        <title>Hunger Game</title>
-        <meta property="og:title" content="Hunger Game" />
-        <meta name="twitter:site" content="@dwarvesf" />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="description" content={metaDesc} />
-        <meta property="og:description" content={metaDesc} />
-        <meta property="og:image" content="/thumbnail.png" />
-        <meta name="twitter:image" content="/thumbnail.png" />
-      </Head>
+      <SEO />
       <GameContextProvider>
         <Component {...pageProps} />
       </GameContextProvider>

diff --git a/public/theme.png b/public/theme.png