Improve metadata

Add JSON LD,
make homepage h-card representative,
Fix bug with byline
fix incorrect OG image aspect ratio in meta
Add og site_name
Add author profile image

packages/website/package.json

@@ -43,6 +43,7 @@
     "rollup": "^4.18.0",
     "rollup-plugin-type-as-json-schema": "^0.2.6",
     "rollup-plugin-visualizer": "^5.12.0",
+    "schema-dts": "^1.1.2",
     "sharp": "^0.33.4",
     "svelte": "^4.2.18",
     "svelte-check": "^3.8.0",

packages/website/src/lib/Hero.svelte

@@ -5,7 +5,7 @@
 
 <div class="hero card edge h-card">
     <div class="logo">
-        <a href={SITE_URL} class="u-url"><img class="u-photo" src={url} alt="Logo" /></a>
+        <a href={SITE_URL} class="u-url u-uid" rel="me"><img class="u-photo" src={url} alt="Logo" /></a>
     </div>
     <div class="content">
         <div>

packages/website/src/lib/metadata.ts

@@ -3,7 +3,7 @@ import { dev } from '$app/environment';
 
 
 
-export const SITE_TITLE = 'JadedBlueEyes';
+export const SITE_TITLE = "Jade's Website";
 
 export const SITE_URL = dev ? "http://localhost:5173" : "https://jade.ellis.link"
 

packages/website/src/routes/+layout.svelte

@@ -3,10 +3,12 @@
     import "$lib/styles.css";
     import Favicons from "$lib/Favicons.svelte";
     import Nav from "$lib/Nav.svelte";
+    import { SITE_TITLE } from "$lib/metadata"
 </script>
 <svelte:head>
     <Favicons />
     <link rel="webmention" href="https://webmention.io/jade.ellis.link/webmention" />
+    <meta property="og:site_name" content={SITE_TITLE}>
 </svelte:head>
 <Nav />
 <main class="main container" id="page-content">

packages/website/src/routes/blog/[...date]/[slug]/+page.svelte

@@ -6,13 +6,20 @@
     export let data;
     import { SITE_URL, SITE_TITLE } from "$lib/metadata";
     import Toc from "$lib/Toc.svelte";
+    import type { WithContext, Thing } from "schema-dts";
+    import pfpUrl from "$lib/logo.svg?url";
     // let GhReleasesDownload: Promise<any>;
     // if (data.ghReleaseData) {
     //     GhReleasesDownload = import("$lib/GhReleasesDownload.svelte").then((m) => m.default)
     // }
     $: canonical = SITE_URL + "/blog/" + data.post.canonical;
 
-    function calcOgURL(slug: string, date: string, ratio?: number, width?: number): URL {
+    function calcOgURL(
+        slug: string,
+        date: string,
+        ratio?: number,
+        width?: number,
+    ): URL {
         let url = new URL(SITE_URL + "/blog/image");
         url.searchParams.set("slug", slug);
         url.searchParams.set("date", date);
@@ -44,10 +51,62 @@
     };
 
     const defaultAuthor = {
+        "@type": "Person",
         name: "Jade Ellis",
         url: "https://jade.ellis.link",
         fediverse: "@JadedBlueEyes@tech.lgbt",
+        image: pfpUrl,
     };
+    $: jsonLd = {
+        "@context": "https://schema.org",
+        "@type": "WebPage",
+        breadcrumb: {
+            "@type": "BreadcrumbList",
+
+            itemListElement: [
+                {
+                    "@type": "ListItem",
+                    position: 1,
+                    name: "Blog",
+                    item: SITE_URL + "/blog",
+                },
+                {
+                    "@type": "ListItem",
+                    position: 2,
+                    name: data.post.title,
+                    item: canonical,
+                },
+            ],
+        },
+        mainEntity: {
+            "@type": "BlogPosting",
+            "@id": canonical,
+            url: canonical,
+            mainEntityOfPage: canonical,
+            name: data.post.title,
+            headline: data.post.title,
+            datePublished: new Date(data.post.date).toISOString(),
+            author: defaultAuthor,
+            description: data.post.description,
+            wordCount: data.post.readingTime.words,
+            image: {
+                "@type": "ImageObject",
+                width: "1200",
+                height: "630",
+                url: calcOgURL(
+                    data.post.slug,
+                    data.post.date,
+                    630 / 1200,
+                    1200,
+                ).toString(),
+            },
+            isPartOf: {
+                "@type": "Blog",
+                "@id": SITE_URL + "/blog",
+                name: "Jade's Blog",
+            },
+        },
+    } as WithContext<Thing>;
 </script>
 
 <svelte:head>
@@ -66,10 +125,21 @@
     {#if defaultAuthor?.fediverse}
         <meta name="fediverse:creator" content={defaultAuthor?.fediverse} />
     {/if}
-    <meta property="og:image" content={calcOgURL(data.post.slug, data.post.date, 630/1200, 1200).toString()} />
-    <meta property="og:image:width" content={(1200).toString()} />
-    <meta property="og:image:height" content={(1200 / 2).toString()} />
+    <meta
+        property="og:image"
+        content={calcOgURL(
+            data.post.slug,
+            data.post.date,
+            630 / 1200,
+            1200,
+        ).toString()}
+    />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <meta property="og:image:type" content="image/png" />
+    {@html `<script type="application/ld+json">${
+        JSON.stringify(jsonLd) + "<"
+    }/script>`}
 </svelte:head>
 
 <SvelteSeo
@@ -81,11 +151,16 @@
         // site: "@primalmovement",
         title: data.post.title,
         description: data.post.description,
-        image: calcOgURL(data.post.slug, data.post.date, 630/1200, 1200).toString()
+        image: calcOgURL(
+            data.post.slug,
+            data.post.date,
+            630 / 1200,
+            1200,
+        ).toString(),
     }}
     openGraph={{
         title: data.post.title,
-        description: data.post.description
+        description: data.post.description,
     }}
 />
 
@@ -96,8 +171,14 @@
             >Published on <time class="dt-published" datetime={data.post.date}
                 >{new Date(data.post.date).toLocaleDateString()}</time
             ></a
-        > <span
-            >by <a class="p-author h-card" href={defaultAuthor.url}
+        >
+        <span class="author p-author h-card vcard">
+            by <img
+                loading="lazy"
+                style="display: none;"
+                src={defaultAuthor.image}
+                class="avatar avatar-96 photo u-photo"
+            /><a class="u-url url fn n p-name" href={defaultAuthor.url}
                 >{defaultAuthor.name}</a
             ></span
         >

pnpm-lock.yaml

@@ -219,6 +219,9 @@ importers:
       rollup-plugin-visualizer:
         specifier: ^5.12.0
         version: 5.12.0(rollup@4.18.0)
+      schema-dts:
+        specifier: ^1.1.2
+        version: 1.1.2(typescript@5.4.5)
       sharp:
         specifier: ^0.33.4
         version: 0.33.4