feat: add comprehensive meta tags and fix Google Analytics implementation

Author: rreyn-bruno

src/components/google-analytics.tsx

@@ -1,25 +1,45 @@
 "use client";
 
 import Script from "next/script";
+import { usePathname, useSearchParams } from 'next/navigation';
 import { useEffect } from "react";
 
+const GA_MEASUREMENT_ID = "G-ZZBSKJSFZ8";
+
 const GoogleAnalytics = () => {
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+
   useEffect(() => {
-    if (typeof window !== "undefined") {
-      window.dataLayer = window.dataLayer || [];
-      const gtag = (...args: any[]) => {
-        window.dataLayer.push(args);
-      };
-      gtag("js", new Date());
-      gtag("config", "G-ZZBSKJSFZ8");
+    if (typeof window !== "undefined" && window.gtag) {
+      window.gtag('config', GA_MEASUREMENT_ID, {
+        page_path: pathname + (searchParams?.toString() ? `?${searchParams.toString()}` : ''),
+        send_page_view: true
+      });
     }
-  }, []);
+  }, [pathname, searchParams]);
 
   return (
-    <Script
-      async
-      src="https://www.googletagmanager.com/gtag/js?id=G-ZZBSKJSFZ8"
-    />
+    <>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+      >
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '${GA_MEASUREMENT_ID}', {
+            page_path: window.location.pathname + window.location.search,
+            send_page_view: true
+          });
+        `}
+      </Script>
+    </>
   );
 };
 

theme.config.tsx

@@ -14,10 +14,27 @@ const config: DocsThemeConfig = {
   head: (
     <>
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-      <meta property="og:title" content="Bruno Docs" />
-      <meta property="og:description" content="The open-source API Client" />
+      <meta name="description" content="Bruno is a fast and git-friendly open source API client, helping developers test and manage APIs efficiently." />
+      <meta name="keywords" content="API client, API testing, Postman alternative, REST client, GraphQL client, SOAP client, API development, git-friendly API client" />
+      <meta name="robots" content="index, follow" />
+      
+      {/* Open Graph */}
+      <meta property="og:title" content="Bruno - The Open Source API Client" />
+      <meta property="og:description" content="Fast and git-friendly open source API client for testing and managing APIs" />
+      <meta property="og:type" content="website" />
+      <meta property="og:url" content="https://docs.usebruno.com" />
+      <meta property="og:image" content="https://docs.usebruno.com/bruno.png" />
+      <meta property="og:site_name" content="Bruno Docs" />
+      
+      {/* Twitter Card */}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content="Bruno - The Open Source API Client" />
+      <meta name="twitter:description" content="Fast and git-friendly open source API client for testing and managing APIs" />
+      <meta name="twitter:image" content="https://docs.usebruno.com/bruno.png" />
+      
       <link href="/bruno.png" rel="icon" type="image/png" sizes="32x32" />
       <link href="/bruno.png" rel="apple-touch-icon" type="image/png" sizes="32x32" />
+      <link rel="canonical" href="https://docs.usebruno.com" />
     </>
   ),
   navbar: {