Add Open Graph headers

diff --git a/index.html b/index.html
index 2bc8f356a1f32f0074a118f40265b4886b70a041..fc7cb1d370fd2ba091d1281feb0b38c44007e2f5 100644 (file)
--- a/index.html
+++ b/index.html
@@ -5,6 +5,12 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <meta name="description" content="Notes on web development, crypto, self-hosting, and tech in general.">
+  <meta property="og:title" content="ardislu.dev">
+  <meta property="og:description" content="Notes on web development, crypto, self-hosting, and tech in general.">
+  <meta property="og:type" content="website">
+  <meta property="og:url" content="https://ardislu.dev/">
+  <meta property="og:image" content="https://og-image.ardislu.dev/Notes%20on%20**web%20development**%2C%20**crypto**%2C%20**self-hosting**%2C%20and%20**tech**%20in%20general..png">
+  <meta property="og:image:alt" content="Website logo above the text 'notes on web development, crypto, self-hosting, and tech in general.'">
   <link rel="icon" href="/favicon.ico">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/styles/default.min.css">
   <link rel="stylesheet" href="/style.css">

diff --git a/script.js b/script.js
index b2a20d2b5faacaf83402577b48b34f46dd80c2c5..e69efb5661da06d0cd957370530c97720ec40ddb 100644 (file)
--- a/script.js
+++ b/script.js
@@ -28,7 +28,12 @@ const postMain = components.get('post-main');
 /* Fetch important <head> elements for convenience */
 const head = {
   description: document.querySelector('meta[name="description"]'),
-  canonical: document.querySelector('link[rel="canonical"]')
+  canonical: document.querySelector('link[rel="canonical"]'),
+  ogTitle: document.querySelector('meta[property="og:title"]'),
+  ogDescription: document.querySelector('meta[property="og:description"]'),
+  ogUrl: document.querySelector('meta[property="og:url"]'),
+  ogImage: document.querySelector('meta[property="og:image"]'),
+  ogImageAlt: document.querySelector('meta[property="og:image:alt"]')
 };
 
 /* Hydrate the loaders */
@@ -120,6 +125,11 @@ async function showPage(path) {
     document.title = 'ardislu.dev';
     head.description.content = 'Notes on web development, crypto, self-hosting, and tech in general.';
     head.canonical.href = 'https://ardislu.dev';
+    head.ogTitle.content = 'ardislu.dev';
+    head.ogDescription.content = 'Notes on web development, crypto, self-hosting, and tech in general.';
+    head.ogUrl.content = 'https://ardislu.dev';
+    head.ogImage.content = 'https://og-image.ardislu.dev/Notes%20on%20**web%20development**%2C%20**crypto**%2C%20**self-hosting**%2C%20and%20**tech**%20in%20general..png';
+    head.ogImageAlt.content = "Website logo above the text 'notes on web development, crypto, self-hosting, and tech in general.'";
     homeMain.innerHTML = '';
     for (const [path, post] of posts) {
       homeMain.insertAdjacentHTML('beforeend',
@@ -136,6 +146,11 @@ async function showPage(path) {
     document.title = post.title;
     head.description.content = post.description;
     head.canonical.href = `https://ardislu.dev${path}`;
+    head.ogTitle.content = post.title;
+    head.ogDescription.content = post.description;
+    head.ogUrl.content = `https://ardislu.dev${path}`;
+    head.ogImage.content = `https://og-image.ardislu.dev/${encodeURIComponent(post.title)}.png`;
+    head.ogImageAlt.content = `Website logo above the text '${post.title}'`;
     postHeader.querySelector('#edit').href = `https://docs.google.com/document/d/${post.id}/edit`;
 
     if (post.content === undefined) {