Fix SEO (#14)

* add hooks

* add isMounted

* add Head

* update text

* fix image

* fix props

* fix head

* fix image extension

* fix url

* update url

src/components/layout/Head.tsx

@@ -1,24 +1,27 @@
 import React from 'react'
 import { default as NextHead } from 'next/head'
-import { SITE_DESCRIPTION, SITE_NAME } from '../../utils/config'
+import { SITE_URL } from '../../utils/config'
 
 interface Props {
   title?: string
   description?: string
 }
 
-export function Head(props: Props) {
+export function Head({ title, description }: Props) {
+  const origin = typeof window !== 'undefined' && window.location.origin ? window.location.origin : SITE_URL
+  const img = `${origin}/huangshan.png`
+
   return (
     <NextHead>
-      <title>{props.title ?? SITE_NAME} </title>
-      <meta property="og:url" content="https://genji.netlify.app/" />
-      <meta property="og:type" content="website" />
-      <meta property="og:title" content={props.title ?? SITE_NAME} />
-      <meta name="twitter:card" content={SITE_DESCRIPTION} />
-      <meta property="og:description" content={props.description ?? SITE_DESCRIPTION} />
-      <meta property="og:image" content={'./public/huangshan.jpeg'} />
-      <meta name="description" content={props.description ?? SITE_DESCRIPTION} />
-      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta property="og:title" content={title} />
+      <meta property="og:description" content={description} />
+      <meta property="og:image" content={img} />
+      <meta property="og:url" content={origin} />
+      <meta name="twitter:card" content={img} />
+      <meta name="twitter:site" content="@W3HC8" />
+      <meta name="twitter:title" content="Genji" />
+      <meta name="twitter:description" content={description} />
+      <meta name="twitter:image" content={img} />
     </NextHead>
   )
 }

src/components/layout/Seo.tsx

@@ -9,7 +9,7 @@ export function Seo() {
     <DefaultSeo
       title={SITE_NAME}
       defaultTitle={SITE_NAME}
-      titleTemplate={`%s | ${SITE_NAME}`}
+      titleTemplate={`${SITE_NAME}`}
       description={SITE_DESCRIPTION}
       defaultOpenGraphImageWidth={762}
       defaultOpenGraphImageHeight={708}
@@ -19,7 +19,7 @@ export function Seo() {
         url: origin,
         images: [
           {
-            url: `${origin}/huangshan.jpeg`, // The recommended image ratio for an og:image is 1.91:1 (ie. 1200 x 630)
+            url: `${origin}/huangshan.png`, // The recommended image ratio for an og:image is 1.91:1 (ie. 1200 x 630)
             alt: `${SITE_NAME} Open Graph Image`,
           },
         ],

src/hooks/useIsMounted.tsx

@@ -0,0 +1,11 @@
+import { useState, useEffect } from 'react'
+
+export function useIsMounted(): boolean {
+  let [isMounted, setIsMounted] = useState(false)
+
+  useEffect(() => {
+    setIsMounted(true)
+  }, [])
+
+  return isMounted
+}

src/pages/_app.tsx

@@ -1,28 +1,27 @@
 import type { AppProps } from 'next/app'
 import Layout from '../components/layout'
-import { useEffect, useState } from 'react'
+import { useEffect } from 'react'
 import { ChakraProvider } from '@chakra-ui/react'
 import { Seo } from '../components/layout/Seo'
 import { ERC20_CONTRACT_ADDRESS } from '../utils/erc20'
+import { useIsMounted } from '../hooks/useIsMounted'
 
 export default function App({ Component, pageProps }: AppProps) {
-  const [ready, setReady] = useState(false)
-
   useEffect(() => {
-    setReady(true)
     console.log('contract address:', ERC20_CONTRACT_ADDRESS)
   }, [])
+  const isMounted = useIsMounted()
 
   return (
     <>
-      {ready ? (
-        <ChakraProvider>
-          <Seo />
+      <ChakraProvider>
+        <Seo />
+        {isMounted && (
           <Layout>
             <Component {...pageProps} />
           </Layout>
-        </ChakraProvider>
-      ) : null}
+        )}
+      </ChakraProvider>
     </>
   )
 }

src/pages/index.tsx

@@ -6,6 +6,8 @@ import { useWeb3ModalProvider, useWeb3ModalAccount } from '@web3modal/ethers/rea
 import { ERC20_CONTRACT_ADDRESS, ERC20_CONTRACT_ABI } from '../utils/erc20'
 import { LinkComponent } from '../components/layout/LinkComponent'
 import { ethers } from 'ethers'
+import { Head } from '../components/layout/Head'
+import { SITE_NAME, SITE_DESCRIPTION } from '../utils/config'
 
 export default function Home() {
   const [isLoading, setIsLoading] = useState<boolean>(false)
@@ -111,6 +113,7 @@ export default function Home() {
 
   return (
     <>
+      <Head title={SITE_NAME} description={SITE_DESCRIPTION} />
       <main>
         <Button
           // mt={7}

src/utils/config.ts

@@ -1,7 +1,7 @@
 import { ThemingProps } from '@chakra-ui/react'
 export const SITE_DESCRIPTION = 'W3HC Next.js app template'
 export const SITE_NAME = 'Genji'
-export const SITE_URL = 'https://genji.netlify.app'
+export const SITE_URL = 'https://genji-app.netlify.app'
 
 export const THEME_INITIAL_COLOR = 'system'
 export const THEME_COLOR_SCHEME: ThemingProps['colorScheme'] = 'blue'