From 453daa9319d14892726567602b58551cdad4d358 Mon Sep 17 00:00:00 2001
From: James Shiffer <2191476+scoliono@users.noreply.github.com>
Date: Mon, 31 Aug 2020 17:24:55 -0700
Subject: [PATCH] SEO improvements

---
 package-lock.json          | 30 +++++++++++++++++++++++++++++-
 src/routes/a/[slug].svelte | 38 +++++++++++++++++++++++++++++++++++++-
 src/routes/c/[slug].svelte | 18 ++++++++++++++++++
 src/routes/index.svelte    |  1 +
 src/template.html          |  3 +--
 5 files changed, 86 insertions(+), 4 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 637f28c..c608ef4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2014,6 +2014,16 @@
       "dev": true,
       "optional": true
     },
+    "bindings": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz",
+      "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "file-uri-to-path": "1.0.0"
+      }
+    },
     "bl": {
       "version": "2.2.1",
       "resolved": "https://registry.npmjs.org/bl/-/bl-2.2.1.tgz",
@@ -3411,6 +3421,13 @@
       "integrity": "sha512-0btnI/H8f2pavGMN8w40mlSKOfTK2SVJmBfBeVIj3kNw0swwgzyRq0d5TJVOwodFmtvpPeWPN/MCcfuWF0Ezbw==",
       "dev": true
     },
+    "file-uri-to-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz",
+      "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==",
+      "dev": true,
+      "optional": true
+    },
     "fill-range": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-4.0.0.tgz",
@@ -4723,6 +4740,13 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "nan": {
+      "version": "2.14.1",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.14.1.tgz",
+      "integrity": "sha512-isWHgVjnFjh2x2yuJ/tj3JbwoHu3UC2dX5G/88Cm24yB6YopVgxvBObDY7n5xW6ExmFhJpSEQqFPvq9zaXc8Jw==",
+      "dev": true,
+      "optional": true
+    },
     "nanomatch": {
       "version": "1.2.13",
       "resolved": "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz",
@@ -6889,7 +6913,11 @@
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
           "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==",
           "dev": true,
-          "optional": true
+          "optional": true,
+          "requires": {
+            "bindings": "^1.5.0",
+            "nan": "^2.12.1"
+          }
         },
         "glob-parent": {
           "version": "3.1.0",
diff --git a/src/routes/a/[slug].svelte b/src/routes/a/[slug].svelte
index ac1c7c6..46d51bd 100644
--- a/src/routes/a/[slug].svelte
+++ b/src/routes/a/[slug].svelte
@@ -3,7 +3,12 @@
         // the `slug` parameter is available because
         // this file is called [slug].svelte
         const articleRes = await this.fetch(`a/${params.slug}.json`);
-        const article = await articleRes.json();
+        let article = await articleRes.json();
+
+        // parse article steps from numbered list
+        article.steps = [...article.html.matchAll(/>\d+\. ([^<]+)</g)]
+                        .map(i => i[1])
+                        .map(i => ({ "@type": "HowToStep", text: i }));
 
         const commentsRes = await this.fetch(`a/${params.slug}/comments`);
         const comments = await commentsRes.json();
@@ -166,6 +171,37 @@
 
 <svelte:head>
     <title>{article.title} | HOWFEED.BIZ</title>
+    <meta name="author" content={article.author.realname}>
+    {@html `<script type="application/ld+json">{
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [{
+        "@type": "ListItem",
+        "position": 1,
+        "name": "HowFeed.biz",
+        "item": "https://howfeed.biz"
+      },{
+        "@type": "ListItem",
+        "position": 2,
+        "name": "${article.category.name}",
+        "item": "https://howfeed.biz/c/${article.category.slug}"
+      },{
+        "@type": "ListItem",
+        "position": 3,
+        "name": "${article.title}",
+        "item": "https://howfeed.biz/a/${article.slug}"
+      }]
+    }</script>`}
+    {@html `<script type="application/ld+json">{
+      "@context": "http://schema.org",
+      "@type": "HowTo",
+      "image": {
+        "@type": "ImageObject",
+        "url": "https://howfeed.biz/a/${article.image}"
+      },
+      "name": ${JSON.stringify(article.title)},
+      "step": ${JSON.stringify(article.steps)}
+    }</script>`}
 </svelte:head>
 
 <div class="content">
diff --git a/src/routes/c/[slug].svelte b/src/routes/c/[slug].svelte
index 78b374e..cec249d 100644
--- a/src/routes/c/[slug].svelte
+++ b/src/routes/c/[slug].svelte
@@ -19,6 +19,24 @@
 
 <svelte:head>
     <title>{category.name} Articles | HOWFEED.BIZ</title>
+    <meta name="description" content={`Read our articles about ${category.name} on HowFeed.biz.`}>
+    <script type="application/ld+json">{`
+    {
+      "@context": "https://schema.org",
+      "@type": "BreadcrumbList",
+      "itemListElement": [{
+        "@type": "ListItem",
+        "position": 1,
+        "name": "HowFeed.biz",
+        "item": "https://howfeed.biz"
+      },{
+        "@type": "ListItem",
+        "position": 2,
+        "name": "${article.category.name}",
+        "item": "https://howfeed.biz/c/${article.category.slug}"
+      }]
+    }
+    `}</script>
 </svelte:head>
 
 <style>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index dc5ce36..f9381d4 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -52,6 +52,7 @@
 
 <svelte:head>
     <title>HOWFEED.BIZ</title>
+    <meta name="description" content="HOWFEED.BIZ: Helping you to navigate a modern world.">
 </svelte:head>
 
 <div class="background"></div>
diff --git a/src/template.html b/src/template.html
index ba60d2d..40f4f49 100644
--- a/src/template.html
+++ b/src/template.html
@@ -3,13 +3,12 @@
 <head>
 	<meta charset='utf-8'>
 	<meta name='viewport' content='width=device-width,initial-scale=1.0'>
-    <meta name='description' content='HOWFEED.BIZ: Helping you to navigate a modern world.'>
     <meta name='keywords' content='news, satire, blog'>
 	<meta name='theme-color' content='#508FC3'>
     %sapper.base%
 	<link rel='stylesheet' href='global.css'>
 	<link rel='icon' type='image/png' href='favicon.png'>
-              <link href='https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap' rel='stylesheet'>
+    <link href='https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;700&display=swap' rel='stylesheet'>
 	%sapper.styles%
 	%sapper.head%
 	<!-- Global site tag (gtag.js) - Google Analytics -->