SEO metadata improvements

flatpickles · Nov 18, 2023 · d4eecb9 · d4eecb9
1 parent 993dfca
commit d4eecb9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 3 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "sketchbook2",
-    "version": "0.2.3",
+    "version": "0.2.4",
     "private": true,
     "scripts": {
         "dev": "vite dev",

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -5,11 +5,30 @@
 
     export let data: PageData;
     const ogMeta = OGContentGen.top(data.requestUrl);
+
+    // Generate schema.org markup for the project
+    $: schemaMarkup = {
+        '@context': 'http://schema.org',
+        '@type': 'CollectionPage',
+        'name': `${ogMeta.title}`
+    } as Record<string, string>;
+    $: if (ogMeta.description) {
+        schemaMarkup['description'] = ogMeta.description;
+    }
+    $: if (ogMeta.author) {
+        schemaMarkup['creator'] = ogMeta.author;
+    }
 </script>
 
 <svelte:head>
+    <!-- Metadata -->
     <title>{content.title}</title>
+    {#if ogMeta.description}
+        <meta name="description" content={ogMeta.description} />
+    {/if}
+    <link rel="canonical" href={ogMeta.url} />
 
+    <!-- Open Graph / Facebook / Twitter -->
     <meta property="og:title" content={ogMeta.title} />
     <meta name="twitter:title" content={ogMeta.title} />
     <meta property="og:site_name" content={ogMeta.siteName} />
@@ -29,4 +48,7 @@
     {:else}
         <meta name="twitter:card" content="summary" />
     {/if}
+
+    <!-- Schema.org -->
+    {@html `<script type="application/ld+json">${JSON.stringify(schemaMarkup)}</script>`}
 </svelte:head>
diff --git a/src/routes/[key]/+page.svelte b/src/routes/[key]/+page.svelte
@@ -5,11 +5,33 @@
 
     export let data: PageData;
     $: ogMeta = OGContentGen.project(data.requestUrl, data.projectKey, data.projectConfig);
+
+    // Generate schema.org markup for the project
+    $: schemaMarkup = {
+        '@context': 'http://schema.org',
+        '@type': 'CreativeWork',
+        'name': `${ogMeta.title}`
+    } as Record<string, string>;
+    $: if (ogMeta.description) {
+        schemaMarkup['description'] = ogMeta.description;
+    }
+    $: if (data.projectConfig.date) {
+        schemaMarkup['dateCreated'] = data.projectConfig.date.toISOString().split('T')[0];
+    }
+    $: if (ogMeta.author) {
+        schemaMarkup['creator'] = ogMeta.author;
+    }
 </script>
 
 <svelte:head>
+    <!-- Metadata -->
     <title>{data.projectConfig.title}</title>
+    {#if ogMeta.description}
+        <meta name="description" content={ogMeta.description} />
+    {/if}
+    <link rel="canonical" href={ogMeta.url} />
 
+    <!-- Open Graph / Facebook / Twitter -->
     <meta property="og:title" content={ogMeta.title} />
     <meta name="twitter:title" content={ogMeta.title} />
     <meta property="og:site_name" content={ogMeta.siteName} />
@@ -35,6 +57,9 @@
     {#if ogMeta.publishedTime}
         <meta property="article:published_time" content={ogMeta.publishedTime} />
     {/if}
+
+    <!-- Schema.org -->
+    {@html `<script type="application/ld+json">${JSON.stringify(schemaMarkup)}</script>`}
 </svelte:head>
 
 {#if data.projectTuple}