diff --git a/packages/website/src/components/Meta.svelte b/packages/website/src/components/Meta.svelte
new file mode 100644
index 0000000..875802e
--- /dev/null
+++ b/packages/website/src/components/Meta.svelte
@@ -0,0 +1,51 @@
+<script lang="ts">
+	// Define optional props without default values
+	export let title: string | undefined = undefined;
+	export let description: string | undefined = undefined;
+	export let url: string | undefined = undefined;
+	export let image: string | undefined = undefined;
+	export let type: string | undefined = undefined;
+</script>
+
+<svelte:head>
+	<!-- Primary Meta Tags -->
+	{#if title}
+		<meta name="title" content={title} />
+	{/if}
+	{#if description}
+		<meta name="description" content={description} />
+	{/if}
+
+	<!-- Open Graph / Facebook -->
+	{#if url}
+		<meta property="og:url" content={url} />
+	{/if}
+	{#if title}
+		<meta property="og:title" content={title} />
+	{/if}
+	{#if description}
+		<meta property="og:description" content={description} />
+	{/if}
+	{#if image}
+		<meta property="og:image" content={image} />
+	{/if}
+
+	{#if type}
+		<meta property="og:type" content={type} />
+	{/if}
+
+	<!-- Twitter -->
+	<meta property="twitter:card" content="summary_large_image" />
+	{#if url}
+		<meta property="twitter:url" content={url} />
+	{/if}
+	{#if title}
+		<meta property="twitter:title" content={title} />
+	{/if}
+	{#if description}
+		<meta property="twitter:description" content={description} />
+	{/if}
+	{#if image}
+		<meta property="twitter:image" content={image} />
+	{/if}
+</svelte:head>
diff --git a/packages/website/src/routes/+page.svelte b/packages/website/src/routes/+page.svelte
index ca0360a..2d06ab5 100644
--- a/packages/website/src/routes/+page.svelte
+++ b/packages/website/src/routes/+page.svelte
@@ -5,18 +5,18 @@
 	import Card from '@/components/Card.svelte';
 	import Code from '@/components/Code.svelte';
 	import Icon from '@/components/Icon.svelte';
+	import Meta from '@/components/Meta.svelte';
 	import Section from '@/components/Section.svelte';
 </script>
 
 <svelte:head>
 	<title>Plugma — Take Figma plugin development to the next level</title>
-	<meta property="og:title" content="Plugma: Take Figma plugin development to the next level" />
-	<meta
-		property="og:description"
-		content="Excelerate your plugin develop with an all in one solution for developing and bundling Figma plugins."
+	<Meta
+		title="Plugma: Take Figma plugin development to the next level"
+		description="Excelerate your plugin develop with an all in one solution for developing and bundling Figma plugins."
+		url={`https://plugma.dev${$page.url.pathname}`}
+		type="website"
 	/>
-	<meta property="og:url" content={`https://plugma.dev${$page.url.pathname}`} />
-	<meta property="og:type" content="website" />
 </svelte:head>
 
 <div>
diff --git a/packages/website/src/routes/docs/[slug]/+page.svelte b/packages/website/src/routes/docs/[slug]/+page.svelte
index 94cd9fd..ff50309 100644
--- a/packages/website/src/routes/docs/[slug]/+page.svelte
+++ b/packages/website/src/routes/docs/[slug]/+page.svelte
@@ -7,6 +7,7 @@
 	import MarkdownRenderer3 from '@/components/MarkdownRenderer3.svelte';
 	import Heading from '@/components/Heading.svelte';
 	import { onMount } from 'svelte';
+	import Meta from '@/components/Meta.svelte';
 	export let data;
 
 	// function replaceSyntax(data) {
@@ -24,9 +25,7 @@
 
 <svelte:head>
 	<title>{data.title}</title>
-	<meta property="og:title" content={data.title} />
-	<meta property="og:url" content={`https://plugma.dev${$page.url.pathname}`} />
-	<meta property="og:type" content="article" />
+	<Meta title={data.title} url={`https://plugma.dev${$page.url.pathname}`} type="article" />
 </svelte:head>
 
 <div>
diff --git a/packages/website/src/routes/whats-new/+page.svelte b/packages/website/src/routes/whats-new/+page.svelte
index af62e45..1729021 100644
--- a/packages/website/src/routes/whats-new/+page.svelte
+++ b/packages/website/src/routes/whats-new/+page.svelte
@@ -3,6 +3,7 @@
 	import Badge from '@/components/Badge.svelte';
 	import Code from '@/components/Code.svelte';
 	import Icon from '@/components/Icon.svelte';
+	import Meta from '@/components/Meta.svelte';
 	export let data;
 
 	// function replaceSyntax(data) {
@@ -15,10 +16,13 @@
 </script>
 
 <svelte:head>
-	<title>Plugma — What's new</title>
-	<meta property="og:title" content="What's new" />
-	<meta property="og:url" content={`https://plugma.dev${$page.url.pathname}`} />
-	<meta property="og:type" content="article" />
+	<title>Plugma: What's new</title>
+	<Meta
+		title="Plugma: What's new"
+		description="Excelerate your plugin develop with an all in one solution for developing and bundling Figma plugins."
+		url={`https://plugma.dev${$page.url.pathname}`}
+		type="article"
+	/>
 </svelte:head>
 
 <div class="my-8 mx-4">