Add SEO (#4)

Woodpile37 · Mar 6, 2022 · ee56ee4 · ee56ee4
1 parent 9149563
commit ee56ee4
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 2 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,8 +1,11 @@
 /** @type {import('gatsby').GatsbyConfig} */
 module.exports = {
   siteMetadata: {
-    title: ``,
-    siteUrl: `https://www.yourdomain.tld`,
+    title: `Chainlist`,
+    siteUrl: `https://evm-chainlist.netlify.app/`,
+    author: "@frederikbolding",
+    description:
+      "A list of EVM-based chains that also allows you to add chains to your favorite Web3 wallet.",
   },
   plugins: [
     "gatsby-plugin-emotion",

diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@types/node": "^17.0.14",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
+    "@types/react-helmet": "^6.1.5",
     "gatsby-source-filesystem": "^4.9.0",
     "gatsby-transformer-json": "^4.9.0",
     "typescript": "^4.5.5"

diff --git a/src/components/SEO.tsx b/src/components/SEO.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { Helmet } from "react-helmet";
+import { useStaticQuery, graphql } from "gatsby";
+
+export const Seo = ({ lang = "en", meta = [] }) => {
+  const { site } = useStaticQuery(
+    graphql`
+      query {
+        site {
+          siteMetadata {
+            title
+            description
+            author
+          }
+        }
+      }
+    `
+  );
+
+  const metaDescription = site.siteMetadata.description;
+  const title = site.siteMetadata?.title;
+
+  return (
+    <Helmet
+      htmlAttributes={{
+        lang,
+      }}
+      title={title}
+      titleTemplate={`%s`}
+      meta={[
+        {
+          name: `description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:title`,
+          content: title,
+        },
+        {
+          property: `og:description`,
+          content: metaDescription,
+        },
+        {
+          property: `og:type`,
+          content: `website`,
+        },
+        {
+          name: `twitter:card`,
+          content: `summary`,
+        },
+        {
+          name: `twitter:creator`,
+          content: site.siteMetadata?.author || ``,
+        },
+        {
+          name: `twitter:title`,
+          content: title,
+        },
+        {
+          name: `twitter:description`,
+          content: metaDescription,
+        },
+      ].concat(meta)}
+    />
+  );
+};
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -3,6 +3,7 @@ import { graphql, useStaticQuery } from "gatsby";
 import React, { useState } from "react";
 import { ChainList } from "../components/ChainList";
 import { Header } from "../components/Header";
+import { Seo } from "../components/SEO";
 import { Web3Provider } from "../context/Web3Context";
 
 const IndexPage = () => {
@@ -43,6 +44,7 @@ const IndexPage = () => {
 
   return (
     <Web3Provider>
+      <Seo />
       <Box pt="4" px="8">
         <Header searchQuery={searchQuery} setSearchQuery={setSearchQuery} />
         <ChainList chains={filteredChains} />

diff --git a/yarn.lock b/yarn.lock
@@ -3036,6 +3036,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-helmet@^6.1.5":
+  version "6.1.5"
+  resolved "https://registry.yarnpkg.com/@types/react-helmet/-/react-helmet-6.1.5.tgz#35f89a6b1646ee2bc342a33a9a6c8777933f9083"
+  integrity sha512-/ICuy7OHZxR0YCAZLNg9r7I9aijWUWvxaPR6uTuyxe8tAj5RL4Sw1+R6NhXUtOsarkGYPmaHdBDvuXh2DIN/uA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react@*", "@types/react@^17.0.15", "@types/react@^17.0.38":
   version "17.0.39"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.39.tgz#d0f4cde092502a6db00a1cded6e6bf2abb7633ce"