add meta/og tags for link preview

messages/en.json

@@ -11,6 +11,11 @@
     "common.mission.header": "Mission",
     "common.mission.desc" : "To facilitate community focused technology development and research in support of low-income, marginalized populations and groups.",
 
+    "meta.title" : "Seattle Community Network",
+    "meta.description" : "The Seattle Community Network (SCN) is a community-run cellular (4G LTE) Internet access network dedicated to providing fair access to underserved communities all across the Puget Sound.",
+    "meta.url" : "https://seattlecommunitynetwork.org",
+    "meta.type" : "website",
+
     "common.toggle_nav" : "toggle nav",
 
     "common.nav.0.label" : "Home",

src/lib/components/Metatags.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import { page } from '$app/state';
+
+    import { m } from '$lib/paraglide/messages.js';
+
+    import image from '$lib/assets/og-image.jpg';
+
+    const og = {
+        title : m['meta.title'](),
+        description : m['meta.description'](),
+        url : m['meta.url']() + page.url.pathname,
+        type : m['meta.type'](),
+        image
+    };
+</script>
+
+<svelte:head>
+
+    <meta name="description" content="{m['meta.description']()}" />
+
+    {#each Object.entries(og) as [key, value]}
+        <meta property={`og:${key}`} content={value} />
+    {/each}
+
+</svelte:head>

src/routes/+layout.svelte

@@ -1,12 +1,15 @@
 <script lang="ts">
     import '../app.css';
 
-    import Header from '$lib/components/Header.svelte';
-    import Footer from '$lib/components/Footer.svelte';
+    import Header   from '$lib/components/Header.svelte';
+    import Footer   from '$lib/components/Footer.svelte';
+    import Metatags from '$lib/components/Metatags.svelte';
 
     let { children } = $props();
 </script>
 
+<Metatags />
+
 <Header />
 
 <main>