A bit more refinement on the blog articles and image format for cards.

client/components/SEOTricks.svelte

@@ -1,12 +1,16 @@
 <script>
   import config from "$/client/config.js";
 
+  const og_url = new URL(config.og_base_host);
+
   export let og = {
     "title": "", // title of the article
     "description": "", // description for inside preview
     "image": "", // image to display, 5mb/1200/627 max
     "url": config.og_base_host, // URL to article
     "type": "website", // not mentioned on linked in but needed
+    "tag": "",
+    "tags": [],
   }
 
   // taken from https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
@@ -25,6 +29,9 @@
     "player:stream": "", // URL to raw video/audio stream
   }
 
+  // have to do this here because reasons
+  twitter.domain = og_url.hostname;
+
   export let language = "en";
 
   export let schema_context = "http://schema.org";
@@ -41,9 +48,23 @@
   <meta name="description" content={ og.description }>
   <!--OG Spec for LinkedIn/Facebook/Others -->
   {#each Object.keys(og) as key}
+    {#if key === "tags" && og.tags.length > 0}
+      {#each og.tags as tag}
+        <meta property="article:tag" content={tag} />
+      {/each}
+    {:else if og[key] !== "" && og[key] !== undefined}
       <meta property="og:{ key }" content="{ og[key] }" />
+    {/if}
   {/each}
 
+  {#if og.type === "article" && og.published_time}
+    <meta property="article:published_time" content={og.published_time} />
+  {/if}
+
+  {#if og.type === "article" && og.modified_time}
+    <meta property="article:modified_time" content={og.modified_time} />
+  {/if}
+
   <!--Twitter Spec for ... Twitter -->
   {#each Object.keys(twitter) as key}
     <meta name="twitter:{key}" content={ twitter[key] }/>