feat: add og metadata tags

foskey51 · foskey51 · commit dcf43b2e348f · 2025-11-23T19:44:01.000+05:30
diff --git a/src/components/SeoHead.tsx b/src/components/SeoHead.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import Head from '@docusaurus/Head';
+
+export default function SeoHead() {
+    const title = "Windmill | Open-source developer platform and workflow engine";
+    const description = "Turn scripts into auto-generated UIs, APIs and cron jobs. Compose them as workflows or data pipelines. Build complex, data-intensive apps with ease. Write and deploy software 10x faster, and run it with the highest reliability and observability on the fastest self-hostable job orchestrator";
+    const url = "https://www.windmill.dev/";
+    const image = "https://foskey51.github.io/test_ogp/og_image.png";
+
+    return (
+        <Head>
+            <title>{title}</title>
+
+            <meta name="title" content={title} />
+            <meta name="description" content={description} />
+
+            <meta property="og:url" content={url} />
+            <meta property="og:type" content="website" />
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+            <meta property="og:image" content={image} />
+
+            <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={image} />
+
+            <link rel="icon" href="/img/logo.svg" />
+        </Head>
+    );
+}
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -5,7 +5,6 @@ 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 HeroExample from '../landing/HeroExample';
 import LandingHeader from '../landing/LandingHeader';
 import LayoutProvider from '@theme/Layout/Provider';
@@ -16,6 +15,7 @@ import AppLightSection from '../landing/AppLightSection';
 import FlowLightSection from '../landing/FlowLightSection';
 import TutorialSection from '../landing/TutorialSection';
 import MobileTutorialSection from '../landing/MobileTutorialSection';
+import SeoHead from '../components/SeoHead';
 
 function HomepageHeader() {
 	return (
@@ -49,15 +49,7 @@ export default function Home() {
 	return (
 		<LayoutProvider>
 			<main>
-				<Head>
-					<title>Windmill | Open-source developer platform and workflow engine</title>
-					<meta name="title" content="Open-source developer platform and workflow engine" />
-					<meta
-						name="description"
-						content="Turn scripts into auto-generated UIs, APIs and cron jobs. Compose them as workflows or data pipelines. Build complex, data-intensive apps with ease. Write and deploy software 10x faster, and run it with the highest reliability and observability on the fastest self-hostable job orchestrator"
-					/>
-					<link rel="icon" href="/img/logo.svg" />
-				</Head>
+				<SeoHead />
 				<HomepageHeader />
 			</main>
 		</LayoutProvider>
