https://haikuthenews.io/response/2025-04-25T21:02:43Z
This has been a journey.
Update: Ok, so the goal here has been to get automatic social media previews working everywhere. I had no idea this was such an issue for React based applications.
Basic issue: React as a Client-Side-Rendering (CSR) platform. That means the javascript and data are passed to your computer (client) and rendered there. This is great and all, if you have javascript. Bots do not.
Bots are what render those social media previews, based on “meta” property tags in your HTML file. This is all very simple for Server-Side-Rendered (SSR) stuff, like basically most traditional (and modern) platforms. React falls into a curious hole here.
Which is something I was slightly aware of, but hadn’t really appreciated the impact until I started to wonder why media previews weren’t working. After all, a lot of the content on haikuthenews.ai is *made* for that kind of stuff. Short text, interesting image…c’mon over and see what’s going on, is the whole idea.
So a bit of research later, and I learned about pre-rendering services, turned it on on my Netlify deply, and worked to get things working.
Now are in a weird spot where it works *almost* everywhere, except the one place I wanted it to work the most (Blue Sky…which is odd because Blue Sky generally *hates* AI art stuff, so maybe it’s all good).
Ultimately we used a service called “headless-render-api” and Jonathan over there was extremely helpful in getting things working to the degree they are working.
Discord is the best.
It keeps line breaks, includes the whole haiku. Has no issues grabbing the meta data. Very nice all around. I would have called it working if everything else did as well.
FB was a bit less good.
…but still servicable.
Twitter is useless nowadays and wasn’t really tested.
And it doesn’t seem to work with *most* of the media link preview tools.
https://www.bannerbear.com/tools/twitter-card-preview-tool/#image_result
Although the official FB and LinkedIn ones both actually work.
https://developers.facebook.com/tools/debug/
https://www.linkedin.com/post-inspector/
So the final boss here was BlueSky, and try as I might, I was never able to get the og:meta tags working correctly. Ultimately I ended up using a “Post to Blue Sky” button, which only seems to work with images on mobile.
All-in-all, this was a victory, of sorts. What it really did was convince me that I need to rebuild the next prototype in Next.js. That’s the main thing.
Cheers, and happy developing.
Robot Pirate Ninja 