I built a service (https://yasl.at) which allows to generate short url with customised meta data via a simple API to deep-link into web games and specifically results/things worthwhile to share without having the headache of tampering in each game over and over again.
You can read more about one of my use-cases specifically here: https://medium.com/@degola/supercharge-your-links-with-custo...
Open to do some backlinking @fayazara?
Great tool!
A lot of sites not letting me make requests directly, I'll experiment something with User Agent and see if it works.
PS, openai.com doesn't work too
- It sounds like meta-crawlers for each platform might behave differently, and I noticed previews don't match what I see elsewhere, 0/2 in the 2 I know well, WhatsApp & Discord.
- It would be good to report redirects that happen in link following.
- Needs target url in URL query params or fragment.
https://linkpreview.xyz/#example.com
https://linkpreview.xyz/#url=https://example.com
https://linkpreview.xyz/?url=https://example.com
Without data specifiable in URL it's a cute tool on a web page, whereas with data controlled by URL it's a native, shareable web utility. Just as cool URLs don't change, on the web URLs are the API.
(Updated after seeing your tweet, https://x.com/fayazara/status/1830272619637047359 [top HN]+ [all critique]!)
I'd make it fetch the meta tags and image using the user agent string of the services you're showing previews for. For example, Twitter/X fetches meta tags with a user agent string of Twitterbot/1.0. Some sites may serve different content to different services in order to optimise the image for display on that service.
It also looks like your API may not be looking at Twitter-specific meta tags [0], as it just returns one set of metadata that's used by every preview. For example on https://govukvue.org I use the 'summary' card format, which shows a small image with the name and description beside it. But your tool renders it as if it's a 'summary_large_image'.
[0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
Thanks for the suggestions
And now there is a tool where you can manually check how a ton of proprietary chat tools render some previews for your page.
And everyone gets mad as if that's the greatest thing since paper was invented.
Not in a forum of funny media guys, but at HN.
Interesting times...
Feedback...
You're failing on URLs that don't have HTTPS... that's awkward. I should be able to type any site and have it be smart enough to go to the URL and scan against the resolved URL. Like type in "blizzard.com" and have it load "https://www.blizzard.com/en-us/" for me.
Nice to see Discord and WhatsApp I guess, but what about LinkedIn, what about Pinterest. Or Slack (should be the same as Discord).
You don't include what to fix. Check out how socialsharepreview.com does it.
https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
https://i.imgur.com/LDXNYYR.png
It has a bunch of helpful tips on what to fix to make your content unfurl correctly. Really useful for the marketing crowd that loves this stuff. These sites all use different formats, different character counts... It's good to share information about what to fix. Twitter cards, vs. Open Graph metadata, for example. (I didn't check but it'd be good to make sure you're loading the right ones for the right site.)
Yeah, I don't get it when other free previewing tools already solve this problem like https://socialmediasharepreview.com/
The only explanation is that this one is only a 'free tool' to try to upsell you to buy their full stack kit grift.
One of the downsides of tools like this is that your URL needs to be available online so if there's an issue, your iteration loop is quite long.
In Polypane [1] I've built social media previews that work with any local URL but also let you overwrite that URL for the social media that display those. I built (and frequently maintain) previews for X/Twitter, Facebook, Slack, LinkedIn, Discord, Mastodon, Discord, Google Search, Bluesky, Mastodon and Threads. For all of those I have the design for their light and dark mode so you really can test everything. It also tells you what's missing and what is incompatible. Check it out: https://polypane.app/social-media-previews/
The person pointed out a specific limitation. And then offered a solution. Very clearly stating that they made it.
Somebody might find this useful.
This is helpful in the current discussion and for later searches.
Only thing is I wish there was a note about open-source vs paid, / this thing is $11 / month don't click..
Is there a FOSS version of all of this that is open source? Otherwise one can make one such that these 'ads' don't need to exist and everyone can benefit from a FOSS version just in case an author chooses to shut their closed source one down.
For a lot of SPA, we generate OpenGraph images if the user-agent matches a certain pattern, e.g. if it's Facebook, Discord, Twitter, etc. making a request.
If you're not mimicking the user agents of the platforms, it will often not be the same result.
https://github.com/rumca-js/Django-link-archive/blob/main/sc...
It can display open graph, RSS, YouTube props
It is a selfhostable app mostly for RSS reading
Do you just ignore and move on (I mean from these meta tags and the like -- not this particular tool)?
See this a lot. So you're seeing the same problem I am in my side projects -- Cloudflare, Fastly, etc must have an anti-abuse / anti-AI scraping setting and it's causing 403 errors when they detect you're not a legitimate client. They're whitelisting IP ranges of major social media servers though because it will get the link preview from Telegram, iMessage, etc.
Try it yourself with links to fastcompany.com or kickstarter.
Here's my user test: https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?...
https://developers.google.com/search/blog/2021/08/update-to-...
The X preview seems to crop on the left for a couple sites I tried. Not sure if that is accurate or not. Those sites look good in the other previews. I tend to use iMessage as a test and they look okay there, which I believe uses the X/Twitter tags.
That's what differentiate from https://opengraph.dev/ that I use regularly.
And label them “grifts” should they dare to make a living.
Check if the protocol is included and add if necessary
