Spend half of the day figuring out how to do social media image previews for my website's photo gallery.
Turns out it's a bit tricky to do when your photo library is all JS, but the servers fetching the preview metadata don't run any of that!
I've ended up with generating one html file per image as part of my Vite build step and inserting the "og" meta tags there. Is that a bit wasteful? Maybe. But it saves me from doing any server side logic.
Example url: https://emz.im/photos/groceries
Emma Zühlcke
npub1cl…h5gpf
2025-11-14 23:03:30 UTC
Author Public Key
npub1clfuyka6n2rt63rzf5ppm5zr28k76e85n23v5qsud2nvrur2dmssrh5gpfSeen on
wss://relay.momostr.pinkPublished at
2025-11-14 23:03:30 UTCEvent JSON
{
"id": "0574e3667e59247370ea933955cb0dbef498f375ffd44d83e6029110fdb5d03e",
"pubkey": "c7d3c25bba9a86bd44624d021dd04351eded64f49aa2ca021c6aa6c1f06a6ee1",
"created_at": 1763161410,
"kind": 1,
"tags": [
[
"proxy",
"https://chaos.social/@emz/115550546166994748",
"web"
],
[
"proxy",
"https://chaos.social/users/emz/statuses/115550546166994748",
"activitypub"
],
[
"L",
"pink.momostr"
],
[
"l",
"pink.momostr.activitypub:https://chaos.social/users/emz/statuses/115550546166994748",
"pink.momostr"
],
[
"-"
]
],
"content": "Spend half of the day figuring out how to do social media image previews for my website's photo gallery.\n\nTurns out it's a bit tricky to do when your photo library is all JS, but the servers fetching the preview metadata don't run any of that!\n\nI've ended up with generating one html file per image as part of my Vite build step and inserting the \"og\" meta tags there. Is that a bit wasteful? Maybe. But it saves me from doing any server side logic.\n\nExample url: https://emz.im/photos/groceries",
"sig": "4975048a2da91279de4578df15e915f4ebd47400dbced8fcd625703482b118f50ed20d65aac8e78b17448a838fbd457c0872fafc86a192d9b9c61e64e5489384"
}