fix/seo-issues (#151)

src/components/layout/__snapshots__/index.test.tsx.snap

@@ -3,44 +3,13 @@
 exports[`component: Layout it renders 1`] = `
 Array [
   <div
-    additionalMetaTags={
-      Array [
-        Object {
-          "content": "#da532c",
-          "name": "msapplication-TileColor",
-        },
-        Object {
-          "content": "http://localhost/icons/browserconfig.xml",
-          "name": "msapplication-config",
-        },
-        Object {
-          "content": "#ffffff",
-          "name": "theme-color",
-        },
-      ]
-    }
-    description="common:description"
     id="NextSeo"
     openGraph={
       Object {
-        "description": "common:description",
-        "images": Array [
-          Object {
-            "url": "https://staging.bigdipper.live/images/big-dipper-social-media.png",
-          },
-        ],
-        "site_name": "Big Dipper",
         "title": "validators | Desmos Block Explorer",
-        "type": "website",
-        "url": "http://localhost/",
       }
     }
     title="validators | Desmos Block Explorer"
-    twitter={
-      Object {
-        "cardType": "summary_large_image",
-      }
-    }
   />,
   <div
     className="makeStyles-root"

src/components/layout/index.tsx

@@ -12,23 +12,9 @@ import { useStyles } from './styles';
 const Layout = (props:LayoutProps) => {
   const { t } = useTranslation();
   const classes = useStyles();
-  // ============================
-  // Meta Tags
-  // ============================
-  let baseUrl = '';
-  let currentPath = '';
-
-  if (typeof window === 'object') {
-    baseUrl = window?.location?.origin || '';
-    currentPath = window?.location?.href || '';
-  }
 
   const {
-    description = t('common:description'),
     title = t('common:bigDipper'),
-    type = 'website',
-    // imageUrl = `${baseUrl}/icons/android-chrome-512x512.png`,
-    imageUrl = 'https://staging.bigdipper.live/images/big-dipper-social-media.png',
     children,
     navTitle,
     className,
@@ -43,36 +29,9 @@ const Layout = (props:LayoutProps) => {
     <>
       <NextSeo
         title={formattedTitle}
-        description={description}
         openGraph={{
-          type,
           title: formattedTitle,
-          site_name: 'Big Dipper',
-          url: currentPath,
-          description,
-          images: [
-            {
-              url: imageUrl,
-            },
-          ],
-        }}
-        twitter={{
-          cardType: 'summary_large_image',
         }}
-        additionalMetaTags={[
-          {
-            name: 'msapplication-TileColor',
-            content: '#da532c',
-          },
-          {
-            name: 'msapplication-config',
-            content: `${baseUrl}/icons/browserconfig.xml`,
-          },
-          {
-            name: 'theme-color',
-            content: '#ffffff',
-          },
-        ]}
       />
       {/* ========================== */}
       {/* body */}

src/screens/app/components/inner_app/index.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
 import { AppProps } from 'next/app';
 import InitialLoad from '@screens/initial_load';
+import { NextSeo } from 'next-seo';
+import useTranslation from 'next-translate/useTranslation';
 import {
   useChainContext,
   useNetworksContext,
 } from '@contexts';
+import { chainConfig } from '@configs';
 import { useChainHealthCheck } from './hooks';
 
 // Separated to use our useSettingsContext hook
@@ -15,9 +18,27 @@ function InnerApp({
   const networksContext = useNetworksContext();
   const chainContext = useChainContext();
   const isLoading = chainContext.loading || networksContext.loading;
+  const { t } = useTranslation();
+  // ============================
+  // Meta Tags
+  // ============================
+  let currentPath = '';
+
+  if (typeof window === 'object') {
+    currentPath = window?.location?.href || '';
+  }
+
+  const title = `${t('common:bigDipper')} | ${chainConfig.title}`;
 
   return (
     <>
+      <NextSeo
+        title={title}
+        openGraph={{
+          url: currentPath,
+          title,
+        }}
+      />
       {
       isLoading ? (
         <InitialLoad {...pageProps} />

src/screens/app/index.test.tsx

@@ -51,6 +51,12 @@ jest.mock('@src/graphql/client', () => ({
   useApollo: () => mockClient,
 }));
 
+const mockI18n = {
+  t: (key: string) => key,
+  lang: 'en',
+};
+jest.mock('next-translate/useTranslation', () => () => mockI18n);
+
 // ==================================
 // unit tests
 // ==================================

src/screens/app/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Head from 'next/head';
 import { AppProps } from 'next/app';
+import useTranslation from 'next-translate/useTranslation';
 import CssBaseline from '@material-ui/core/CssBaseline';
 import { ThemeProvider } from '@material-ui/core/styles';
 import { ToastContainer } from 'react-toastify';
@@ -26,6 +27,7 @@ function App(props: AppProps) {
     genesisStarted,
     startGenesis,
   } = useGenesis();
+  const { t } = useTranslation();
 
   return (
     <>
@@ -40,6 +42,15 @@ function App(props: AppProps) {
         <link rel="manifest" href="/icons/site.webmanifest" />
         <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#5bbad5" />
         <link rel="shortcut icon" href="/icons/favicon.ico" />
+        <meta property="og:image" content="https://bigdipper.live/images/big-dipper-social-media.png" />
+        <meta property="og:description" content={t('common:description')} />
+        <meta property="description" content={t('common:description')} />
+        <meta property="og:site_name" content="Big Dipper" />
+        <meta property="og:type" content="website" />
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="msapplication-TileColor" content="#da532c" />
+        <meta name="msapplication-config" content="/icons/browserconfig.xml" />
+        <meta name="theme-color" content="#ffffff" />
       </Head>
       <ApolloProvider
         client={apolloClient}

src/screens/countdown/index.tsx

@@ -1,7 +1,5 @@
 /* eslint-disable */
 import React, { useState } from 'react';
-import { NextSeo } from 'next-seo';
-import useTranslation from 'next-translate/useTranslation';
 import { Typography } from '@material-ui/core';
 import { useInterval } from '@hooks';
 import dayjs from '@utils/dayjs';
@@ -12,7 +10,6 @@ import { Loading } from '@components';
 const Countdown: React.FC<{
   startGenesis: () => void;
 }> = ({ startGenesis }) => {
-  const { t } = useTranslation();
   const classes = useStyles();
   const genesisTime = dayjs.utc(chainConfig.genesis.time);
   const [state, setState] = useState({
@@ -47,53 +44,8 @@ const Countdown: React.FC<{
 
   useInterval(intervalCallback, state.interval);
 
-  // ============================
-  // Meta Tags
-  // ============================
-  let baseUrl = '';
-  let currentPath = '';
-
-  if (typeof window === 'object') {
-    baseUrl = window?.location?.origin || '';
-    currentPath = window?.location?.href || '';
-  }
-
-  const title = `${t('common:bigDipper')} | ${chainConfig.title}`
   return (
     <>
-    <NextSeo
-        title={title}
-        description={t('common:description')}
-        openGraph={{
-          type: 'website',
-          title,
-          site_name: 'Big Dipper',
-          url: currentPath,
-          description: t('common:description'),
-          images: [
-            {
-              url: 'https://staging.bigdipper.live/images/big-dipper-social-media.png',
-            },
-          ],
-        }}
-        twitter={{
-          cardType: 'summary_large_image',
-        }}
-        additionalMetaTags={[
-          {
-            name: 'msapplication-TileColor',
-            content: '#da532c',
-          },
-          {
-            name: 'msapplication-config',
-            content: `${baseUrl}/icons/browserconfig.xml`,
-          },
-          {
-            name: 'theme-color',
-            content: '#ffffff',
-          },
-        ]}
-      />
     <div className={classes.root}>
       <img src={chainConfig.logo} className={classes.logo} alt="logo" />
       <div className={classes.timeContainer}>

src/screens/error/index.tsx

@@ -1,69 +1,21 @@
 // /* eslint-disable */
 import React from 'react';
-import { NextSeo } from 'next-seo';
 import Link from 'next/link';
 import useTranslation from 'next-translate/useTranslation';
 import Trans from 'next-translate/Trans';
 import { HOME } from '@utils/go_to_page';
 import {
   Typography,
 } from '@material-ui/core';
-import {
-  chainConfig, githubConfig,
-} from '@configs';
+import { githubConfig } from '@configs';
 import { useStyles } from './styles';
 
 const Error = () => {
   const classes = useStyles();
   const { t } = useTranslation();
 
-  // ============================
-  // Meta Tags
-  // ============================
-  let baseUrl = '';
-  let currentPath = '';
-
-  if (typeof window === 'object') {
-    baseUrl = window?.location?.origin || '';
-    currentPath = window?.location?.href || '';
-  }
-
-  const title = `${t('common:bigDipper')} | ${chainConfig.title}`;
   return (
     <>
-      <NextSeo
-        title={title}
-        description={t('common:description')}
-        openGraph={{
-          type: 'website',
-          title,
-          site_name: 'Big Dipper',
-          url: currentPath,
-          description: t('common:description'),
-          images: [
-            {
-              url: 'https://staging.bigdipper.live/images/big-dipper-social-media.png',
-            },
-          ],
-        }}
-        twitter={{
-          cardType: 'summary_large_image',
-        }}
-        additionalMetaTags={[
-          {
-            name: 'msapplication-TileColor',
-            content: '#da532c',
-          },
-          {
-            name: 'msapplication-config',
-            content: `${baseUrl}/icons/browserconfig.xml`,
-          },
-          {
-            name: 'theme-color',
-            content: '#ffffff',
-          },
-        ]}
-      />
       <div className={classes.root}>
         <div className="container">
           <Typography variant="h2">

src/screens/initial_load/index.tsx

@@ -1,6 +1,4 @@
 import React from 'react';
-import { NextSeo } from 'next-seo';
-import useTranslation from 'next-translate/useTranslation';
 import BigDipperLogoWhite from '@assets/big-dipper-white.svg';
 import BigDipperLogoRed from '@assets/big-dipper-red.svg';
 import { useSettingsContext } from '@contexts';
@@ -11,55 +9,9 @@ import { useStyles } from './styles';
 const InitialLoad = () => {
   const { theme } = useSettingsContext();
   const classes = useStyles();
-  const { t } = useTranslation();
 
-  // ============================
-  // Meta Tags
-  // ============================
-  let baseUrl = '';
-  let currentPath = '';
-
-  if (typeof window === 'object') {
-    baseUrl = window?.location?.origin || '';
-    currentPath = window?.location?.href || '';
-  }
-
-  const title = `${t('common:bigDipper')} | ${chainConfig.title}`;
   return (
     <>
-      <NextSeo
-        title={title}
-        description={t('common:description')}
-        openGraph={{
-          type: 'website',
-          title,
-          site_name: 'Big Dipper',
-          url: currentPath,
-          description: t('common:description'),
-          images: [
-            {
-              url: 'https://staging.bigdipper.live/images/big-dipper-social-media.png',
-            },
-          ],
-        }}
-        twitter={{
-          cardType: 'summary_large_image',
-        }}
-        additionalMetaTags={[
-          {
-            name: 'msapplication-TileColor',
-            content: '#da532c',
-          },
-          {
-            name: 'msapplication-config',
-            content: `${baseUrl}/icons/browserconfig.xml`,
-          },
-          {
-            name: 'theme-color',
-            content: '#ffffff',
-          },
-        ]}
-      />
       <div className={classes.root}>
         <div>
           <img src={chainConfig.logo} className={classes.logo} alt="logo" />