feat: add Open Graph and X Card meta tags with server-side crawler proxy

js/components/pages/page-listing.js

@@ -32,6 +32,7 @@ class PageListing extends HTMLElement {
     disconnectedCallback() {
         if (this.unsubscribe) this.unsubscribe()
         window.removeEventListener('currency-changed', this.handleCurrencyChange)
+        this.resetMetaTags()
     }
 
     handleCurrencyChange() {
@@ -67,6 +68,58 @@ class PageListing extends HTMLElement {
         this.loading = false
         this.render()
         this.setupEventListeners()
+        this.updateMetaTags()
+    }
+
+    updateMetaTags() {
+        if (!this.listing) return
+
+        const title = `${this.listing.title} – dgray.io`
+        const description = (this.listing.description || '').substring(0, 160)
+        const imageId = this.listing.images?.[0]?.directus_files_id?.id || this.listing.images?.[0]?.directus_files_id
+        const imageUrl = imageId ? directus.getFileUrl(imageId, { width: 1200, height: 630, fit: 'cover' }) : 'https://dgray.io/assets/press/og-image.png'
+        const url = `https://dgray.io/#/listing/${this.listing.id}`
+
+        document.title = title
+        this._setMeta('description', description)
+        this._setMeta('og:title', title, true)
+        this._setMeta('og:description', description, true)
+        this._setMeta('og:image', imageUrl, true)
+        this._setMeta('og:url', url, true)
+        this._setMeta('og:type', 'product', true)
+        this._setMeta('twitter:title', title)
+        this._setMeta('twitter:description', description)
+        this._setMeta('twitter:image', imageUrl)
+    }
+
+    resetMetaTags() {
+        const defaultTitle = 'dgray.io – Anonymous Classifieds with Monero'
+        const defaultDesc = 'Buy and sell anonymously with Monero. No KYC, no email, E2E encrypted chat.'
+        const defaultImage = 'https://dgray.io/assets/press/og-image.png'
+
+        document.title = defaultTitle
+        this._setMeta('description', defaultDesc)
+        this._setMeta('og:title', defaultTitle, true)
+        this._setMeta('og:description', defaultDesc, true)
+        this._setMeta('og:image', defaultImage, true)
+        this._setMeta('og:url', 'https://dgray.io', true)
+        this._setMeta('og:type', 'website', true)
+        this._setMeta('twitter:title', defaultTitle)
+        this._setMeta('twitter:description', defaultDesc)
+        this._setMeta('twitter:image', defaultImage)
+    }
+
+    _setMeta(name, content, isProperty = false) {
+        const attr = isProperty ? 'property' : 'name'
+        let el = document.querySelector(`meta[${attr}="${name}"]`)
+        if (el) {
+            el.setAttribute('content', content)
+        } else {
+            el = document.createElement('meta')
+            el.setAttribute(attr, name)
+            el.setAttribute('content', content)
+            document.head.appendChild(el)
+        }
     }
 
     async checkOwnership() {