Merge pull request #2536 from airqo-platform/website-doc-readme

website: Add GA tag to header for google search console indexing
airqo-platform · Feb 27, 2025 · 0d8b950 · 0d8b950
2 parents 09d3e67 + ef4baf4
commit 0d8b950
Showing 1 changed file with 46 additions and 11 deletions.
diff --git a/src/website2/src/app/layout.tsx b/src/website2/src/app/layout.tsx
@@ -1,7 +1,7 @@
 import './globals.css';
 
-import dynamic from 'next/dynamic';
 import localFont from 'next/font/local';
+import Script from 'next/script';
 import { ReactNode, Suspense } from 'react';
 
 import EngagementDialog from '@/components/dialogs/EngagementDialog';
@@ -12,11 +12,6 @@ import { checkMaintenance } from '@/lib/maintenance';
 
 import MaintenancePage from './MaintenancePage';
 
-// Load the GA component dynamically, disabling SSR so that it runs only on the client.
-const GoogleAnalytics = dynamic(() => import('@/components/GoogleAnalytics'), {
-  ssr: false,
-});
-
 const interFont = localFont({
   src: [
     {
@@ -38,19 +33,59 @@ export default async function RootLayout({
 }: {
   children: ReactNode;
 }) {
+  const GA_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || 'G-79ZVCLEDSG';
+  const siteUrl = 'https://airqo.net/';
+  const title = 'AirQo | Bridging the Air Quality Data Gap in Africa';
+  const description =
+    'AirQo is transforming air quality management in Africa by providing low-cost sensors, real-time data, and actionable insights to help communities and organizations improve air quality.';
+
   const maintenance = await checkMaintenance();
-  const GA_MEASUREMENT_ID =
-    process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID || 'G-79ZVCLEDSG';
 
   return (
     <html lang="en" className={interFont.variable}>
+      <head>
+        {/* Primary SEO */}
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta
+          name="keywords"
+          content="AirQo, air quality, sensors, data, real-time monitoring, Africa"
+        />
+        <meta name="author" content="AirQo" />
+        <meta name="robots" content="index, follow" />
+
+        {/* Open Graph / Facebook */}
+        <meta property="og:type" content="website" />
+        <meta property="og:url" content={siteUrl} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+
+        {/* Twitter */}
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:url" content={siteUrl} />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={description} />
+
+        {/* GA snippet must appear in <head> for Search Console verification */}
+        <Script
+          src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
+          strategy="beforeInteractive"
+        />
+        <Script id="ga-init" strategy="beforeInteractive">
+          {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){ dataLayer.push(arguments); }
+          gtag('js', new Date());
+          gtag('config', '${GA_ID}', {
+            page_path: window.location.pathname,
+          });
+        `}
+        </Script>
+      </head>
       <body>
         <ErrorBoundary>
           <ReduxDataProvider>
             <Suspense fallback={<Loading />}>
-              {/* Initialize & Track Google Analytics only on the client */}
-              <GoogleAnalytics measurementId={GA_MEASUREMENT_ID} />
-
               {maintenance.isActive ? (
                 <MaintenancePage message={maintenance.message} />
               ) : (