feat(marketing): og:image meta tags and URL-synced hero tab

Ship a real OG/Twitter card image for executor.sh and persist the hero
Cloud/Local toggle to `?try=`, so the choice is shareable and survives
back/forward navigation.

Author: RhysSullivan

apps/marketing/astro.config.mjs

@@ -8,6 +8,7 @@ import cloudflare from "@astrojs/cloudflare";
 
 // https://astro.build/config
 export default defineConfig({
+  site: "https://executor.sh",
   output: "server",
   integrations: [react()],
   vite: {

apps/marketing/public/og-image.png

@@ -10,6 +10,9 @@ const {
   title = 'Executor — The gateway to connect your agent to everything',
   description = 'One place every agent plugs into every tool you already use. Wire it up once, bring the whole team.'
 } = Astro.props
+
+const ogImage = new URL('/og-image.png', Astro.site ?? Astro.url).toString()
+const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url).toString()
 ---
 
 <html lang="en">
@@ -22,8 +25,19 @@ const {
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="color-scheme" content="light" />
     <meta name="description" content={description} />
+    <link rel="canonical" href={canonical} />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content={canonical} />
     <meta property="og:title" content={title} />
     <meta property="og:description" content={description} />
+    <meta property="og:image" content={ogImage} />
+    <meta property="og:image:width" content="3800" />
+    <meta property="og:image:height" content="2360" />
+    <meta property="og:image:alt" content={title} />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content={title} />
+    <meta name="twitter:description" content={description} />
+    <meta name="twitter:image" content={ogImage} />
     <title>{title}</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

apps/marketing/src/layouts/Layout.astro

@@ -377,7 +377,16 @@ import { SelfHostContactModal } from "../components/self-host-contact-modal";
   // visitors still see the recommended path.
   const heroToggle = document.querySelector<HTMLElement>(".hero-toggle");
   const tabToggle = heroToggle?.querySelector<HTMLElement>(".tab-toggle");
-  const setActiveTab = (tab: "cloud" | "local") => {
+  const TAB_PARAM = "try";
+  const isHeroTab = (v: unknown): v is "cloud" | "local" =>
+    v === "cloud" || v === "local";
+  const syncTabToUrl = (tab: "cloud" | "local") => {
+    const url = new URL(window.location.href);
+    if (url.searchParams.get(TAB_PARAM) === tab) return;
+    url.searchParams.set(TAB_PARAM, tab);
+    window.history.replaceState(window.history.state, "", url);
+  };
+  const setActiveTab = (tab: "cloud" | "local", updateUrl = true) => {
     if (!heroToggle || !tabToggle) return;
     heroToggle.dataset.active = tab;
     tabToggle.dataset.active = tab;
@@ -389,8 +398,11 @@ import { SelfHostContactModal } from "../components/self-host-contact-modal";
         );
       },
     );
+    if (updateUrl) syncTabToUrl(tab);
   };
   if (heroToggle && tabToggle) {
+    const initial = new URLSearchParams(window.location.search).get(TAB_PARAM);
+    if (isHeroTab(initial)) setActiveTab(initial, false);
     tabToggle.querySelectorAll<HTMLButtonElement>("button[data-tab]").forEach(
       (btn) => {
         btn.addEventListener("click", () => {
@@ -399,6 +411,10 @@ import { SelfHostContactModal } from "../components/self-host-contact-modal";
         });
       },
     );
+    window.addEventListener("popstate", () => {
+      const next = new URLSearchParams(window.location.search).get(TAB_PARAM);
+      setActiveTab(isHeroTab(next) ? next : "cloud", false);
+    });
   }
 
   // Desktop card "Download →" CTA jumps to the hero, switches to Local,