feat(website): add full technical SEO (metadata, JSON-LD, sitemap, favicon, OG images)

apps/website/app/apple-icon.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from "next/og";
+
+export const size = { width: 180, height: 180 };
+export const contentType = "image/png";
+
+export default function AppleIcon() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: "#171918"
+        }}
+      >
+        <svg width="112" height="112" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <rect x="3" y="5" width="18" height="4" rx="2" fill="#36d69a" />
+          <rect x="6.25" y="9" width="2.5" height="3.5" fill="#009f6e" />
+          <rect x="15.25" y="9" width="2.5" height="3.5" fill="#009f6e" />
+          <rect x="4" y="12.5" width="7" height="4" rx="2" fill="#009f6e" />
+          <rect x="13" y="12.5" width="7" height="4" rx="2" fill="#009f6e" />
+          <path
+            d="M3 20.25c1.5 -1.4 3 -1.4 4.5 0c1.5 1.4 3 1.4 4.5 0c1.5 -1.4 3 -1.4 4.5 0c1.5 1.4 3 1.4 4.5 0"
+            stroke="#36d69a"
+            strokeWidth={1.6}
+            strokeLinecap="round"
+            opacity={0.55}
+          />
+        </svg>
+      </div>
+    ),
+    { ...size }
+  );
+}

apps/website/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Archivo, JetBrains_Mono } from "next/font/google";
+import { SITE_URL, GITHUB_URL, GITHUB_ORG_URL } from "@/lib/site";
 import "./globals.css";
 
 const archivo = Archivo({
@@ -14,25 +15,121 @@ const jetbrainsMono = JetBrains_Mono({
   display: "swap"
 });
 
+const OG_IMAGE = `${SITE_URL}/opengraph-image`;
+const ICON_URL = `${SITE_URL}/icon.svg`;
+
+const DESCRIPTION =
+  "Pontoon is a local-first desktop tool for @ton/sandbox. Deploy contracts, send messages, and watch the whole async transaction tree: phase-level fees, TVM traces, and state, without reading raw VM logs.";
+
 export const metadata: Metadata = {
-  metadataBase: new URL("https://pontoon.entrypointlabs.xyz"),
-  title: "Pontoon: the desktop inspector for @ton/sandbox",
-  description:
-    "Pontoon is a local-first desktop tool for @ton/sandbox. Deploy contracts, send messages, and watch the whole async transaction tree: phase-level fees, TVM traces, and state, without reading raw VM logs.",
-  keywords: ["TON", "@ton/sandbox", "Blueprint", "TVM", "smart contracts", "debugger", "desktop"],
+  metadataBase: new URL(SITE_URL),
+  title: {
+    template: "%s | Pontoon",
+    default: "Pontoon: the desktop inspector for @ton/sandbox"
+  },
+  description: DESCRIPTION,
+  keywords: [
+    "debug ton smart contracts locally",
+    "ton sandbox transaction inspector",
+    "visualize async ton transactions",
+    "step through tvm bytecode",
+    "ton gas fee breakdown per transaction",
+    "func tact test coverage and gas benchmarks",
+    "local ton blockchain sandbox debugger",
+    "blueprint ton smart contract testing tool"
+  ],
+  alternates: {
+    canonical: "/"
+  },
+  robots: {
+    index: true,
+    follow: true,
+    googleBot: {
+      index: true,
+      follow: true,
+      "max-image-preview": "large",
+      "max-snippet": -1,
+      "max-video-preview": -1
+    }
+  },
   openGraph: {
+    type: "website",
+    locale: "en_US",
+    url: SITE_URL,
+    siteName: "Pontoon",
+    title: "Pontoon: the desktop inspector for @ton/sandbox",
+    description: "Make TON's async execution visible. A local-first desktop debugger for @ton/sandbox."
+  },
+  twitter: {
+    card: "summary_large_image",
     title: "Pontoon: the desktop inspector for @ton/sandbox",
-    description:
-      "Make TON's async execution visible. A local-first desktop debugger for @ton/sandbox.",
-    type: "website"
+    description: "Make TON's async execution visible. A local-first desktop debugger for @ton/sandbox."
+  },
+  formatDetection: {
+    telephone: false,
+    email: false,
+    address: false
   }
 };
 
+const jsonLd = {
+  "@context": "https://schema.org",
+  "@graph": [
+    {
+      "@type": "Organization",
+      "@id": `${SITE_URL}#org`,
+      name: "Entrypoint Labs",
+      url: "https://entrypointlabs.xyz",
+      logo: ICON_URL,
+      sameAs: [GITHUB_ORG_URL]
+    },
+    {
+      "@type": "WebSite",
+      "@id": `${SITE_URL}#website`,
+      url: SITE_URL,
+      name: "Pontoon",
+      description: DESCRIPTION,
+      publisher: { "@id": `${SITE_URL}#org` }
+    },
+    {
+      "@type": "SoftwareApplication",
+      "@id": `${SITE_URL}#app`,
+      name: "Pontoon",
+      url: SITE_URL,
+      image: OG_IMAGE,
+      description: DESCRIPTION,
+      applicationCategory: "DeveloperApplication",
+      operatingSystem: "macOS",
+      featureList: [
+        "Transaction-tree inspector",
+        "Phase-level fee breakdown",
+        "TVM step debugger",
+        "Cell & TL-B viewer",
+        "Snapshots & time control",
+        "Coverage & benchmarks"
+      ],
+      offers: {
+        "@type": "Offer",
+        price: "0",
+        priceCurrency: "USD"
+      },
+      publisher: { "@id": `${SITE_URL}#org` },
+      sameAs: [GITHUB_URL]
+    }
+  ]
+};
+
 export default function RootLayout({
   children
 }: Readonly<{ children: React.ReactNode }>) {
   return (
     <html lang="en" className={`${archivo.variable} ${jetbrainsMono.variable}`}>
+      <head>
+        <script
+          type="application/ld+json"
+          dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
+        />
+      </head>
       <body>{children}</body>
     </html>
   );

apps/website/app/opengraph-image.tsx

@@ -0,0 +1,103 @@
+import { ImageResponse } from "next/og";
+
+export const alt = "Pontoon — the desktop inspector for @ton/sandbox";
+export const size = { width: 1200, height: 630 };
+export const contentType = "image/png";
+
+const MARK = (
+  <svg width="34" height="34" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="3" y="5" width="18" height="4" rx="2" fill="#36d69a" />
+    <rect x="6.25" y="9" width="2.5" height="3.5" fill="#009f6e" />
+    <rect x="15.25" y="9" width="2.5" height="3.5" fill="#009f6e" />
+    <rect x="4" y="12.5" width="7" height="4" rx="2" fill="#009f6e" />
+    <rect x="13" y="12.5" width="7" height="4" rx="2" fill="#009f6e" />
+    <path
+      d="M3 20.25c1.5 -1.4 3 -1.4 4.5 0c1.5 1.4 3 1.4 4.5 0c1.5 -1.4 3 -1.4 4.5 0c1.5 1.4 3 1.4 4.5 0"
+      stroke="#36d69a"
+      strokeWidth={1.6}
+      strokeLinecap="round"
+      opacity={0.55}
+    />
+  </svg>
+);
+
+export default function OpengraphImage() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          padding: "64px 72px",
+          background: "#0f1110"
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
+          <div
+            style={{
+              display: "flex",
+              width: 56,
+              height: 56,
+              alignItems: "center",
+              justifyContent: "center",
+              background: "#171918",
+              borderRadius: 14,
+              border: "1px solid #292c2b"
+            }}
+          >
+            {MARK}
+          </div>
+          <span style={{ fontSize: 30, fontWeight: 700, color: "#e6e8e7", letterSpacing: "-0.02em" }}>
+            Pontoon
+          </span>
+        </div>
+
+        <div style={{ display: "flex", flexDirection: "column", gap: 20, maxWidth: 980 }}>
+          <span
+            style={{
+              display: "flex",
+              alignSelf: "flex-start",
+              alignItems: "center",
+              padding: "8px 16px",
+              borderRadius: 999,
+              border: "1px solid #292c2b",
+              background: "rgba(23,25,24,0.6)",
+              color: "#8f9391",
+              fontSize: 18,
+              letterSpacing: "0.06em"
+            }}
+          >
+            DESKTOP INSPECTOR · @ton/sandbox
+          </span>
+          <span
+            style={{
+              display: "flex",
+              fontSize: 62,
+              fontWeight: 700,
+              lineHeight: 1.08,
+              letterSpacing: "-0.02em",
+              color: "#e6e8e7"
+            }}
+          >
+            Make TON&apos;s async execution&nbsp;
+            <span style={{ color: "#36d69a" }}>visible.</span>
+          </span>
+          <span style={{ display: "flex", fontSize: 24, lineHeight: 1.5, color: "#8f9391", maxWidth: 820 }}>
+            A local-first desktop inspector for @ton/sandbox: transaction trees, phase fees, and TVM traces.
+          </span>
+        </div>
+
+        <div style={{ display: "flex", gap: 28, fontSize: 17, color: "#808482", letterSpacing: "0.04em" }}>
+          <span>@ton/sandbox</span>
+          <span>57 wire methods</span>
+          <span>local-first</span>
+          <span>no testnet</span>
+        </div>
+      </div>
+    ),
+    { ...size }
+  );
+}

