Implement more SEO junk in the OGPreview thing.

client/components/OGPreview.svelte

@@ -1,9 +1,11 @@
 <script>
+  import config from "$/client/config.js";
+
   export let og = {
     "title": "", // title of the article
     "description": "", // description for inside preview
     "image": "", // image to display, 5mb/1200/627 max
-    "url": "", // URL to article
+    "url": config.og_base_host, // URL to article
     "type": "website", // not mentioned on linked in but needed
   }
 
@@ -11,20 +13,36 @@
   // also refer to https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/player-card
   export let twitter = {
     "card": "summary", // must be summary or player
-    "creator": "", // @username of content creator
-    "description": "", // max 200 chars
+    "creator": config.twitter_user, // @username of content creator
+    "description": og.description, // max 200 chars
     "image": "", // max 5mb image url 1:1 ratio
     "image:alt": "", // max 420 chars image alt
-    "site": "", // @username of site
-    "title": "", // max 70 chars title
+    "site": config.twitter_user, // @username of site
+    "title": og.title, // max 70 chars title
     "player": "", // https url of player iframe
     "player:width": "", // width iframe in pixels
     "player:height": "", // height iframe in pixels
     "player:stream": "", // URL to raw video/audio stream
   }
+
+  export let language = "en";
+
+  export let json_ld = {
+    "@context": "http://schema.org",
+    "@type": "WebSite",
+    "name": og.title,
+    "url": og.url,
+    "sameAs": [`https://twitter.com/${twitter.site}`],
+  }
 </script>
 
 <svelte:head>
+  <meta name="description" content={ og.description }>
+  <!-- JSON-LD spec -->
+  <script type="application/ld+json">
+    { JSON.stringify(json_ld) }
+  </script>
+
   <!--OG Spec for LinkedIn/Facebook/Others -->
   {#each Object.keys(og) as key}
     <meta property="og:{ key }" content="{ og[key] }" />
@@ -34,4 +52,7 @@
   {#each Object.keys(twitter) as key}
     <meta name="twitter:{key}" content={ twitter[key] }/>
   {/each}
+
+  <link rel="alternate" hreflang={ language } href={ og.url } />
+  <link rel="canonical" href={ og.url }/>
 </svelte:head>

commands/templates/client/config.js

@@ -63,7 +63,11 @@ export const product_id = 1;
   */
 export const base_host = 'http://127.0.0.1:5001';
 
+/*
+ * This is for the OGPreview component.
+ */
 export const og_base_host = "http://127.0.0.1:5001";
+
 /*
   Used in emails and pages to tell people who to email.
  */
@@ -119,4 +123,11 @@ export const twitter_user = "@lzsthw";
 /*
   Primarily used in the `commands/gen_players.js` command to generate various "cards", such as Video player cards for Twitter or OG Video cards for LinkedIn and Facebook.
  */
-export const site_name = "127.0.0.1:5001";
+export const site_name = "Bandolier Template";
+
+export default  {
+  fake_payments, webtorrent, btcpay_url, product_id,
+  og_base_host, support_email, paypal_public, stripe_public,
+  darkmode_default,
+  site_name, twitter_user, log_levels, register_enabled,
+}

rendered/pages/test_video_card.svelte

@@ -2,7 +2,7 @@
   import Layout from "$/rendered/Layout.svelte";
   import OGPreview from "$/client/components/OGPreview.svelte";
   import { Hydrate } from '@jamcart/7ty/components';
-  import { og_base_host, base_host } from "$/client/config.js";
+  import config from "$/client/config.js";
   import Video from "$/client/components/Video.svelte";
   let source = "/videos/sample.mp4";
   let poster = "/images/sample.jpg";
@@ -18,17 +18,17 @@
     "title": "LJSTHW OG/Twitter Video Test", // title of the article
     "description": "A simple test of the OG/Twitter style of sharing cards with video.", // description for inside preview
     "image": poster, // image to display, 5mb/1200/627 max
-    "url": `${ og_base_host }/test_video_card.html`, // URL to article
+    "url": `${ config.og_base_host }/test_video_card.html`, // URL to article
     "type": "website", // not mentioned on linked in but needed
   }
 
   let twitter = {
     "card": "player", // must be summary, summary_large_image, app, player
-    "creator": "@lzsthw", // @username of content creator
+    "creator": config.twitter_user, // @username of content creator
     "description": og.description, // max 200 chars
     "image": og.image,
     "image:alt": "A drawing of Zed by Zed.", // max 420 chars image alt
-    "site": "@lzsthw", // @username of site
+    "site": config.twitter_user, // @username of site
     "title": og.title,
     "player": `${ og_base_host }/video_container.html`,
     "player:width": "1280",