feat: add SEO meta tags, OG image, sitemap, and structured data

trmquang93 · trmquang93 · commit 7925437a15c6 · 2026-03-19T00:22:43.000+07:00
Shared links on social platforms now show rich previews with title,
description, and image instead of blank cards. Adds robots.txt and
sitemap.xml for search engine discoverability, JSON-LD structured
data for rich snippets, and dynamic per-route page titles.
diff --git a/index.html b/index.html
@@ -3,8 +3,47 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Drawd — Visual App Flow Designer</title>
+    <meta name="description" content="Design mobile app navigation flows visually. Upload screens, define tap areas, connect flows, and generate AI build instructions your LLM can actually use." />
+    <link rel="canonical" href="https://drawd.app" />
+    <meta name="theme-color" content="#282c34" />
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website" />
+    <meta property="og:site_name" content="Drawd" />
+    <meta property="og:title" content="Drawd — Visual App Flow Designer" />
+    <meta property="og:description" content="Design mobile app navigation flows visually. Upload screens, define tap areas, connect flows, and generate AI build instructions your LLM can actually use." />
+    <meta property="og:url" content="https://drawd.app" />
+    <meta property="og:image" content="https://drawd.app/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+
+    <!-- Twitter / X -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Drawd — Visual App Flow Designer" />
+    <meta name="twitter:description" content="Design mobile app navigation flows visually. Upload screens, define tap areas, connect flows, and generate AI build instructions your LLM can actually use." />
+    <meta name="twitter:image" content="https://drawd.app/og-image.png" />
+
+    <!-- Structured Data -->
+    <script type="application/ld+json">
+    {
+      "@context": "https://schema.org",
+      "@type": "SoftwareApplication",
+      "name": "Drawd",
+      "url": "https://drawd.app",
+      "applicationCategory": "DesignApplication",
+      "operatingSystem": "Web",
+      "description": "Visual app flow designer that lets you upload screens, define tap areas, connect navigation flows, and generate AI build instructions.",
+      "offers": {
+        "@type": "Offer",
+        "price": "0",
+        "priceCurrency": "USD"
+      }
+    }
+    </script>
+
     <link rel="icon" type="image/svg+xml" href="/icon.svg" />
-    <title>Drawd</title>
     <style>
       * { margin: 0; padding: 0; box-sizing: border-box; }
     </style>
diff --git a/public/og-image.png b/public/og-image.png
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://drawd.app/sitemap.xml
diff --git a/public/sitemap.xml b/public/sitemap.xml
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+  <url>
+    <loc>https://drawd.app</loc>
+    <changefreq>weekly</changefreq>
+    <priority>1.0</priority>
+  </url>
+  <url>
+    <loc>https://drawd.app/#/editor</loc>
+    <changefreq>weekly</changefreq>
+    <priority>0.8</priority>
+  </url>
+  <url>
+    <loc>https://drawd.app/#/docs</loc>
+    <changefreq>monthly</changefreq>
+    <priority>0.7</priority>
+  </url>
+</urlset>
diff --git a/src/App.jsx b/src/App.jsx
@@ -30,6 +30,15 @@ export default function App() {
     return () => window.removeEventListener("hashchange", onHashChange);
   }, []);
 
+  useEffect(() => {
+    const titles = {
+      landing: "Drawd — Visual App Flow Designer",
+      editor: "Editor — Drawd",
+      docs: "User Guide — Drawd",
+    };
+    document.title = titles[route] || titles.landing;
+  }, [route]);
+
   let page;
   if (route === "editor") {
     page = (
