refactor: update SEO metadata and enhance Open Graph tags

Author: mallory-scotton

index.html

@@ -4,42 +4,65 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
-    <!-- ── Primary SEO ── -->
-    <title>Graphical Playground — Build Graphics Engines from Scratch | Creative Coding &amp; Canvas Experiments</title>
-    <meta name="description" content="Graphical Playground is an interactive, browser-based platform where students deconstruct and rebuild graphics-engine systems from the ground up — from raw Vulkan commands to full render pipelines. Explore creative coding, canvas experiments, and real-time graphics programming.">
+    <!-- Primary SEO -->
+    <title>Graphical Playground - Build Graphics Engines from Scratch</title>
+    <meta name="title" content="Graphical Playground - Build Graphics Engines from Scratch">
+    <meta name="description" content="Graphical Playground is an interactive, browser-based platform where students deconstruct and rebuild graphics-engine systems from the ground up, from raw Vulkan commands to full render pipelines. Explore creative coding, canvas experiments, and real-time graphics programming.">
     <meta name="keywords" content="graphics programming, creative coding, canvas experiments, Vulkan, render pipeline, game engine architecture, real-time rendering, WebGPU, GPU programming, deconstructionist pedagogy">
     <meta name="author" content="Graphical Playground">
 
-    <!-- ── Canonical ── -->
+    <!-- Canonical -->
     <link rel="canonical" href="https://graphical-playground.com/">
 
-    <!-- ── Open Graph (Facebook / LinkedIn / Discord) ── -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "WebApplication",
+      "name": "Graphical Playground",
+      "description": "An open-source platform dedicated to learning modern graphics engineering through hands-on experimentation.",
+      "url": "https://graphical-playground.com/",
+      "applicationCategory": "EducationalApplication",
+      "alternateName": ["GP", "GraphicalPlayground"],
+      "operatingSystem": "Web Browser",
+      "offers": {
+        "@type": "Offer",
+        "price": "0.00",
+        "priceCurrency": "USD"
+      }
+    }
+    </script>
+
+    <!-- Open Graph (Facebook / LinkedIn / Discord) -->
     <meta property="og:type" content="website">
     <meta property="og:site_name" content="Graphical Playground">
-    <meta property="og:title" content="Graphical Playground — Build Graphics Engines from Scratch">
-    <meta property="og:description" content="An interactive platform where students deconstruct and rebuild graphics-engine systems — from raw Vulkan commands to full render pipelines. Creative coding &amp; canvas experiments.">
+    <meta property="og:title" content="Graphical Playground - Build Graphics Engines from Scratch">
+    <meta property="og:description" content="An interactive platform where students deconstruct and rebuild graphics-engine systems - from raw Vulkan commands to full render pipelines. Creative coding &amp; canvas experiments.">
     <meta property="og:url" content="https://graphical-playground.com/">
     <meta property="og:image" content="https://graphical-playground.com/assets/preview-image.png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
-    <meta property="og:image:alt" content="Graphical Playground — Build Graphics Engines from Scratch">
+    <meta property="og:image:alt" content="Graphical Playground - Build Graphics Engines from Scratch">
 
-    <!-- ── Twitter Card ── -->
+    <!-- Twitter Card -->
     <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:title" content="Graphical Playground — Build Graphics Engines from Scratch">
-    <meta name="twitter:description" content="An interactive platform where students deconstruct and rebuild graphics-engine systems — from raw Vulkan commands to full render pipelines.">
+    <meta name="twitter:title" content="Graphical Playground - Build Graphics Engines from Scratch">
+    <meta name="twitter:description" content="An interactive platform where students deconstruct and rebuild graphics-engine systems - from raw Vulkan commands to full render pipelines.">
     <meta name="twitter:image" content="https://graphical-playground.com/assets/preview-image.png">
-    <meta name="twitter:image:alt" content="Graphical Playground — Build Graphics Engines from Scratch">
+    <meta name="twitter:image:alt" content="Graphical Playground - Build Graphics Engines from Scratch">
 
-    <!-- ── Web App Manifest ── -->
+    <!-- Web App Manifest -->
     <link rel="manifest" href="manifest.webmanifest">
     <meta name="theme-color" content="#3b82f6">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
     <meta name="apple-mobile-web-app-title" content="GP">
     <link rel="apple-touch-icon" href="assets/icons/icon-192.png">
 
-    <!-- ── Favicons & Assets ── -->
+    <!-- Preconnect for fonts -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+
+    <!-- Favicons & Assets -->
     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
     <link rel="stylesheet" href="style.css">
 </head>
@@ -93,7 +116,9 @@ <h1 class="hero-title">Something new is<br>being built.</h1>
             <span class="footer-copy">&copy; 2026 Graphical Playground. All rights reserved.</span>
         </div>
         <div class="footer-right">
+            <a href="https://docs.graphical-playground.com" class="footer-link" target="_blank" rel="noopener noreferrer">Docs</a>
             <a href="https://github.com/GraphicalPlayground" class="footer-link" target="_blank" rel="noopener noreferrer">GitHub</a>
+            <a href="https://linkedin.com/company/graphical-playground" class="footer-link" target="_blank" rel="noopener noreferrer">LinkedIn</a>
         </div>
     </footer>