Add meta tags (#861)

danielcolinjames · web-flow · commit 3572d5281d53 · 2022-02-18T13:34:51.000-08:00
* WIP: start adding meta tags

* Add meta tags

* Remove unused import

* Fix title tag missing bug
diff --git a/components/AppLayout/MetaTags.js b/components/AppLayout/MetaTags.js
@@ -1,5 +1,3 @@
-import Head from 'next/head'
-
 const MetaTags = ({
   title,
   description,
@@ -12,53 +10,50 @@ const MetaTags = ({
   // const titleTag = pageTitle ? pageTitle : metaTitle
   const metaDescription = description
     ? description
-    : 'Helium Explorer is an open source block explorer providing detailed blockchain data from the Helium network'
+    : 'Helium Explorer is a Block Explorer and Analytics Platform for Helium, a decentralized wireless connectivity platform'
   const metaImage = openGraphImageAbsoluteUrl
     ? openGraphImageAbsoluteUrl
     : 'https://explorer.helium.com/images/og/explorer.png'
   const metaUrl = url ? url : 'https://explorer.helium.com'
 
   return (
     <>
-      <Head>
-        {/* General Meta Tags */}
-        <meta charSet="utf-8" />
-        <link rel="icon" href="/favicon.png" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <link
-          rel="apple-touch-icon"
-          href="https://explorer.helium.com/logo192.png"
-        />
-        <link rel="manifest" href="https://explorer.helium.com/manifest.json" />
-
-        {/* Primary Meta Tags */}
-        {/* <title>{titleTag}</title> */}
-
-        {/* <meta name="title" content={metaTitle} /> */}
-        <meta name="description" content={metaDescription} />
-
-        {/* Item Props */}
-        <meta itemProp="name" content={metaTitle} />
-        <meta itemProp="description" content={metaDescription} />
-        <meta itemProp="image" content={metaDescription} />
-
-        {/* Twitter */}
-        <meta name="twitter:title" content={metaTitle} />
-        <meta name="twitter:description" content={metaDescription} />
-        <meta name="twitter:image:src" content={metaImage} />
-        <meta name="twitter:card" content="summary_large_image" />
-        <meta name="twitter:site" content="@helium" />
-
-        {/* Open Graph / Facebook */}
-        <meta name="og:title" content={metaTitle} />
-        <meta name="og:description" content={metaDescription} />
-        <meta name="og:image" content={metaImage} />
-        <meta name="og:url" content={metaUrl} />
-        <meta name="og:site_name" content="Helium Explorer" />
-        <meta name="og:locale" content="en_US" />
-        <meta name="og:type" content="website" />
-      </Head>
+      <meta charSet="utf-8" />
+      <link rel="icon" href="/favicon.png" />
+      <meta name="viewport" content="width=device-width, initial-scale=1" />
+      <meta name="theme-color" content="#000000" />
+      <link
+        rel="apple-touch-icon"
+        href="https://explorer.helium.com/logo192.png"
+      />
+      <link rel="manifest" href="https://explorer.helium.com/manifest.json" />
+
+      {/* Primary Meta Tags */}
+      {/* <title>{titleTag}</title> */}
+
+      {/* <meta name="title" content={metaTitle} /> */}
+      <meta name="description" content={metaDescription} />
+
+      {/* Item Props */}
+      <meta itemProp="name" content={metaTitle} />
+      <meta itemProp="description" content={metaDescription} />
+      <meta itemProp="image" content={metaDescription} />
+
+      {/* Twitter */}
+      <meta name="twitter:title" content={metaTitle} />
+      <meta name="twitter:description" content={metaDescription} />
+      <meta name="twitter:image:src" content={metaImage} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@helium" />
+
+      {/* Open Graph / Facebook */}
+      <meta name="og:title" content={metaTitle} />
+      <meta name="og:description" content={metaDescription} />
+      <meta name="og:image" content={metaImage} />
+      <meta name="og:url" content={metaUrl} />
+      <meta name="og:site_name" content="Helium Explorer" />
+      <meta name="og:locale" content="en_US" />
+      <meta name="og:type" content="website" />
     </>
   )
 }
diff --git a/components/InfoBox/AccountDetailsInfoBox.js b/components/InfoBox/AccountDetailsInfoBox.js
@@ -60,7 +60,7 @@ const AccountDetailsInfoBox = () => {
           : [{ title: 'Overview', path: '/' }]
       }
     >
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={`Account ${address.slice(0, 4)}...`}>
         <TabPane title="Overview" key="overview">
           {renderOverviewPane()}
         </TabPane>
diff --git a/components/InfoBox/AccountsInfoBox.js b/components/InfoBox/AccountsInfoBox.js
@@ -10,7 +10,7 @@ const AccountsInfoBox = () => {
 
   return (
     <InfoBox title="Accounts" metaTitle="Accounts">
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot="Accounts">
         <TabPane title="Overview" key="overview">
           <div />
         </TabPane>
diff --git a/components/InfoBox/BeaconsInfoBox.js b/components/InfoBox/BeaconsInfoBox.js
@@ -5,7 +5,7 @@ import BeaconsPane from './Beacons/BeaconsPane'
 const BeaconsInfoBox = () => {
   return (
     <InfoBox title="Beacons" metaTitle="Beacons">
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot="Beacons">
         <TabPane title="All Beacons">
           <BeaconsPane />
         </TabPane>
diff --git a/components/InfoBox/BlocksInfoBox.js b/components/InfoBox/BlocksInfoBox.js
@@ -8,7 +8,7 @@ import ElectionsPane from './Common/ElectionsPane'
 const BlocksInfoBox = () => {
   return (
     <InfoBox title={<I18n t="blocks.title" />} metaTitle="Blocks">
-      <TabNavbar basePath="blocks">
+      <TabNavbar basePath="blocks" htmlTitleRoot="Blocks">
         <TabPane title="Statistics" key="statistics">
           <BlockStatisticsPane />
         </TabPane>
diff --git a/components/InfoBox/CityDetailsInfoBox.js b/components/InfoBox/CityDetailsInfoBox.js
@@ -94,7 +94,7 @@ const CityDetailsInfoBox = () => {
       breadcrumbs={generateBreadcrumbs(selectedCity)}
       subtitles={generateSubtitles(selectedCity)}
     >
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={selectedCity?.longCity}>
         <TabPane title="Statistics" key="statistics">
           {isLoading ? (
             <SkeletonWidgets />
diff --git a/components/InfoBox/HexDetailsInfoBox.js b/components/InfoBox/HexDetailsInfoBox.js
@@ -68,7 +68,7 @@ const HexDetailsInfoBox = () => {
       breadcrumbs={[{ title: 'Hotspots', path: '/hotspots' }]}
       subtitles={generateSubtitles(hotspots?.[0])}
     >
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={`Hex ${index.slice(0, 5)}...`}>
         <TabPane title="Hotspots" key="hotspots">
           <div
             className={classNames(
diff --git a/components/InfoBox/HotspotDetailsInfoBox.js b/components/InfoBox/HotspotDetailsInfoBox.js
@@ -235,7 +235,7 @@ const HotspotDetailsInfoBox = ({ address, isLoading, hotspot }) => {
       subtitles={generateSubtitles(hotspot)}
       breadcrumbs={generateBreadcrumbs(hotspot)}
     >
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={`${animalHash(address)}`}>
         <TabPane title="Statistics" key="statistics">
           {isLoading ? (
             <SkeletonWidgets />
diff --git a/components/InfoBox/HotspotsInfoBox.js b/components/InfoBox/HotspotsInfoBox.js
@@ -9,7 +9,7 @@ import TopCitiesPane from './Hotspots/TopCitiesPane'
 const HotspotsInfoBox = () => {
   return (
     <InfoBox title={<I18n t="hotspots.title" />} metaTitle="Hotspots">
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={'Hotspots'}>
         <TabPane title="Statistics" key="statistics">
           <StatisticsPane />
         </TabPane>
diff --git a/components/InfoBox/MarketInfoBox.js b/components/InfoBox/MarketInfoBox.js
@@ -21,7 +21,7 @@ const MarketInfoBox = () => {
 
   return (
     <InfoBox title="Market" metaTitle="Market">
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={'Market'}>
         <TabPane title="Statistics" key="statistics">
           <InfoBoxPaneContainer>
             <TrendWidget
diff --git a/components/InfoBox/ValidatorDetailsInfoBox.js b/components/InfoBox/ValidatorDetailsInfoBox.js
@@ -78,7 +78,7 @@ const ValidatorDetailsInfoBox = () => {
       subtitles={generateSubtitles()}
       breadcrumbs={[{ title: 'Validators', path: '/validators/all' }]}
     >
-      <TabNavbar>
+      <TabNavbar htmlTitleRoot={`${animalHash(address)}`}>
         <TabPane title="Overview" key="overview">
           <OverviewPane />
         </TabPane>
diff --git a/components/InfoBox/ValidatorsInfoBox.js b/components/InfoBox/ValidatorsInfoBox.js
@@ -26,7 +26,7 @@ const ValidatorsInfoBox = () => {
 
   return (
     <InfoBox title="Validators" metaTitle="Validators">
-      <TabNavbar basePath="validators">
+      <TabNavbar basePath="validators" htmlTitleRoot="Validators">
         <TabPane title="Statistics" key="statistics">
           <InfoBoxPaneContainer>
             <Widget
diff --git a/components/Nav/TabNavbar.js b/components/Nav/TabNavbar.js
@@ -11,6 +11,7 @@ import classNames from 'classnames'
 import { castArray } from 'lodash'
 import { useScrollIndicators } from '../../hooks/useScrollIndicators'
 import ScrollIndicator from '../../hooks/useScrollIndicators'
+import { Helmet } from 'react-helmet'
 
 const NavItem = ({
   title,
@@ -65,7 +66,12 @@ const NavItem = ({
   )
 }
 
-const TabNavbar = ({ centered = false, className, children }) => {
+const TabNavbar = ({
+  centered = false,
+  className,
+  htmlTitleRoot,
+  children,
+}) => {
   const scrollContainer = useRef(null)
 
   const {
@@ -167,6 +173,11 @@ const TabNavbar = ({ centered = false, className, children }) => {
             exact
             path={pane.props.path ? `${path}/${pane.props.path}` : path}
           >
+            <Helmet>
+              <title>{`${htmlTitleRoot ? `${htmlTitleRoot} – ` : ''}${
+                pane.props.title
+              }`}</title>
+            </Helmet>
             {pane}
           </Route>
         ))}
diff --git a/pages/_document.js b/pages/_document.js
@@ -0,0 +1,25 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import MetaTags from '../components/AppLayout/MetaTags'
+
+class ExplorerDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <MetaTags />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default ExplorerDocument
diff --git a/pages/index.js b/pages/index.js
@@ -1,16 +1,15 @@
 import React from 'react'
 import dynamic from 'next/dynamic'
 import { useHistory, useLocation } from 'react-router'
-import { Helmet } from 'react-helmet'
 import Header from '../components/Nav/Header'
 import Page from '../components/CoverageMap/Page'
-import MetaTags from '../components/AppLayout/MetaTags'
 import MapLayersBox from '../components/Map/MapLayersBox'
 import InfoBoxSwitch from '../components/InfoBox/InfoBoxSwitch'
 import useKeydown from '../hooks/useKeydown'
 import useGA from '../hooks/useGA'
 import Head from 'next/head'
 import mapboxglSupported from '@mapbox/mapbox-gl-supported'
+import { Helmet } from 'react-helmet'
 
 const mapSupported = mapboxglSupported.supported()
 
@@ -44,15 +43,8 @@ export const Index = ({ coverageUrl }) => {
           rel="stylesheet"
         />
       </Head>
-      <MetaTags
-        description={`View an interactive map of the Helium network and all the hotspots currently active around the world`}
-        openGraphImageAbsoluteUrl={
-          'https://explorer.helium.com/images/og/coverage.png'
-        }
-        url={'https://explorer.helium.com/coverage'}
-      />
       <Helmet>
-        <title>Helium Explorer</title>
+        <title data-react-helmet="true">Helium Explorer</title>
       </Helmet>
       <Header activeNav="coverage" />
       {mapSupported && <Map coverageUrl={coverageUrl} />}

Original file line number	Diff line number	Diff line change
`@@ -60,7 +60,7 @@ const AccountDetailsInfoBox = () => {`
`60`	`60`	`: [{ title: 'Overview', path: '/' }]`
`61`	`61`	`}`
`62`	`62`	`>`
`63`		`- <TabNavbar>`
	`63`	+ <TabNavbar htmlTitleRoot={`Account ${address.slice(0, 4)}...`}>
`64`	`64`	`<TabPane title="Overview" key="overview">`
`65`	`65`	`{renderOverviewPane()}`
`66`	`66`	`</TabPane>`
Original file line number	Diff line number	Diff line change
`@@ -94,7 +94,7 @@ const CityDetailsInfoBox = () => {`
`94`	`94`	`breadcrumbs={generateBreadcrumbs(selectedCity)}`
`95`	`95`	`subtitles={generateSubtitles(selectedCity)}`
`96`	`96`	`>`
`97`		`- <TabNavbar>`
	`97`	`+ <TabNavbar htmlTitleRoot={selectedCity?.longCity}>`
`98`	`98`	`<TabPane title="Statistics" key="statistics">`
`99`	`99`	`{isLoading ? (`
`100`	`100`	`<SkeletonWidgets />`
Original file line number	Diff line number	Diff line change
`@@ -68,7 +68,7 @@ const HexDetailsInfoBox = () => {`
`68`	`68`	`breadcrumbs={[{ title: 'Hotspots', path: '/hotspots' }]}`
`69`	`69`	`subtitles={generateSubtitles(hotspots?.[0])}`
`70`	`70`	`>`
`71`		`- <TabNavbar>`
	`71`	+ <TabNavbar htmlTitleRoot={`Hex ${index.slice(0, 5)}...`}>
`72`	`72`	`<TabPane title="Hotspots" key="hotspots">`
`73`	`73`	`<div`
`74`	`74`	`className={classNames(`
Original file line number	Diff line number	Diff line change
`@@ -235,7 +235,7 @@ const HotspotDetailsInfoBox = ({ address, isLoading, hotspot }) => {`
`235`	`235`	`subtitles={generateSubtitles(hotspot)}`
`236`	`236`	`breadcrumbs={generateBreadcrumbs(hotspot)}`
`237`	`237`	`>`
`238`		`- <TabNavbar>`
	`238`	+ <TabNavbar htmlTitleRoot={`${animalHash(address)}`}>
`239`	`239`	`<TabPane title="Statistics" key="statistics">`
`240`	`240`	`{isLoading ? (`
`241`	`241`	`<SkeletonWidgets />`