feat: add Open Graph / Twitter preview image for link unfurls

Link previews need an og:image — the tags existed but the image was
commented out. Generated a 1200x630 branded card (static/og-preview.jpg,
~100KB: dark space gradient, circular headshot with gold ring, gold serif
title + tagline) and wired up:
- og:image (+ secure_url, type, width, height, alt)
- twitter:image (+ alt); twitter:card already summary_large_image

Absolute URLs point at https://tehriehldeal.com/og-preview.jpg so crawlers
(Slack/Discord/iMessage/Twitter/Facebook) can fetch it. Tags verified present
in the prerendered build/index.html.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-03 10:44:07 -07:00
parent 84112d8e42
commit 6ff99e0d51
2 changed files with 11 additions and 4 deletions
+11 -4
View File
@@ -79,8 +79,12 @@
/>
<meta property="og:url" content="https://tehriehldeal.com" />
<meta property="og:site_name" content="Atlas of Skills" />
<!-- Add og:image when screenshots are available -->
<!-- <meta property="og:image" content="https://tehriehldeal.com/screenshots/preview.png" /> -->
<meta property="og:image" content="https://tehriehldeal.com/og-preview.jpg" />
<meta property="og:image:secure_url" content="https://tehriehldeal.com/og-preview.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="Kevin Riehl - The Atlas of Skills interactive portfolio" />
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
@@ -89,8 +93,11 @@
name="twitter:description"
content="Interactive portfolio featuring a Path of Exile-inspired skill tree visualization."
/>
<!-- Add twitter:image when screenshots are available -->
<!-- <meta name="twitter:image" content="https://tehriehldeal.com/screenshots/preview.png" /> -->
<meta name="twitter:image" content="https://tehriehldeal.com/og-preview.jpg" />
<meta
name="twitter:image:alt"
content="Kevin Riehl - The Atlas of Skills interactive portfolio"
/>
</svelte:head>
{@render children()}
Binary file not shown.

After

Width:  |  Height:  |  Size: 100 KiB