index.html

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Primary meta -->
  <title>SRVJ | Free Online Diagram Editor &amp; Whiteboard</title>
  <meta name="description"
    content="SRVJ is a free online diagram editor and whiteboard. Build flowcharts, ERDs, mind maps and sticky notes on an infinite canvas, right in your browser." />
  <meta name="author" content="Mohammed Mostafa" />
  <meta name="application-name" content="SRVJ" />
  <meta name="apple-mobile-web-app-title" content="SRVJ" />
  <meta name="theme-color" content="#6366f1" />
  <meta name="color-scheme" content="light dark" />
  <!-- No static canonical here on purpose: every route sets its own via
       `useSeo()`, and a hardcoded tag would leak through unchallenged on any
       page that intentionally omits one (e.g. 404) — `useHead`'s empty
       `link: []` doesn't evict a tag it never competed with. -->

  <!-- Icons & manifest. Sized variants generated from /favicon.png (1254x1254,
       kept only as the Organization.logo source below — schema.org wants a
       high-res logo, fetched out-of-band, so it doesn't cost page weight). -->
  <link rel="icon" type="image/png" href="/favicon-32.png" />
  <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
  <link rel="manifest" href="/site.webmanifest" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="SRVJ" />
  <meta property="og:title" content="SRVJ — Free Online Diagram Editor &amp; Whiteboard" />
  <meta property="og:description"
    content="SRVJ is a free online diagram editor and whiteboard. Flowcharts, ERDs, mind maps and sticky notes on one infinite canvas — no download." />
  <!-- No static og:url either — same reasoning as the canonical tag above. -->
  <meta property="og:image" content="https://srvj.elrefai.me/og-image.svg" />
  <meta property="og:image:type" content="image/svg+xml" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="SRVJ diagram editor canvas with connected shapes and sticky notes." />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="SRVJ — Free Online Diagram Editor &amp; Whiteboard" />
  <meta name="twitter:description"
    content="SRVJ is a free online diagram editor and whiteboard. Flowcharts, ERDs, mind maps and sticky notes on one infinite canvas — no download." />
  <meta name="twitter:image" content="https://srvj.elrefai.me/og-image.svg" />
  <meta name="twitter:image:alt" content="SRVJ diagram editor canvas with connected shapes and sticky notes." />

  <!-- Structured data: a single @graph so Google ties the WebApplication to a
       named brand (WebSite + Organization). The WebSite `name`/`alternateName`
       is the primary signal that this site's brand is "SRVJ". -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@graph": [
      {
        "@type": "WebSite",
        "@id": "https://srvj.elrefai.me/#website",
        "url": "https://srvj.elrefai.me/",
        "name": "SRVJ",
        "alternateName": ["SRVJ Diagram Editor", "SRVJ Whiteboard"],
        "description": "Free online diagram editor and whiteboard.",
        "inLanguage": "en",
        "publisher": { "@id": "https://srvj.elrefai.me/#organization" }
      },
      {
        "@type": "Organization",
        "@id": "https://srvj.elrefai.me/#organization",
        "name": "SRVJ",
        "url": "https://srvj.elrefai.me/",
        "logo": {
          "@type": "ImageObject",
          "url": "https://srvj.elrefai.me/favicon.png",
          "width": 1254,
          "height": 1254
        },
        "sameAs": ["https://github.com/elrefai99"],
        "founder": { "@type": "Person", "name": "Mohammed Mostafa" }
      },
      {
        "@type": "WebApplication",
        "@id": "https://srvj.elrefai.me/#app",
        "name": "SRVJ",
        "url": "https://srvj.elrefai.me/",
        "description": "SRVJ is a free online diagram editor and whiteboard — flowcharts, ERDs, mind maps and sticky notes on an infinite canvas.",
        "applicationCategory": "DesignApplication",
        "operatingSystem": "Any (web browser)",
        "browserRequirements": "Requires JavaScript and a modern web browser.",
        "offers": {
          "@type": "Offer",
          "price": "0",
          "priceCurrency": "USD"
        },
        "publisher": { "@id": "https://srvj.elrefai.me/#organization" }
      }
    ]
  }
  </script>

  <!-- Home renders its own marketing typefaces (see `HomeView.vue`). Inter +
       Architects Daughter are the app-shell fonts (base UI + sketch mode) and
       are loaded only by the signed-in surface via `useAppFonts()`, so Home
       — the one indexed, ranking-critical page — doesn't pay for fonts it
       never renders. -->
</head>

<body>
  <div id="app">
    <!-- Crawler-visible fallback: shown before the SPA mounts and for no-JS clients. -->
    <noscript>
      <h1>SRVJ | Free Online Diagram Editor &amp; Whiteboard</h1>
      <p>
        SRVJ is a free, browser-based diagram editor and whiteboard. It blends a Draw.io-style
        flow editor with an Excalidraw hand-drawn look and Miro-style sticky notes.
        JavaScript is required to use the editor.
      </p>
    </noscript>
  </div>
  <script type="module" src="/src/main.ts"></script>
</body>

</html>