Added title & meta description + image for all plages

packages/website/package.json

@@ -53,6 +53,7 @@
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.3",
     "react-ga4": "^2.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.41.5",
     "react-jwt": "^1.1.8",
     "react-leaflet": "^2.7.0",

packages/website/src/index.tsx

@@ -9,6 +9,7 @@ import { decodeToken } from 'react-jwt';
 import { Provider } from 'react-redux';
 import { SnackbarProvider } from 'notistack';
 import { getAuth, onAuthStateChanged } from 'firebase/auth';
+import { HelmetProvider } from 'react-helmet-async';
 import App from './layout/App';
 import { store } from './store/configure';
 import * as serviceWorker from './serviceWorker';
@@ -57,7 +58,9 @@ ReactDOM.render(
   <>
     <Provider store={store}>
       <SnackbarProvider maxSnack={3}>
-        <App />
+        <HelmetProvider>
+          <App />
+        </HelmetProvider>
       </SnackbarProvider>
     </Provider>
   </>,

packages/website/src/routes/About/index.tsx

@@ -7,17 +7,40 @@ import {
   CardMedia,
 } from '@material-ui/core';
 import classNames from 'classnames';
+import { Helmet } from 'react-helmet-async';
 
 import NavBar from 'common/NavBar';
 import Footer from 'common/Footer';
 
+import Startpage from '../../assets/img/helmet/Startpage.jpg';
 import peter from '../../assets/img/peter.jpg';
 import caesar from '../../assets/img/caesar.jpg';
 import eric from '../../assets/img/eric.jpg';
 
 const About = ({ classes }: AboutProps) => {
   return (
     <>
+      <Helmet>
+        <title>About Us - Aqualink</title>
+        <meta
+          name="description"
+          content="Learn about Aqualink's mission, our team,
+         and our efforts in ocean conservation technology."
+        />
+        <meta property="og:image" content={Startpage} />
+        <meta
+          property="og:image:alt"
+          content="This image displays the interactive 
+        Aqualink map and the Aqualink dashboard, which are the main two parts of 
+        the Aqualink platform for coastal ocean monitoring. You can explore all of 
+        the Aqualink sites around the globe in the interactive map. The map has four 
+        layers where you can toggle between standard view, heat stress, sea surface 
+        temperature, and SST Anomaly. Each site has a dashboard that allows you to 
+        monitor your reef. It includes a map, survey feature, satellite data with 
+        wind, wave, and temperature data, heat stress alerts for coral bleaching, 
+        and graphs. "
+        />
+      </Helmet>
       <NavBar searchLocation={false} />
       <div>
         <div className="page-container">

packages/website/src/routes/Buoy/index.tsx

@@ -6,16 +6,39 @@ import {
   Typography,
   Theme,
 } from '@material-ui/core';
+import { Helmet } from 'react-helmet-async';
 
 import NavBar from 'common/NavBar';
 import Footer from 'common/Footer';
 
 import fullDiagramBuoy from '../../assets/img/fulldiag3_1.svg';
 import fullDiagramInfra from '../../assets/img/fulldiag3.svg';
+import buoy from '../../assets/img/landing-page/buoy.jpg';
 
 const Buoy = ({ classes }: BuoyProps) => {
   return (
     <>
+      <Helmet>
+        <title>
+          Aqualink Smart Buoy | Real-time seafloor &amp; sea surface temperature
+          &amp; sea surface temperature
+        </title>
+        <meta
+          name="description"
+          content="Aqualink's solar-powered smart 
+        buoys collect temperature, wind & wave. Measuring real-time data from 
+        seafloor and sea surface. Monitor marine ecosystems."
+        />
+        <meta property="og:image" content={buoy} />
+        <meta
+          property="og:image:alt"
+          content="This image displays the 
+        Aqualink Smart Buoy which is also known as Smart Mooring Spotter. This 
+        Smart buoy is powered by solar panels and transmits data in real-time over 
+        the air. It collects wind, wave, barometric pressure and temperature 
+        from seafloor and sea surface."
+        />
+      </Helmet>
       <NavBar searchLocation={false} />
       <div className={classes.root} id="bloc-6">
         <div className="container bloc-md">

packages/website/src/routes/Drones/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Box } from '@material-ui/core';
+import { Helmet } from 'react-helmet-async';
 
 import NavBar from 'common/NavBar';
 import Footer from 'common/Footer';
@@ -16,6 +17,21 @@ import dronebottom from '../../assets/img/dronebottom.jpg';
 
 const Drones = () => (
   <>
+    <Helmet>
+      <title>Aqualink Drone | An Autonomous Surface Vehicle</title>
+      <meta
+        name="description"
+        content="Explore Aqualink's underwater drone 
+      technology for ocean conservation, monitoring marine ecosystems to help 
+      protect and preserve our oceans."
+      />
+      <meta property="og:image" content={dronepersp} />
+      <meta
+        property="og:image:alt"
+        content="This image display the Aqualink drone, 
+      which is an affordable Autonomous Surface Vehicle (ASV)"
+      />
+    </Helmet>
     <NavBar searchLocation={false} />
     <Box py={6}>
       {/* Main container */}

packages/website/src/routes/Faq/index.tsx

@@ -6,13 +6,35 @@ import {
   Typography,
   CardMedia,
 } from '@material-ui/core';
+import { Helmet } from 'react-helmet-async';
 
 import NavBar from 'common/NavBar';
 import Footer from 'common/Footer';
 
+import Dashboard from '../../assets/img/helmet/Dashboard.jpg';
+
 const Faq = ({ classes }: FaqProps) => {
   return (
     <>
+      <Helmet>
+        <title>
+          Aqualink FAQ | Common Questions About Our Ocean Monitoring Platform
+        </title>
+        <meta
+          name="description"
+          content="Answers to frequently asked questions about 
+        Aqualink's real-time ocean monitoring system, reef data, how to use the 
+        platform, and how to monitor your reef."
+        />
+        <meta property="og:image" content={Dashboard} />
+        <meta
+          property="og:image:alt"
+          content="The images display the Aqualink 
+        dashboard, which allows you to monitor your reef. It includes a map, 
+        survey feature, satellite data with wind, wave, and temperature data, 
+        heat stress alerts for coral bleaching, and graphs."
+        />
+      </Helmet>
       <NavBar searchLocation={false} />
       <div>
         {/* Main container */}

packages/website/src/routes/HomeMap/index.tsx

@@ -9,6 +9,7 @@ import {
   withStyles,
   WithStyles,
 } from '@material-ui/core';
+import { Helmet } from 'react-helmet-async';
 import SwipeableBottomSheet from 'react-swipeable-bottom-sheet';
 import { sitesRequest, sitesListSelector } from 'store/Sites/sitesListSlice';
 import { siteRequest } from 'store/Sites/selectedSiteSlice';
@@ -20,6 +21,8 @@ import HomepageNavBar from 'common/NavBar';
 import SiteTable from './SiteTable';
 import HomepageMap from './Map';
 
+import Map from '../../assets/img/helmet/Map.jpg';
+
 enum QueryParamKeys {
   SITE_ID = 'site_id',
   ZOOM_LEVEL = 'zoom',
@@ -105,6 +108,27 @@ const Homepage = ({ classes }: HomepageProps) => {
 
   return (
     <>
+      <Helmet>
+        <title>
+          Aqualink Map | Interactive Ocean Monitoring for Marine Ecosystems
+        </title>
+        <meta
+          name="description"
+          content="Aqualink's interactive map displays live 
+        ocean data for reef health and ocean temperatures globally. View ocean Heat 
+        Stress, Heatwave, and SST Anomaly."
+        />
+        <meta property="og:image" content={Map} />
+        <meta
+          property="og:image:alt"
+          content="This image displays the interactive Aqualink 
+        map where you can explore all of the Aqualink sites around the globe. Each site has 
+        a dashboard where site managers monitor their local reefs with in situ data and 
+        survey collections combined with satellite data. The map has four layers where you 
+        can toggle between standard view, heat stress, sea surface temperature, and SST 
+        Anomaly."
+        />
+      </Helmet>
       <div role="presentation" onClick={isDrawerOpen ? toggleDrawer : () => {}}>
         <HomepageNavBar searchLocation geocodingEnabled />
       </div>

packages/website/src/routes/Landing/index.tsx

@@ -16,6 +16,7 @@ import {
 } from '@material-ui/core';
 import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
 import { Link } from 'react-router-dom';
+import { Helmet } from 'react-helmet-async';
 
 import classNames from 'classnames';
 import NavBar from 'common/NavBar';
@@ -25,6 +26,8 @@ import Card from './Card';
 import landingPageImage from '../../assets/img/landing-page/header.jpg';
 import { cardTitles } from './titles';
 
+import Startpage from '../../assets/img/helmet/Startpage.jpg';
+
 interface LandingPageButton {
   label: string;
   to: string;
@@ -73,6 +76,30 @@ const LandingPage = ({ classes }: LandingPageProps) => {
 
   return (
     <>
+      <Helmet>
+        <title>
+          Aqualink Ocean Monitoring for Marine Ecosystems. Free &amp; open
+        </title>
+        <meta
+          name="description"
+          content="Aqualink is a data management platform 
+        for marine ecosystems. Integrate data from sensors and surveys to give 
+        you an instant view of your ecosystem. Free"
+        />
+        <meta property="og:image" content={Startpage} />
+        <meta
+          property="og:image:alt"
+          content="This image displays the interactive 
+        Aqualink map and the Aqualink dashboard, which are the main two parts of 
+        the Aqualink platform for coastal ocean monitoring. You can explore all of 
+        the Aqualink sites around the globe in the interactive map. The map has 
+        four layers where you can toggle between standard view, heat stress, sea 
+        surface temperature, and SST Anomaly. Each site has a dashboard that allows 
+        you to monitor your reef. It includes a map, survey feature, satellite data 
+        with wind, wave, and temperature data, heat stress alerts for coral 
+        bleaching, and graphs."
+        />
+      </Helmet>
       <NavBar routeButtons searchLocation={false} />
       {scrollPosition === 0 && isMobile && (
         <Box

packages/website/src/routes/RegisterSite/index.tsx

@@ -20,6 +20,7 @@ import {
 } from '@material-ui/core';
 import Alert from '@material-ui/lab/Alert';
 import { useSelector, useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
 
 import { userInfoSelector, getSelf } from 'store/User/userSlice';
 import validators from 'helpers/validators';
@@ -30,6 +31,8 @@ import SignInDialog from 'common/SignInDialog';
 import siteServices from 'services/siteServices';
 import LocationMap from './LocationMap';
 
+import Dashboard from '../../assets/img/helmet/Dashboard.jpg';
+
 interface FormElement {
   id: string;
   label: string;
@@ -173,6 +176,25 @@ const Apply = ({ classes }: ApplyProps) => {
   return (
     <>
       {newSiteId && <Navigate to={`/sites/${newSiteId}`} replace />}
+      <Helmet>
+        <title>
+          Register sites on Aqualink and receive dashboards with real-time data
+        </title>
+        <meta
+          name="description"
+          content="Register the reef you want to monitor 
+        in 1 minute. Your dashboard will come with real-time temperature, wind, 
+        and wave data. Add surveys and data publicly."
+        />
+        <meta property="og:image" content={Dashboard} />
+        <meta
+          property="og:image:alt"
+          content="The images display the Aqualink 
+        dashboard, which allows you to monitor your reef. It includes a map, 
+        survey feature, satellite data with wind, wave, and temperature data, 
+        heat stress alerts for coral bleaching, and graphs."
+        />
+      </Helmet>
       <NavBar searchLocation={false} />
       <Box className={classes.boxBar} height="100%" pt={4}>
         <Container>