feat: add OG metadata tags for rich link previews (#1230)

devdattatalele · foskey51 · web-flow · commit 9e48eaaa8fc7 · 2026-02-05T13:23:46.000Z
Adds Open Graph and Twitter Card meta tags to enable rich link previews when sharing Windmill links on social platforms (Discord, Twitter, Slack, LinkedIn, WhatsApp, etc.). Changes: - Add SeoHead component with configurable OG meta tags - Add og_preview.png image for social media previews - Update index.js to use SeoHead component The image is self-hosted in the repository (no external dependencies). Closes windmill-labs/windmill#1126 Supersedes #1156 Co-authored-by: foskey51 <170395811+foskey51@users.noreply.github.com>
diff --git a/src/components/SeoHead.tsx b/src/components/SeoHead.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+
+interface SeoHeadProps {
+	title?: string;
+	description?: string;
+	url?: string;
+	image?: string;
+}
+
+export default function SeoHead({
+	title = 'Windmill | Build, deploy and monitor internal software at scale',
+	description = 'For developers who need real code capabilities without platform engineering overhead. Turn scripts into auto-generated UIs, APIs and cron jobs. Compose them as workflows or data pipelines.',
+	url = 'https://www.windmill.dev/',
+	image = 'https://www.windmill.dev/img/og_preview.png'
+}: SeoHeadProps) {
+	return (
+		<Head>
+			<title>{title}</title>
+
+			{/* Standard meta tags */}
+			<meta name="title" content={title} />
+			<meta name="description" content={description} />
+
+			{/* Open Graph / Facebook */}
+			<meta property="og:type" content="website" />
+			<meta property="og:url" content={url} />
+			<meta property="og:title" content={title} />
+			<meta property="og:description" content={description} />
+			<meta property="og:image" content={image} />
+
+			{/* Twitter */}
+			<meta name="twitter:card" content="summary_large_image" />
+			<meta name="twitter:url" content={url} />
+			<meta name="twitter:title" content={title} />
+			<meta name="twitter:description" content={description} />
+			<meta name="twitter:image" content={image} />
+
+			<link rel="icon" href="/img/logo.svg" />
+		</Head>
+	);
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -5,7 +5,7 @@ import IntegrationsList from '../landing/IntegrationsList';
 import LandingSection from '../landing/LandingSection';
 import CallToAction from '../landing/CallToAction';
 import EntrepriseFeatures from '../landing/EntrepriseFeatures';
-import Head from '@docusaurus/Head';
+import SeoHead from '../components/SeoHead';
 import HeroExample from '../landing/HeroExample';
 import LandingHeader from '../landing/LandingHeader';
 import LayoutProvider from '@theme/Layout/Provider';
@@ -50,15 +50,7 @@ export default function Home() {
 	return (
 		<LayoutProvider>
 			<main>
-				<Head>
-					<title>Windmill | Build, deploy and monitor internal software at scale</title>
-					<meta name="title" content="Build, deploy and monitor internal software at scale" />
-					<meta
-						name="description"
-						content="For developers who need real code capabilities without platform engineering overhead."
-					/>
-					<link rel="icon" href="/img/logo.svg" />
-				</Head>
+				<SeoHead />
 				<HomepageHeader />
 			</main>
 		</LayoutProvider>
diff --git a/static/img/og_preview.png b/static/img/og_preview.png