apps/website/app/robots.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next";
+import { SITE_URL } from "@/lib/site";
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: "*",
+      allow: "/",
+      disallow: "/api/"
+    },
+    sitemap: `${SITE_URL}/sitemap.xml`
+  };
+}

apps/website/app/sitemap.ts

@@ -0,0 +1,13 @@
+import type { MetadataRoute } from "next";
+import { SITE_URL } from "@/lib/site";
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: SITE_URL,
+      lastModified: new Date(),
+      changeFrequency: "monthly",
+      priority: 1
+    }
+  ];
+}

apps/website/app/twitter-image.tsx

@@ -0,0 +1 @@
+export { default, alt, size, contentType } from "./opengraph-image";

apps/website/lib/site.ts

@@ -1,4 +1,6 @@
+export const SITE_URL = "https://pontoon.entrypointlabs.xyz";
 export const GITHUB_URL = "https://github.com/EntrypointLabs/Pontoon";
+export const GITHUB_ORG_URL = "https://github.com/EntrypointLabs";
 export const RELEASES_URL = "https://github.com/EntrypointLabs/Pontoon/releases";
 
 export const NAV_LINKS = [

apps/website/next.config.mjs

@@ -3,6 +3,14 @@ import { join } from "node:path";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  compress: true,
+  poweredByHeader: false,
+  images: {
+    formats: ["image/avif", "image/webp"],
+    deviceSizes: [320, 420, 640, 768, 1024, 1280, 1536],
+    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
+    minimumCacheTTL: 60 * 60 * 24 * 30
+  },
   turbopack: {
     // Pin the monorepo root so file tracing ignores stray lockfiles elsewhere.
     root: join(import.meta.dirname, "..", "..")