feat: og images (#48)

Co-authored-by: Andrey <[email protected]>
codenomnom · Oct 10, 2024 · b9d88a7 · b9d88a7
1 parent 12200aa
commit b9d88a7
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 5 deletions.
diff --git a/public/qm-og-square.jpg b/public/qm-og-square.jpg
diff --git a/public/qm-og-x.jpg b/public/qm-og-x.jpg
diff --git a/public/qm-og.jpg b/public/qm-og.jpg
diff --git a/src/layouts/main.layout.astro b/src/layouts/main.layout.astro
@@ -15,6 +15,7 @@ interface Props {
 const pathname = new URL(Astro.request.url).pathname;
 
 const title = stripCodeTag(Astro.props.title);
+const description = Astro.props.description || 'I am writing about my experiences as a naval navel-gazer.';
 ---
 
 <!doctype html>
@@ -24,17 +25,27 @@ const title = stripCodeTag(Astro.props.title);
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
     <title>{title}</title>
-    <meta
-      name="description"
-      content={Astro.props.description ||
-        "I am writing about my experiences as a naval navel-gazer."}
-    />
+    <meta name={description} content={description}/>
 
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="manifest" href="/site.webmanifest" />
 
+    <!-- Facebook Meta Tags -->
+    <meta property="og:title" content={title}>
+    <meta property="og:description" content={description}>
+    <meta property="og:image" content="/qm-og.jpg">
+    <meta property="og:url" content="https://quirks-mode.com">
+    <meta property="og:site_name" content={title}>
+    <meta property="og:type" content="website">
+
+    <!-- Twitter Meta Tags -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content={title}>
+    <meta name="twitter:description" content={description}>
+    <meta name="twitter:image" content="/qm-og-x.jpg">
+
     <!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
 
     <!-- <link rel="alternate" href="/feed/feed.xml" type="application/atom+xml" title="{{ metadata.title }}"> -->