From 8ea96eafa1729af188f5e58ca4eb4029b67f0550 Mon Sep 17 00:00:00 2001
From: Miley Chandonnet <email@miley.codes>
Date: Thu, 12 Feb 2026 20:53:34 -0500
Subject: [PATCH] Add Open Graph and Twitter Card meta tags for social previews

Adds Open Graph and Twitter Card meta tags to the HTML head with site-level defaults. Implements dynamic meta tag updates in the frontend router so page-specific content (blog post titles, excerpts, images, and URLs) is reflected in the DOM for modern crawlers. Fixes social preview badges displaying incomplete information.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/commonMain/resources/index.html           | 14 +++++
 src/jsMain/kotlin/codes/miley/frontend/App.kt | 56 +++++++++++++++++--
 2 files changed, 66 insertions(+), 4 deletions(-)

diff --git a/src/commonMain/resources/index.html b/src/commonMain/resources/index.html
index ff36096..7d5cb20 100644
--- a/src/commonMain/resources/index.html
+++ b/src/commonMain/resources/index.html
@@ -5,6 +5,20 @@
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Miley Chandonnet</title>
     <link rel="icon" type="image/svg+xml" href="favicon.svg">
+
+    <!-- Open Graph -->
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="Miley Chandonnet">
+    <meta property="og:title" content="Miley Chandonnet">
+    <meta property="og:description" content="Native Android Application Engineer">
+    <meta property="og:url" content="https://miley.codes">
+    <meta property="og:image" content="https://miley.codes/blog/dark-factory-needs-windows/demo.gif">
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="Miley Chandonnet">
+    <meta name="twitter:description" content="Native Android Application Engineer">
+    <meta name="twitter:image" content="https://miley.codes/blog/dark-factory-needs-windows/demo.gif">
     <!-- Google Analytics -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-9MPHTXCPC7"></script>
     <script>
diff --git a/src/jsMain/kotlin/codes/miley/frontend/App.kt b/src/jsMain/kotlin/codes/miley/frontend/App.kt
index 23604cd..41c7b73 100644
--- a/src/jsMain/kotlin/codes/miley/frontend/App.kt
+++ b/src/jsMain/kotlin/codes/miley/frontend/App.kt
@@ -16,6 +16,25 @@ import kotlinx.browser.document
 import kotlinx.browser.window
 import kotlinx.coroutines.ExperimentalCoroutinesApi
 import kotlinx.coroutines.flow.*
+import org.w3c.dom.HTMLMetaElement
+
+private fun setMetaTag(attrName: String, attrValue: String, content: String) {
+    val selector = "meta[$attrName=\"$attrValue\"]"
+    val element = document.querySelector(selector) as? HTMLMetaElement
+    if (element != null) {
+        element.content = content
+    }
+}
+
+private fun updateMetaTags(title: String, description: String, url: String, image: String) {
+    setMetaTag("property", "og:title", title)
+    setMetaTag("property", "og:description", description)
+    setMetaTag("property", "og:url", url)
+    setMetaTag("property", "og:image", image)
+    setMetaTag("name", "twitter:title", title)
+    setMetaTag("name", "twitter:description", description)
+    setMetaTag("name", "twitter:image", image)
+}
 
 private fun trackPageView(route: Map<String, String>) {
     val path = when {
@@ -91,13 +110,42 @@ fun main() {
                 trackPageView(route)
                 val page = route["page"]
 
-                document.title = when {
+                when {
                     page == "blog" && route.containsKey("post") -> {
                         val post = ALL_POSTS.find { it.id == route["post"] }
-                        post?.title?.let { "$it | Miley Chandonnet" } ?: "Miley Chandonnet"
+                        if (post != null) {
+                            document.title = "${post.title} | Miley Chandonnet"
+                            updateMetaTags(
+                                title = post.title,
+                                description = post.excerpt,
+                                url = "https://miley.codes/#page=blog&post=${post.id}",
+                                image = "https://miley.codes/blog/${post.id}/demo.gif",
+                            )
+                            setMetaTag("property", "og:type", "article")
+                        } else {
+                            document.title = "Miley Chandonnet"
+                        }
+                    }
+                    page == "blog" -> {
+                        document.title = "Blog | Miley Chandonnet"
+                        updateMetaTags(
+                            title = "Blog | Miley Chandonnet",
+                            description = "Native Android Application Engineer",
+                            url = "https://miley.codes/#page=blog",
+                            image = "https://miley.codes/blog/dark-factory-needs-windows/demo.gif",
+                        )
+                        setMetaTag("property", "og:type", "website")
+                    }
+                    else -> {
+                        document.title = "Miley Chandonnet"
+                        updateMetaTags(
+                            title = "Miley Chandonnet",
+                            description = "Native Android Application Engineer",
+                            url = "https://miley.codes",
+                            image = "https://miley.codes/blog/dark-factory-needs-windows/demo.gif",
+                        )
+                        setMetaTag("property", "og:type", "website")
                     }
-                    page == "blog" -> "Blog | Miley Chandonnet"
-                    else -> "Miley Chandonnet"
                 }
 
                 header()