feat : SEO Optimizations

Author: decoded-cipher

client/components/AppHeader.vue

@@ -3,13 +3,13 @@
     <div class="container mx-auto px-6 py-4 flex items-center justify-between">
       <!-- Logo -->
       <div class="flex-shrink-0">
-        <div class="text-primary">
-          <div class="font-bold text-2xl leading-tight tracking-tight">ALPHA</div>
-          <div class="flex items-baseline">
-            <span class="text-base leading-tight tracking-tight">ARENA</span>
-            <span class="text-xs text-secondary ml-2 font-normal">by Nof1</span>
-          </div>
-        </div>
+        <NuxtLink to="/" class="flex items-center">
+          <img 
+            :src="logoPath" 
+            alt="AI Trading Dashboard Logo" 
+            class="h-10 w-auto"
+          />
+        </NuxtLink>
       </div>
 
       <!-- Navigation Links -->
@@ -37,11 +37,11 @@
           class="p-2 border border-mono-border hover:bg-mono-hover transition-colors text-primary"
           aria-label="Toggle theme"
         >
-          <svg v-if="isDark" class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364 6.364l-1.591 1.591M21 12H18.75m-3.75-3.75H21m-4.773 4.773l-1.591 1.591M12 18.75V21m-4.773-4.773l-1.591-1.591M5.25 12H3m3.75-3.75H3m3.659 1.591l-1.591-1.591m0 0L5.25 5.25m13.364 13.364L18.75 18.75" />
+          <svg v-if="isDark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
           </svg>
-          <svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="1.5">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
+          <svg v-if="!isDark" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
           </svg>
         </button>
       </div>
@@ -51,6 +51,10 @@
 
 <script setup lang="ts">
 const { isDark, toggleTheme } = useTheme()
+
+const logoPath = computed(() => {
+  return isDark.value ? '/logo-white.png' : '/logo-black.png'
+})
 </script>
 
 <style scoped>

client/composables/useSeoSchema.ts

@@ -0,0 +1,60 @@
+export const useSeoSchema = () => {
+  const config = useRuntimeConfig()
+  const siteUrl = config.public.site.url
+
+  const generateOrganizationSchema = () => {
+    if (!siteUrl) {
+      console.warn('NUXT_PUBLIC_SITE_URL is not set, skipping organization schema')
+      return null
+    }
+
+    return {
+      "@context": "https://schema.org",
+      "@type": "Organization",
+      name: "AI Trading Dashboard",
+      url: siteUrl,
+      logo: `${siteUrl}/logo.png`,
+      description: "Real-time AI trading dashboard for monitoring cryptocurrency portfolio performance",
+      sameAs: ["https://twitter.com/aitrading", "https://github.com/aitrading"],
+      contactPoint: {
+        "@type": "ContactPoint",
+        contactType: "Customer Support",
+        email: "[email protected]",
+      },
+    }
+  }
+
+  const generateBreadcrumbSchema = (items: Array<{ name: string; url: string }>) => {
+    return {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      itemListElement: items.map((item, index) => ({
+        "@type": "ListItem",
+        position: index + 1,
+        name: item.name,
+        item: item.url,
+      })),
+    }
+  }
+
+  const generateFaqSchema = (items: Array<{ question: string; answer: string }>) => {
+    return {
+      "@context": "https://schema.org",
+      "@type": "FAQPage",
+      mainEntity: items.map((item) => ({
+        "@type": "Question",
+        name: item.question,
+        acceptedAnswer: {
+          "@type": "Answer",
+          text: item.answer,
+        },
+      })),
+    }
+  }
+
+  return {
+    generateOrganizationSchema,
+    generateBreadcrumbSchema,
+    generateFaqSchema,
+  }
+}

client/middleware/seo.ts

@@ -0,0 +1,23 @@
+import { defineEventHandler, setHeader } from "h3"
+
+export default defineEventHandler((event) => {
+  const headers = {
+    "X-Content-Type-Options": "nosniff",
+    "X-Frame-Options": "SAMEORIGIN",
+    "X-XSS-Protection": "1; mode=block",
+    "Referrer-Policy": "strict-origin-when-cross-origin",
+    "Permissions-Policy": "geolocation=(), microphone=(), camera=()",
+  }
+
+  // Set security and caching headers
+  Object.entries(headers).forEach(([key, value]) => {
+    setHeader(event, key, value)
+  })
+
+  // Cache optimization for static assets
+  if (event.node.req.url?.includes("/assets/") || event.node.req.url?.includes("/_nuxt/")) {
+    setHeader(event, "Cache-Control", "public, max-age=31536000, immutable")
+  } else if (!event.node.req.url?.includes("/api/")) {
+    setHeader(event, "Cache-Control", "public, max-age=3600, s-maxage=3600")
+  }
+})

client/nuxt.config.ts

