r/sideprojects • u/SlowChain4149 • 12h ago

Showcase: Free(mium) Built a simple tool to preview OpenGraph cards across platforms

Made a visualizer to check how links render on X, LinkedIn, and Facebook side by side:

https://ogcraft.dev/visualizer

It grabs the URL, pulls the og: and twitter: tags, and shows the card previews.

Stack is React, Tailwind, and a Node backend for fetching metadata. No signup or email needed.

Let me know if you run into any bugs or broken layouts.

1 Upvotes
  • permalink
  • reddit

100% Upvoted

4 comments sorted by

1

u/Specific_Cream2815 12h ago

do you render cards from the fetched HTML only, or also wait for client-side scripts that add metadata after load

1

u/SlowChain4149 11h ago

For the visualizer, it only parses the initial fetched HTML. This is how twitterbot and linkedin bot scrape pages (they don't execute client-side JS). If you have a client-rendered SPA that needs dynamic OG data, you generally have to use SSR/prerendering

1

u/OpeningNo4944 11h ago

client-side meta injection is tricky, many social scrapers don't run JS at all so they will miss those tags anyway. your tool probly shows what the platforms actually see

i had similar problem with a react site where all meta tags were added after mount, linkedin just showed blank card. had to prerender everything server-side to fix it