Updated meta component

gavinmcfarland · Nov 1, 2024 · 6417b11 · 6417b11
1 parent 1e0834a
commit 6417b11
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 42 deletions.
diff --git a/packages/website/src/app.html b/packages/website/src/app.html
@@ -11,9 +11,6 @@
 	<link rel="manifest" href="/manifest.webmanifest" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 
-	<meta property="og:image" content="https://plugma.dev/og.png">
-	<meta property="og:site_name" content="Plugma">
-
 	%sveltekit.head%
 </head>
 

diff --git a/packages/website/src/components/Meta.svelte b/packages/website/src/components/Meta.svelte
@@ -4,48 +4,51 @@
 	export let description: string | undefined = undefined;
 	export let url: string | undefined = undefined;
 	export let image: string | undefined = undefined;
+	export let site: 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}
+<!-- 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}
+<!-- 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}
+{#if site}
+	<meta property="og:site" content={site} />
+{/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>
+{#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}
diff --git a/packages/website/src/routes/+layout.svelte b/packages/website/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import { notifications } from '@/stores';
 	import Notification from '@/components/Notification.svelte';
 	import Icon from '@/components/Icon.svelte';
+	import Meta from '@/components/Meta.svelte';
 
 	inject();
 	injectSpeedInsights();
@@ -17,6 +18,10 @@
 	let currentYear = getCurrentYear();
 </script>
 
+<svelte:head>
+	<Meta image="https://plugma.dev/og.png" site="Plugma" />
+</svelte:head>
+
 <div class="app">
 	<!-- <Header /> -->