@@ -1,10 +1,61 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2024-11-01',
+  compatibilityDate: '2024-04-03',
   devtools: { enabled: true },
   css: ['~/assets/css/main.css'],
   app: {
     head: {
+      htmlAttrs: {
+        lang: "en",
+      },
+      title: "AI Trading Dashboard - Real-Time Crypto Trading Performance",
+      meta: [
+        { charset: "utf-8" },
+        { name: "viewport", content: "width=device-width, initial-scale=1" },
+        {
+          name: "description",
+          content:
+            "Monitor and compare AI trading models in real-time. Track crypto portfolio performance, positions, and trading analytics across multiple AI agents.",
+        },
+        {
+          name: "keywords",
+          content:
+            "AI trading, crypto trading, trading dashboard, portfolio tracker, trading models, cryptocurrency, DeFi, algorithmic trading",
+        },
+        { name: "author", content: "AI Trading Dashboard" },
+        { name: "robots", content: "index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" },
+        { name: "theme-color", content: "#0a0a0a" },
+
+        // Open Graph / Social Media Meta Tags
+        { property: "og:type", content: "website" },
+        { property: "og:url", content: "og:url" },
+        { property: "og:title", content: "AI Trading Dashboard - Real-Time Crypto Trading Performance" },
+        {
+          property: "og:description",
+          content:
+            "Monitor and compare AI trading models in real-time. Track crypto portfolio performance, positions, and trading analytics.",
+        },
+        { property: "og:image", content: "/logo.png" },
+        { property: "og:image:width", content: "1200" },
+        { property: "og:image:height", content: "630" },
+        { property: "og:site_name", content: "AI Trading Dashboard" },
+
+        // Twitter Card Meta Tags
+        { name: "twitter:card", content: "summary_large_image" },
+        { name: "twitter:url", content: "twitter:url" },
+        { name: "twitter:title", content: "AI Trading Dashboard - Real-Time Crypto Trading Performance" },
+        {
+          name: "twitter:description",
+          content:
+            "Monitor and compare AI trading models. Track performance, positions, and analytics across multiple AI trading agents.",
+        },
+        { name: "twitter:image", content: "/logo.png" },
+
+        // Additional SEO Meta Tags
+        { name: "apple-mobile-web-app-capable", content: "yes" },
+        { name: "apple-mobile-web-app-status-bar-style", content: "black-translucent" },
+        { name: "format-detection", content: "telephone=no" },
+      ],
       link: [
         {
           rel: 'preconnect',
@@ -19,20 +70,108 @@ export default defineNuxtConfig({
           rel: 'stylesheet',
           href: 'https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap',
         },
+        // Canonical URL
+        {
+          rel: "canonical",
+          content: "canonical",
+        },
+        // Favicons
+        {
+          rel: "icon",
+          type: "image/x-icon",
+          href: "/favicon.ico",
+        },
+        {
+          rel: "icon",
+          type: "image/svg+xml",
+          href: "/favicon.svg",
+        },
+        {
+          rel: "icon",
+          type: "image/png",
+          sizes: "16x16",
+          href: "/favicon-16x16.png",
+        },
+        {
+          rel: "icon",
+          type: "image/png",
+          sizes: "32x32",
+          href: "/favicon-32x32.png",
+        },
+        // Apple Touch Icon (180x180 is the standard for modern iOS)
+        {
+          rel: "apple-touch-icon",
+          sizes: "180x180",
+          href: "/icons/light/apple-touch-icon.png",
+        },
+        // Preload critical resources
+        {
+          rel: "preload",
+          as: "font",
+          href: "https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap",
+          crossorigin: "",
+        },
+      ],
+      script: [
+        {
+          type: "application/ld+json",
+          innerHTML: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "WebApplication",
+            name: "AI Trading Dashboard",
+            description:
+              "Real-time monitoring and comparison of AI trading models with cryptocurrency portfolio analytics",
+            url: process.env.NUXT_PUBLIC_SITE_URL || "",
+            applicationCategory: "FinanceApplication",
+            offers: {
+              "@type": "Offer",
+              price: "0",
+              priceCurrency: "USD",
+            },
+            aggregateRating: {
+              "@type": "AggregateRating",
+              ratingValue: "4.8",
+              ratingCount: "250",
+            },
+          }),
+        },
+        // Google Analytics (replace UA-XXXXXXXXX with your actual tracking ID)
+        {
+          async: true,
+          src: "https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID",
+        },
+        {
+          innerHTML: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', 'GA_MEASUREMENT_ID', {
+              page_path: window.location.pathname,
+            });
+          `,
+          type: "text/javascript",
+        },
       ],
     },
   },
+
   typescript: {
     strict: true,
-    typeCheck: false  // Disable type checking during dev to avoid vue-tsc issues
+    typeCheck: false, // Disable type checking during dev to avoid vue-tsc issues
   },
   postcss: {
     plugins: {
       tailwindcss: {},
       autoprefixer: {},
     },
   },
-  modules: ['radix-vue/nuxt'],
+  modules: ["radix-vue/nuxt"],
+
+  site: {
+    url: process.env.NUXT_PUBLIC_SITE_URL,
+    name: process.env.NUXT_PUBLIC_SITE_NAME,
+  },
+
   build: {
     transpile: ['radix-vue', 'apexcharts', 'vue3-apexcharts'],
   },
@@ -60,7 +199,10 @@ export default defineNuxtConfig({
     nodeEnv: process.env.NUXT_NODE_ENV || '',
 
     public: {
-      // apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:3000',
+      site: {
+        url: process.env.NUXT_PUBLIC_SITE_URL,
+        name: process.env.NUXT_PUBLIC_SITE_NAME,
+      },
     },
   },
 })