Feat: seo improvements (#803)

* seo improvements

Author: Alessandro100

web-app/package.json

@@ -37,6 +37,7 @@
     "react-dom": "^17.0.0 || ^18.0.0",
     "react-ga4": "^2.1.0",
     "react-google-recaptcha": "^3.1.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.52.1",
     "react-i18next": "^14.1.2",
     "react-leaflet": "^4.2.1",

web-app/public/index.html

@@ -24,7 +24,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap" rel="stylesheet">

web-app/public/locales/en/feeds.json

@@ -82,5 +82,6 @@
   "oldVehiclePositionsFeed": "Old Vehicle Positions feed link",
   "relatedGtfsScheduleFeed": "Link to related GTFS Schedule feed",
   "isAuthRequired": "Is authentication required for the feed?",
-  "isAuthRequiredDetails": " Select \"Yes\" if a user has to login or provide credentials to download the feed"
+  "isAuthRequiredDetails": " Select \"Yes\" if a user has to login or provide credentials to download the feed",
+  "detailPageDescription": "Explore the {{formattedName}} {{dataTypeVerbose}} feed details with access to a quality data insights"
 }

web-app/src/app/components/Footer.tsx

@@ -35,6 +35,7 @@ const Footer: React.FC = () => {
       </a>
       <div style={{ margin: 0, display: 'flex', justifyContent: 'center' }}>
         <IconButton
+          aria-label='twitter'
           className='link-button'
           color='primary'
           onClick={() => {
@@ -44,6 +45,7 @@ const Footer: React.FC = () => {
           <TwitterIcon />
         </IconButton>
         <IconButton
+          aria-label='slack'
           className='link-button'
           color='primary'
           onClick={() => {
@@ -53,6 +55,7 @@ const Footer: React.FC = () => {
           <FontAwesomeIcon icon={faSlack} />
         </IconButton>
         <IconButton
+          aria-label='linkedin'
           className='link-button'
           color='primary'
           onClick={() => {
@@ -62,6 +65,7 @@ const Footer: React.FC = () => {
           <LinkedIn />
         </IconButton>
         <IconButton
+          aria-label='github'
           className='link-button'
           color='primary'
           onClick={() => {

web-app/src/app/components/Header.tsx

@@ -383,7 +383,10 @@ export default function DrawerAppBar(): React.ReactElement {
               }}
               className='btn-link'
             >
-              <Avatar src='/assets/MOBILTYDATA_logo_purple_M.png'></Avatar>
+              <Avatar
+                alt='MobilityData logo'
+                src='/assets/MOBILTYDATA_logo_purple_M.png'
+              ></Avatar>
               <Typography
                 variant='h5'
                 component='div'

web-app/src/app/screens/About.tsx

@@ -17,7 +17,12 @@ export default function About(): React.ReactElement {
           flexDirection: 'column',
         }}
       >
-        <Typography variant='h4' color='primary' sx={{ fontWeight: 700 }}>
+        <Typography
+          component='h1'
+          variant='h4'
+          color='primary'
+          sx={{ fontWeight: 700 }}
+        >
           About{' '}
         </Typography>
         <Box

web-app/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx

@@ -277,7 +277,12 @@ export default function GBFSFeedAnalytics(): React.ReactElement {
 
   return (
     <Box sx={{ mx: 6 }}>
-      <Typography variant='h4' color='primary' sx={{ fontWeight: 700, mb: 2 }}>
+      <Typography
+        component='h1'
+        variant='h4'
+        color='primary'
+        sx={{ fontWeight: 700, mb: 2 }}
+      >
         GBFS Feeds Metrics
       </Typography>
       {error != null && (

web-app/src/app/screens/Analytics/GBFSNoticeAnalytics/index.tsx

@@ -213,7 +213,12 @@ export default function GBFSNoticeAnalytics(): React.ReactElement {
 
   return (
     <Box sx={{ mx: 6 }}>
-      <Typography variant='h4' color='primary' sx={{ fontWeight: 700, mb: 2 }}>
+      <Typography
+        component='h1'
+        variant='h4'
+        color='primary'
+        sx={{ fontWeight: 700, mb: 2 }}
+      >
         GBFS Notices Metrics
       </Typography>
       {error != null && (

web-app/src/app/screens/Analytics/GBFSVersionAnalytics/index.tsx

@@ -228,7 +228,12 @@ export default function GBFSVersionAnalytics(): React.ReactElement {
 
   return (
     <Box sx={{ mx: 6 }}>
-      <Typography variant='h4' color='primary' sx={{ fontWeight: 700, mb: 2 }}>
+      <Typography
+        component='h1'
+        variant='h4'
+        color='primary'
+        sx={{ fontWeight: 700, mb: 2 }}
+      >
         GBFS Versions Metrics{' '}
       </Typography>
       {error != null && (

web-app/src/app/screens/Analytics/GTFSFeatureAnalytics/index.tsx

@@ -261,7 +261,12 @@ export default function GTFSFeatureAnalytics(): React.ReactElement {
 
   return (
     <Box sx={{ mx: 6 }}>
-      <Typography variant='h4' color='primary' sx={{ fontWeight: 700, mb: 2 }}>
+      <Typography
+        component='h1'
+        variant='h4'
+        color='primary'
+        sx={{ fontWeight: 700, mb: 2 }}
+      >
         GTFS Features Metrics{' '}
       </Typography>
       {error != null && (