Feat: seo improvements (#803)

* seo improvements
MobilityData · Nov 11, 2024 · 8208e0a · 8208e0a
1 parent b680fda
commit 8208e0a
Show file tree

Hide file tree

Showing 29 changed files with 474 additions and 185 deletions.
diff --git a/web-app/package.json b/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",

diff --git a/web-app/public/index.html b/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">

diff --git a/web-app/public/locales/en/feeds.json b/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"
 }
diff --git a/web-app/src/app/components/Footer.tsx b/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={() => {

diff --git a/web-app/src/app/components/Header.tsx b/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'

diff --git a/web-app/src/app/screens/About.tsx b/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

diff --git a/web-app/src/app/screens/Analytics/GBFSFeedAnalytics/index.tsx b/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 && (

diff --git a/web-app/src/app/screens/Analytics/GBFSNoticeAnalytics/index.tsx b/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 && (

diff --git a/web-app/src/app/screens/Analytics/GBFSVersionAnalytics/index.tsx b/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 && (

diff --git a/web-app/src/app/screens/Analytics/GTFSFeatureAnalytics/index.tsx b/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 && (

diff --git a/web-app/src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx b/web-app/src/app/screens/Analytics/GTFSFeedAnalytics/index.tsx
@@ -306,7 +306,12 @@ export default function GTFSFeedAnalytics(): 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 Feeds Metrics{' '}
       </Typography>
       {error != null && (

diff --git a/web-app/src/app/screens/Analytics/GTFSNoticeAnalytics/index.tsx b/web-app/src/app/screens/Analytics/GTFSNoticeAnalytics/index.tsx
@@ -267,7 +267,12 @@ export default function GTFSNoticeAnalytics(): 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 Notices Metrics{' '}
       </Typography>
       {error != null && (

diff --git a/web-app/src/app/screens/ContactUs.tsx b/web-app/src/app/screens/ContactUs.tsx
@@ -50,7 +50,12 @@ export default function ContactUs(): React.ReactElement {
   return (
     <Container component='main'>
       <Box sx={{ maxWidth: '1000px', width: '100%', mx: 'auto' }}>
-        <Typography variant='h4' color='primary' sx={{ fontWeight: 700 }}>
+        <Typography
+          component='h1'
+          variant='h4'
+          color='primary'
+          sx={{ fontWeight: 700 }}
+        >
           {t('title')}
         </Typography>
         <Box

diff --git a/web-app/src/app/screens/FAQ.tsx b/web-app/src/app/screens/FAQ.tsx
@@ -18,7 +18,12 @@ export default function FAQ(): React.ReactElement {
           flexDirection: 'column',
         }}
       >
-        <Typography variant='h4' color='primary' sx={{ fontWeight: 700 }}>
+        <Typography
+          component='h1'
+          variant='h4'
+          color='primary'
+          sx={{ fontWeight: 700 }}
+        >
           Frequently Asked Questions (FAQ){' '}
         </Typography>
         <Box

diff --git a/web-app/src/app/screens/Feed/AssociatedFeeds.tsx b/web-app/src/app/screens/Feed/AssociatedFeeds.tsx
@@ -7,7 +7,6 @@ import {
   TableContainer,
   TableRow,
   Typography,
-  colors,
 } from '@mui/material';
 import {
   type GTFSFeedType,
@@ -33,35 +32,32 @@ const renderAssociatedGTFSFeedRow = (
   return (
     <TableRow
       key={assocFeed?.id}
+      component={'a'}
+      href={`/feeds/${assocFeed?.id}`}
       sx={{
-        '&:hover': {
-          backgroundColor: colors.grey[200],
+        textDecoration: 'none',
+        '&:hover, &:focus': {
+          backgroundColor: theme.palette.background.paper,
         },
       }}
     >
-      <a
-        href={`/feeds/${assocFeed?.id}`}
-        rel='noreferrer'
-        style={{ display: 'contents' }}
+      <TableCell sx={{ paddingLeft: 0 }}>
+        {!hasFeedName && noLatestDataset
+          ? 'GTFS Schedule feed'
+          : hasFeedName
+            ? assocFeed.feed_name
+            : ''}
+      </TableCell>
+      <TableCell
+        sx={{ paddingRight: 0, paddingLeft: hasFeedName ? 'initial' : 0 }}
       >
-        <TableCell sx={{ paddingLeft: 0 }}>
-          {!hasFeedName && noLatestDataset
-            ? 'GTFS Schedule feed'
-            : hasFeedName
-              ? assocFeed.feed_name
-              : ''}
-        </TableCell>
-        <TableCell
-          sx={{ paddingRight: 0, paddingLeft: hasFeedName ? 'initial' : 0 }}
-        >
-          {assocFeed.latest_dataset?.downloaded_at !== undefined && (
-            <span style={{ display: 'flex' }}>
-              Last updated on{' '}
-              {new Date(assocFeed.latest_dataset?.downloaded_at).toDateString()}
-            </span>
-          )}
-        </TableCell>
-      </a>
+        {assocFeed.latest_dataset?.downloaded_at !== undefined && (
+          <span style={{ display: 'flex' }}>
+            Last updated on{' '}
+            {new Date(assocFeed.latest_dataset?.downloaded_at).toDateString()}
+          </span>
+        )}
+      </TableCell>
     </TableRow>
   );
 };
@@ -76,38 +72,35 @@ const renderAssociatedGTFSRTFeedRow = (
     assocGTFSRTFeed.feed_name !== undefined && assocGTFSRTFeed.feed_name !== '';
   return (
     <TableRow
+      href={`/feeds/${assocGTFSRTFeed?.id}`}
       key={assocGTFSRTFeed?.id}
+      component={'a'}
       sx={{
-        '&:hover': {
-          backgroundColor: colors.grey[200],
+        textDecoration: 'none',
+        '&:hover, &:focus': {
+          backgroundColor: theme.palette.background.paper,
         },
       }}
     >
-      <a
-        href={`/feeds/${assocGTFSRTFeed?.id}`}
-        rel='noreferrer'
-        style={{ display: 'contents' }}
-      >
-        <TableCell sx={{ paddingLeft: 0 }}>
-          {hasFeedName ? assocGTFSRTFeed.feed_name : assocGTFSRTFeed.provider}
+      <TableCell sx={{ paddingLeft: 0 }}>
+        {hasFeedName ? assocGTFSRTFeed.feed_name : assocGTFSRTFeed.provider}
+      </TableCell>
+      {assocGTFSRTFeed.entity_types !== undefined && (
+        <TableCell
+          sx={{ paddingRight: 0, paddingLeft: hasFeedName ? 'initial' : 0 }}
+        >
+          {assocGTFSRTFeed.entity_types
+            .map(
+              (entityType) =>
+                ({
+                  tu: 'Trip Updates',
+                  vp: 'Vehicle Positions',
+                  sa: 'Service Alerts',
+                })[entityType],
+            )
+            .join(' and ')}
         </TableCell>
-        {assocGTFSRTFeed.entity_types !== undefined && (
-          <TableCell
-            sx={{ paddingRight: 0, paddingLeft: hasFeedName ? 'initial' : 0 }}
-          >
-            {assocGTFSRTFeed.entity_types
-              .map(
-                (entityType) =>
-                  ({
-                    tu: 'Trip Updates',
-                    vp: 'Vehicle Positions',
-                    sa: 'Service Alerts',
-                  })[entityType],
-              )
-              .join(' and ')}
-          </TableCell>
-        )}
-      </a>
+      )}
     </TableRow>
   );
 };