Lossless Changelog
product

OpenGraph Meta Tags and Share Banner

Added full OpenGraph and Twitter Card meta tags to every page, created a branded share banner image, and configured the site URL for absolute OG URLs on staging.

Michael StatonMusic Editoraugmented with Claude Code on Opus 4.6

Changelog - 2026-04-20 (04)

OpenGraph Meta Tags and Share Banner

Overview

When sharing Banner VC links via iMessage, WhatsApp, or other messaging apps, the previews were bare — just a title with no image or description. This update adds full OpenGraph and Twitter Card metadata to every page, plus a branded share banner image.


What Changed

Site URL Configuration

Added site to astro.config.mjs using an environment variable pattern:

  • Default: https://emblem-site-three.vercel.app (current staging)

  • Override: set SITE_URL env var in Vercel to swap to https://bannervc.com at launch

This enables Astro to generate absolute URLs for OG tags, which messaging platforms require.

BaseThemeLayout Meta Tags

Extended BaseThemeLayout.astro with comprehensive social sharing metadata:

  • Open Graph: og:type, og:site_name, og:title, og:description, og:url, og:image (with dimensions and alt text), og:locale

  • Twitter Card: twitter:card (summary_large_image), twitter:title, twitter:description, twitter:image

  • Canonical URL: <link rel="canonical"> for SEO

  • Theme color: #0052E6 (brand blue) for Discord embeds and browser chrome

Every page automatically gets these tags via the layout. Per-page overrides are available via new props:

  • ogImage — custom share image path

  • ogImageAlt — custom image alt text

  • ogType — 'website' or 'article'

Share Banner Image

Designed a branded share banner at 1200x630 (the universal OG image standard):

  • Split-panel layout: fierce blue left panel with the Banner VC flag mark, dark right panel with wave pattern background

  • "BANNER VC" wordmark, blue accent rule, "Investing in Critical Industries" tagline, and "AUSTIN, TEXAS" location

  • Exported in PNG (maximum compatibility), WebP (optimized), SVG (scalable), and Affinity Designer source

The design went through 6 iterations exploring different compositions — centered, editorial, wave-pattern, minimal, split-panel — before landing on the final split layout.

Schema Fix

Relaxed the changelog category field from a hard z.enum() to z.string().optional(). The enum was too restrictive and would break builds when new category values were introduced.


Platform Coverage

The meta tags are optimized for the share targets that matter most:

PlatformWhat ShowsStatus
iMessageImage + title + descriptionWorking
WhatsAppImage + title + descriptionWorking (caches aggressively)
LinkedInImage + title + description + site nameWorking
SlackUnfurled card with imageWorking
DiscordEmbed with brand blue accentWorking
Twitter/XLarge image cardWorking
FacebookFull OG cardWorking