Add next-seo and setup page title for each section

cennznet · Mar 27, 2022 · bc8d61e · bc8d61e
1 parent 2c8ae07
commit bc8d61e
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "ethers": "^5.6.0",
     "lodash": "^4.17.21",
     "next": "^12.1.0",
+    "next-seo": "^5.2.0",
     "react": "^17.0.2",
     "react-device-detect": "^2.1.2",
     "react-dom": "^17.0.2",

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -19,6 +19,7 @@ import MetaMaskWalletProvider from "@/providers/MetaMaskWalletProvider";
 import { useRouter } from "next/router";
 import { useEffect } from "react";
 import { trackPageView } from "@/utils";
+import { DefaultSeo } from "next-seo";
 
 type MyAppProps = Omit<AppProps, "pageProps"> & {
 	pageProps: {} & GlobalProps;
@@ -38,11 +39,11 @@ function MyApp({ Component, pageProps }: MyAppProps) {
 
 	return (
 		<>
-			<Head>
-				<title>CENNZnet App Hub</title>
-				<meta name="description" content="App Hub powered by CENNZnet" />
-				<link rel="icon" href="/favicon.svg" />
-			</Head>
+			<DefaultSeo
+				titleTemplate="CENNZnet App Hub | %s"
+				title="CENNZnet App Hub"
+				description="App Hub powered by CENNZnet."
+			/>
 			<CssBaseline />
 			<ThemeProvider>
 				<CssGlobal />

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -34,6 +34,8 @@ class MyDocument extends Document {
 						rel="stylesheet"
 						href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,600&display=swap"
 					/>
+					<meta name="description" content="App Hub powered by CENNZnet" />
+					<link rel="icon" href="/favicon.svg" />
 				</Head>
 				<body>
 					<Main />

diff --git a/pages/bridge.tsx b/pages/bridge.tsx
@@ -10,6 +10,7 @@ import BridgeProvider from "@/providers/BridgeProvider";
 import { fetchBridgeTokens } from "@/utils";
 import { BridgedEthereumToken, EthereumToken } from "@/types";
 import BridgeProgress from "@/components/BridgeProgress";
+import { NextSeo } from "next-seo";
 
 export async function getStaticProps() {
 	const api = await Api.create({ provider: API_URL });
@@ -31,6 +32,7 @@ const Bridge: VFC<{
 			depositTokens={depositTokens}
 			withdrawTokens={withdrawTokens}
 		>
+			<NextSeo title="Emery Bridge" />
 			<MainPanel defaultTitle="Emery Bridge">
 				<BridgeForm>
 					<BridgeActionsPair />

diff --git a/pages/pool.tsx b/pages/pool.tsx
@@ -12,6 +12,7 @@ import PoolAssetsPair from "@/components/PoolAssetsPair";
 import PoolStats from "@/components/PoolStats";
 import PoolSettings from "@/components/PoolSettings";
 import PoolProgress from "@/components/PoolProgress";
+import { NextSeo } from "next-seo";
 
 export async function getStaticProps() {
 	const api = await Api.create({ provider: API_URL });
@@ -27,6 +28,7 @@ export async function getStaticProps() {
 const Pool: VFC<{ supportedAssets: CENNZAsset[] }> = ({ supportedAssets }) => {
 	return (
 		<PoolProvider supportedAssets={supportedAssets}>
+			<NextSeo title="CENNZX Liquidity" />
 			<MainPanel defaultTitle="CENNZX Liquidity">
 				<PoolForm>
 					<PoolActionsPair />

diff --git a/pages/swap.tsx b/pages/swap.tsx
@@ -11,6 +11,7 @@ import SwapSettings from "@/components/SwapSettings";
 import SwapProgress from "@/components/SwapProgress";
 import MainPanel from "@/components/MainPanel";
 import { VFC } from "react";
+import { NextSeo } from "next-seo";
 
 export async function getStaticProps() {
 	const api = await Api.create({ provider: API_URL });
@@ -26,6 +27,7 @@ export async function getStaticProps() {
 const Swap: VFC<{ supportedAssets: CENNZAsset[] }> = ({ supportedAssets }) => {
 	return (
 		<SwapProvider supportedAssets={supportedAssets}>
+			<NextSeo title="CENNZX Exchange" />
 			<MainPanel defaultTitle="CENNZX Exchange">
 				<SwapForm>
 					<SwapAssetsPair />

diff --git a/yarn.lock b/yarn.lock
@@ -561,6 +561,7 @@ __metadata:
     jest: ^27.5.1
     lodash: ^4.17.21
     next: ^12.1.0
+    next-seo: ^5.2.0
     prettier: ^2.5.1
     react: ^17.0.2
     react-device-detect: ^2.1.2
@@ -6554,6 +6555,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"next-seo@npm:^5.2.0":
+  version: 5.2.0
+  resolution: "next-seo@npm:5.2.0"
+  peerDependencies:
+    next: ^8.1.1-canary.54 || >=9.0.0
+    react: ">=16.0.0"
+    react-dom: ">=16.0.0"
+  checksum: 392f0b4b9d2d2d6873c163c39ca470580ec0031c3941c8da5bdbce154368ceda10aee97a639d1e209318e4c878bafc9bf4a1600355205eac6ac9ca9102ad1801
+  languageName: node
+  linkType: hard
+
 "next-tick@npm:~1.0.0":
   version: 1.0.0
   resolution: "next-tick@npm:1.0.0"