From 57234acf3a7b85e773863b6781c4b2cebf6e0232 Mon Sep 17 00:00:00 2001
From: Christian Beutel <>
Date: Fri, 4 Jul 2025 10:00:52 +0200
Subject: [PATCH] adds ogp meta tags

---
 web/src/lib/components/base/meta_tags.svelte  | 557 ++++++++++++++++++
 web/src/lib/models/trail.ts                   |   1 +
 .../map/trail/[handle]/[id]/+page.svelte      |  26 +-
 .../routes/profile/[handle]/+layout.svelte    |  24 +-
 web/src/routes/profile/[handle]/+page.svelte  |   2 -
 .../trail/view/[handle]/[id]/+page.svelte     |  26 +-
 6 files changed, 625 insertions(+), 11 deletions(-)
 create mode 100644 web/src/lib/components/base/meta_tags.svelte

diff --git a/web/src/lib/components/base/meta_tags.svelte b/web/src/lib/components/base/meta_tags.svelte
new file mode 100644
index 00000000..308eaede
--- /dev/null
+++ b/web/src/lib/components/base/meta_tags.svelte
@@ -0,0 +1,557 @@
+<script lang="ts">
+    /**
+     * Component adapted from: https://github.com/oekazuma/svelte-meta-tags/tree/main
+     * Original author: @oekazuma
+     * License: MIT
+     */
+
+    interface MobileAlternate {
+        media: string;
+        href: string;
+    }
+
+    interface LanguageAlternate {
+        hrefLang: string;
+        href: string;
+    }
+
+    interface AdditionalRobotsProps {
+        nosnippet?: boolean;
+        maxSnippet?: number;
+        maxImagePreview?: "none" | "standard" | "large";
+        maxVideoPreview?: number;
+        noarchive?: boolean;
+        unavailableAfter?: string;
+        noimageindex?: boolean;
+        notranslate?: boolean;
+    }
+
+    interface OpenGraph {
+        url?: string;
+        type?: string;
+        title?: string;
+        description?: string;
+        images?: ReadonlyArray<OpenGraphImage>;
+        videos?: ReadonlyArray<OpenGraphVideos>;
+        audio?: ReadonlyArray<OpenGraphAudio>;
+        locale?: string;
+        siteName?: string;
+        profile?: OpenGraphProfile;
+        book?: OpenGraphBook;
+        article?: OpenGraphArticle;
+        video?: OpenGraphVideo;
+    }
+
+    interface OpenGraphImage {
+        url: string;
+        secureUrl?: string;
+        type?: string;
+        width?: number;
+        height?: number;
+        alt?: string;
+    }
+
+    interface OpenGraphVideos {
+        url: string;
+        secureUrl?: string;
+        type?: string;
+        width?: number;
+        height?: number;
+    }
+
+    interface OpenGraphAudio {
+        url: string;
+        secureUrl?: string;
+        type?: string;
+    }
+
+    interface OpenGraphProfile {
+        firstName?: string;
+        lastName?: string;
+        username?: string;
+        gender?: string;
+    }
+
+    interface OpenGraphBook {
+        authors?: ReadonlyArray<string>;
+        isbn?: string;
+        releaseDate?: string;
+        tags?: ReadonlyArray<string>;
+    }
+
+    interface OpenGraphArticle {
+        publishedTime?: string;
+        modifiedTime?: string;
+        expirationTime?: string;
+        authors?: ReadonlyArray<string>;
+        section?: string;
+        tags?: ReadonlyArray<string>;
+    }
+
+    interface OpenGraphVideo {
+        actors?: ReadonlyArray<OpenGraphVideoActors>;
+        directors?: ReadonlyArray<string>;
+        writers?: ReadonlyArray<string>;
+        duration?: number;
+        releaseDate?: string;
+        tags?: ReadonlyArray<string>;
+        series?: string;
+    }
+
+    interface OpenGraphVideoActors {
+        profile: string;
+        role?: string;
+    }
+
+    interface BaseMetaTag {
+        content: string;
+    }
+
+    interface HTML5MetaTag extends BaseMetaTag {
+        name: string;
+        property?: undefined;
+        httpEquiv?: undefined;
+    }
+
+    interface RDFaMetaTag extends BaseMetaTag {
+        property: string;
+        name?: undefined;
+        httpEquiv?: undefined;
+    }
+
+    interface HTTPEquivMetaTag extends BaseMetaTag {
+        httpEquiv:
+            | "content-security-policy"
+            | "content-type"
+            | "default-style"
+            | "x-ua-compatible"
+            | "refresh";
+        name?: undefined;
+        property?: undefined;
+    }
+
+    type MetaTag = HTML5MetaTag | RDFaMetaTag | HTTPEquivMetaTag;
+
+    interface LinkTag {
+        rel: string;
+        href: string;
+        hrefLang?: string;
+        title?: string;
+        media?: string;
+        sizes?: string;
+        type?: string;
+        color?: string;
+        imagesrcset?: string;
+        imagesizes?: string;
+        integrity?: string;
+        as?:
+            | "fetch"
+            | "audio"
+            | "audioworklet"
+            | "document"
+            | "embed"
+            | "font"
+            | "frame"
+            | "iframe"
+            | "image"
+            | "json"
+            | "manifest"
+            | "object"
+            | "paintworklet"
+            | "report"
+            | "script"
+            | "serviceworker"
+            | "sharedworker"
+            | "style"
+            | "track"
+            | "video"
+            | "webidentity"
+            | "worker"
+            | "xslt";
+        crossOrigin?: "anonymous" | "use-credentials";
+        referrerPolicy?: ReferrerPolicy;
+    }
+
+    interface MetaTagsProps {
+        title?: string;
+        titleTemplate?: string;
+        robots?: string | boolean;
+        additionalRobotsProps?: AdditionalRobotsProps;
+        description?: string;
+        canonical?: string;
+        mobileAlternate?: MobileAlternate;
+        languageAlternates?: ReadonlyArray<LanguageAlternate>;
+        openGraph?: OpenGraph;
+        additionalMetaTags?: ReadonlyArray<MetaTag>;
+        additionalLinkTags?: ReadonlyArray<LinkTag>;
+        keywords?: ReadonlyArray<string>;
+    }
+
+    let {
+        title = undefined,
+        titleTemplate = undefined,
+        robots = "index,follow",
+        additionalRobotsProps = undefined,
+        description = undefined,
+        mobileAlternate = undefined,
+        languageAlternates = undefined,
+        openGraph = undefined,
+        canonical = undefined,
+        keywords = undefined,
+        additionalMetaTags = undefined,
+        additionalLinkTags = undefined,
+    }: Partial<MetaTagsProps> = $props();
+
+    let updatedTitle = $derived(
+        titleTemplate
+            ? title
+                ? titleTemplate.replace(/%s/g, title)
+                : title
+            : title,
+    );
+
+    let robotsParams = $state("");
+    if (additionalRobotsProps) {
+        const {
+            nosnippet,
+            maxSnippet,
+            maxImagePreview,
+            maxVideoPreview,
+            noarchive,
+            noimageindex,
+            notranslate,
+            unavailableAfter,
+        } = additionalRobotsProps;
+
+        robotsParams = `${nosnippet ? ",nosnippet" : ""}${maxSnippet ? `,max-snippet:${maxSnippet}` : ""}${
+            maxImagePreview ? `,max-image-preview:${maxImagePreview}` : ""
+        }${noarchive ? ",noarchive" : ""}${unavailableAfter ? `,unavailable_after:${unavailableAfter}` : ""}${
+            noimageindex ? ",noimageindex" : ""
+        }${maxVideoPreview ? `,max-video-preview:${maxVideoPreview}` : ""}${notranslate ? ",notranslate" : ""}`;
+    }
+
+    $effect(() => {
+        if (!robots && additionalRobotsProps) {
+            console.warn(
+                "additionalRobotsProps cannot be used when robots is set to false",
+            );
+        }
+    });
+</script>
+
+<svelte:head>
+    {#if updatedTitle}
+        <title>{updatedTitle}</title>
+    {/if}
+
+    {#if robots !== false}
+        <meta name="robots" content="{robots}{robotsParams}" />
+    {/if}
+
+    {#if description}
+        <meta name="description" content={description} />
+    {/if}
+
+    {#if canonical}
+        <link rel="canonical" href={canonical} />
+    {/if}
+
+    {#if keywords?.length}
+        <meta name="keywords" content={keywords.join(", ")} />
+    {/if}
+
+    {#if mobileAlternate}
+        <link
+            rel="alternate"
+            media={mobileAlternate.media}
+            href={mobileAlternate.href}
+        />
+    {/if}
+
+    {#if languageAlternates && languageAlternates.length > 0}
+        {#each languageAlternates as languageAlternate (languageAlternate)}
+            <link
+                rel="alternate"
+                hrefLang={languageAlternate.hrefLang}
+                href={languageAlternate.href}
+            />
+        {/each}
+    {/if}
+
+    {#if openGraph}
+        {#if openGraph.url || canonical}
+            <meta property="og:url" content={openGraph.url || canonical} />
+        {/if}
+
+        {#if openGraph.type}
+            <meta property="og:type" content={openGraph.type.toLowerCase()} />
+            {#if openGraph.type.toLowerCase() === "profile" && openGraph.profile}
+                {#if openGraph.profile.firstName}
+                    <meta
+                        property="profile:first_name"
+                        content={openGraph.profile.firstName}
+                    />
+                {/if}
+
+                {#if openGraph.profile.lastName}
+                    <meta
+                        property="profile:last_name"
+                        content={openGraph.profile.lastName}
+                    />
+                {/if}
+
+                {#if openGraph.profile.username}
+                    <meta
+                        property="profile:username"
+                        content={openGraph.profile.username}
+                    />
+                {/if}
+
+                {#if openGraph.profile.gender}
+                    <meta
+                        property="profile:gender"
+                        content={openGraph.profile.gender}
+                    />
+                {/if}
+            {:else if openGraph.type.toLowerCase() === "book" && openGraph.book}
+                {#if openGraph.book.authors && openGraph.book.authors.length}
+                    {#each openGraph.book.authors as author (author)}
+                        <meta property="book:author" content={author} />
+                    {/each}
+                {/if}
+
+                {#if openGraph.book.isbn}
+                    <meta property="book:isbn" content={openGraph.book.isbn} />
+                {/if}
+
+                {#if openGraph.book.releaseDate}
+                    <meta
+                        property="book:release_date"
+                        content={openGraph.book.releaseDate}
+                    />
+                {/if}
+
+                {#if openGraph.book.tags && openGraph.book.tags.length}
+                    {#each openGraph.book.tags as tag (tag)}
+                        <meta property="book:tag" content={tag} />
+                    {/each}
+                {/if}
+            {:else if openGraph.type.toLowerCase() === "article" && openGraph.article}
+                {#if openGraph.article.publishedTime}
+                    <meta
+                        property="article:published_time"
+                        content={openGraph.article.publishedTime}
+                    />
+                {/if}
+
+                {#if openGraph.article.modifiedTime}
+                    <meta
+                        property="article:modified_time"
+                        content={openGraph.article.modifiedTime}
+                    />
+                {/if}
+
+                {#if openGraph.article.expirationTime}
+                    <meta
+                        property="article:expiration_time"
+                        content={openGraph.article.expirationTime}
+                    />
+                {/if}
+
+                {#if openGraph.article.authors && openGraph.article.authors.length}
+                    {#each openGraph.article.authors as author (author)}
+                        <meta property="article:author" content={author} />
+                    {/each}
+                {/if}
+
+                {#if openGraph.article.section}
+                    <meta
+                        property="article:section"
+                        content={openGraph.article.section}
+                    />
+                {/if}
+
+                {#if openGraph.article.tags && openGraph.article.tags.length}
+                    {#each openGraph.article.tags as tag (tag)}
+                        <meta property="article:tag" content={tag} />
+                    {/each}
+                {/if}
+            {:else if openGraph.type.toLowerCase() === "video.movie" || openGraph.type.toLowerCase() === "video.episode" || openGraph.type.toLowerCase() === "video.tv_show" || (openGraph.type.toLowerCase() === "video.other" && openGraph.video)}
+                {#if openGraph.video?.actors && openGraph.video.actors.length}
+                    {#each openGraph.video.actors as actor (actor)}
+                        {#if actor.profile}
+                            <meta
+                                property="video:actor"
+                                content={actor.profile}
+                            />
+                        {/if}
+                        {#if actor.role}
+                            <meta
+                                property="video:actor:role"
+                                content={actor.role}
+                            />
+                        {/if}
+                    {/each}
+                {/if}
+
+                {#if openGraph.video?.directors && openGraph.video.directors.length}
+                    {#each openGraph.video.directors as director (director)}
+                        <meta property="video:director" content={director} />
+                    {/each}
+                {/if}
+
+                {#if openGraph.video?.writers && openGraph.video.writers.length}
+                    {#each openGraph.video.writers as writer (writer)}
+                        <meta property="video:writer" content={writer} />
+                    {/each}
+                {/if}
+
+                {#if openGraph.video?.duration}
+                    <meta
+                        property="video:duration"
+                        content={openGraph.video.duration.toString()}
+                    />
+                {/if}
+
+                {#if openGraph.video?.releaseDate}
+                    <meta
+                        property="video:release_date"
+                        content={openGraph.video.releaseDate}
+                    />
+                {/if}
+
+                {#if openGraph.video?.tags && openGraph.video.tags.length}
+                    {#each openGraph.video.tags as tag (tag)}
+                        <meta property="video:tag" content={tag} />
+                    {/each}
+                {/if}
+
+                {#if openGraph.video?.series}
+                    <meta
+                        property="video:series"
+                        content={openGraph.video.series}
+                    />
+                {/if}
+            {/if}
+        {/if}
+
+        {#if openGraph.title || updatedTitle}
+            <meta
+                property="og:title"
+                content={openGraph.title || updatedTitle}
+            />
+        {/if}
+
+        {#if openGraph.description || description}
+            <meta
+                property="og:description"
+                content={openGraph.description || description}
+            />
+        {/if}
+
+        {#if openGraph.images && openGraph.images.length}
+            {#each openGraph.images as image (image)}
+                <meta property="og:image" content={image.url} />
+                {#if image.alt}
+                    <meta property="og:image:alt" content={image.alt} />
+                {/if}
+                {#if image.width}
+                    <meta
+                        property="og:image:width"
+                        content={image.width.toString()}
+                    />
+                {/if}
+                {#if image.height}
+                    <meta
+                        property="og:image:height"
+                        content={image.height.toString()}
+                    />
+                {/if}
+                {#if image.secureUrl}
+                    <meta
+                        property="og:image:secure_url"
+                        content={image.secureUrl.toString()}
+                    />
+                {/if}
+                {#if image.type}
+                    <meta
+                        property="og:image:type"
+                        content={image.type.toString()}
+                    />
+                {/if}
+            {/each}
+        {/if}
+
+        {#if openGraph.videos && openGraph.videos.length}
+            {#each openGraph.videos as video (video)}
+                <meta property="og:video" content={video.url} />
+                {#if video.width}
+                    <meta
+                        property="og:video:width"
+                        content={video.width.toString()}
+                    />
+                {/if}
+                {#if video.height}
+                    <meta
+                        property="og:video:height"
+                        content={video.height.toString()}
+                    />
+                {/if}
+                {#if video.secureUrl}
+                    <meta
+                        property="og:video:secure_url"
+                        content={video.secureUrl.toString()}
+                    />
+                {/if}
+                {#if video.type}
+                    <meta
+                        property="og:video:type"
+                        content={video.type.toString()}
+                    />
+                {/if}
+            {/each}
+        {/if}
+
+        {#if openGraph.audio && openGraph.audio.length}
+            {#each openGraph.audio as audio (audio)}
+                <meta property="og:audio" content={audio.url} />
+                {#if audio.secureUrl}
+                    <meta
+                        property="og:audio:secure_url"
+                        content={audio.secureUrl.toString()}
+                    />
+                {/if}
+                {#if audio.type}
+                    <meta
+                        property="og:audio:type"
+                        content={audio.type.toString()}
+                    />
+                {/if}
+            {/each}
+        {/if}
+
+        {#if openGraph.locale}
+            <meta property="og:locale" content={openGraph.locale} />
+        {/if}
+
+        {#if openGraph.siteName}
+            <meta property="og:site_name" content={openGraph.siteName} />
+        {/if}
+    {/if}
+
+    {#if additionalMetaTags && Array.isArray(additionalMetaTags)}
+        {#each additionalMetaTags as tag (tag)}
+            <meta
+                {...tag.httpEquiv
+                    ? { ...tag, "http-equiv": tag.httpEquiv }
+                    : tag}
+            />
+        {/each}
+    {/if}
+
+    {#if additionalLinkTags?.length}
+        {#each additionalLinkTags as tag (tag)}
+            <link {...tag} />
+        {/each}
+    {/if}
+</svelte:head>
diff --git a/web/src/lib/models/trail.ts b/web/src/lib/models/trail.ts
index 48ebab2a..bd0fa084 100644
--- a/web/src/lib/models/trail.ts
+++ b/web/src/lib/models/trail.ts
@@ -24,6 +24,7 @@ class Trail {
     photos: string[];
     gpx?: string;
     created?: string;
+    updated?: string;
     category?: string;
     tags: string[];
     waypoints: string[];
diff --git a/web/src/routes/map/trail/[handle]/[id]/+page.svelte b/web/src/routes/map/trail/[handle]/[id]/+page.svelte
index 0c530c3e..2c2d0627 100644
--- a/web/src/routes/map/trail/[handle]/[id]/+page.svelte
+++ b/web/src/routes/map/trail/[handle]/[id]/+page.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
     import { page } from "$app/state";
+    import MetaTags from "$lib/components/base/meta_tags.svelte";
     import MapWithElevationMaplibre from "$lib/components/trail/map_with_elevation_maplibre.svelte";
     import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
+    import { getFileURL } from "$lib/util/file_util.js";
     import * as M from "maplibre-gl";
     import "photoswipe/style.css";
     import { _ } from "svelte-i18n";
@@ -13,9 +15,27 @@
     let markers: M.Marker[] = $state([]);
 </script>
 
-<svelte:head>
-    <title>{trail.name} | {$_("map")} | wanderer</title>
-</svelte:head>
+
+<MetaTags
+    title={`${data.trail.name} | ${$_("map")} | wanderer`}
+    openGraph={{
+        title: data.trail.name,
+        description: data.trail.description,
+        url: page.url.origin + page.url.pathname,
+        type: "article",
+        article: {
+            publishedTime: data.trail.created,
+            modifiedTime: data.trail.updated,
+            authors: [
+                `${page.url.origin}/profile/@${data.trail.expand?.author?.preferred_username ?? ""}`,
+            ],
+            tags: data.trail.expand?.tags?.map((t) => t.name),
+        },
+        images: data.trail.photos.map((p) => ({
+            url: page.url.origin + getFileURL(data.trail, p),
+        })),
+    }}
+></MetaTags>
 
 <main class="grid grid-cols-1 md:grid-cols-[458px_1fr] gap-x-1 gap-y-4">
     <div id="panel" class="hidden md:block">
diff --git a/web/src/routes/profile/[handle]/+layout.svelte b/web/src/routes/profile/[handle]/+layout.svelte
index 642a7c44..f2534725 100644
--- a/web/src/routes/profile/[handle]/+layout.svelte
+++ b/web/src/routes/profile/[handle]/+layout.svelte
@@ -10,6 +10,7 @@
     import { _ } from "svelte-i18n";
     import errorDark from "$lib/assets/svgs/empty_states/error_dark.svg";
     import errorLight from "$lib/assets/svgs/empty_states/error_light.svg";
+    import MetaTags from "$lib/components/base/meta_tags.svelte";
 
     let { data, children } = $props();
 
@@ -55,6 +56,26 @@
     }
 </script>
 
+<MetaTags
+    title={`${$_("profile")} | wanderer`}
+    openGraph={{
+        title: data.profile.username,
+        description: data.profile.bio,
+        url: `${page.url.origin}/profile/@${data.profile.preferredUsername}`,
+        type: "profile",
+        profile: {
+            username: data.profile.preferredUsername,
+        },
+        images: [
+            {
+                url:
+                    data.profile.icon ||
+                    `https://api.dicebear.com/7.x/initials/svg?seed=${data.profile.preferredUsername}&backgroundType=gradientLinear`,
+            },
+        ],
+    }}
+/>
+
 <div
     class="grid grid-cols-1 md:grid-cols-[356px_minmax(0,_1fr)] gap-6 max-w-6xl mx-4 md:mx-auto items-start"
 >
@@ -69,8 +90,7 @@
                 />
                 <div>
                     <h4 class="text-2xl font-semibold col-start-2">
-                        {data.profile.username ??
-                            "?"}
+                        {data.profile.username ?? "?"}
                     </h4>
                     <p class="text-sm text-gray-500 mb-4 break-all">
                         {data.profile.acct}
diff --git a/web/src/routes/profile/[handle]/+page.svelte b/web/src/routes/profile/[handle]/+page.svelte
index 1a9f7130..4a83b03d 100644
--- a/web/src/routes/profile/[handle]/+page.svelte
+++ b/web/src/routes/profile/[handle]/+page.svelte
@@ -9,9 +9,7 @@
     import { profile_timeline_index } from "$lib/stores/profile_store.js";
     import { theme } from "$lib/stores/theme_store.js";
     import { getFileURL } from "$lib/util/file_util.js";
-    import { HTML } from "@threlte/extras";
     import { _ } from "svelte-i18n";
-    import { temp } from "three/examples/jsm/nodes/Nodes.js";
 
     let { data } = $props();
 
diff --git a/web/src/routes/trail/view/[handle]/[id]/+page.svelte b/web/src/routes/trail/view/[handle]/[id]/+page.svelte
index dc902935..15c9be10 100644
--- a/web/src/routes/trail/view/[handle]/[id]/+page.svelte
+++ b/web/src/routes/trail/view/[handle]/[id]/+page.svelte
@@ -1,13 +1,35 @@
 <script lang="ts">
     import { page } from "$app/state";
+    import MetaTags from "$lib/components/base/meta_tags.svelte";
     import TrailInfoPanel from "$lib/components/trail/trail_info_panel.svelte";
     import { trail } from "$lib/stores/trail_store";
+    import { getFileURL } from "$lib/util/file_util.js";
     import { _ } from "svelte-i18n";
 
     let { data } = $props();
 </script>
 
 {#if data.trail}
+    <MetaTags
+        title={`${data.trail.name} | ${$_("trail", { values: { n: 1 } })} | wanderer`}
+        openGraph={{
+            title: data.trail.name,
+            description: data.trail.description,
+            url: page.url.origin + page.url.pathname,
+            type: "article",
+            article: {
+                publishedTime: data.trail.created,
+                modifiedTime: data.trail.updated,
+                authors: [
+                    `${page.url.origin}/profile/@${data.trail.expand?.author?.preferred_username ?? ""}`,
+                ],
+                tags: data.trail.expand?.tags?.map((t) => t.name),
+            },
+            images: data.trail.photos.map((p) => ({
+                url: page.url.origin + getFileURL(data.trail, p),
+            })),
+        }}
+    ></MetaTags>
     <TrailInfoPanel
         activeTab={parseInt(page.url.searchParams.get("t") ?? "0")}
         initTrail={data.trail}
@@ -15,7 +37,3 @@
         handle={page.params.handle}
     ></TrailInfoPanel>
 {/if}
-<svelte:head>
-    <title>{$trail.name} | {$_("trail", { values: { n: 1 } })} | wanderer</title
-    >
-</svelte:head>