8 ms·

Show HN: Linkpreview, see how your sites looks in social media and chat apps

362 points by fayazara 2y ago

FinnKuhn 2y ago
Great little tool, but please don't force me to type https:// https:// and just add it automatically when I type something like example.com
- inquirerGeneral 2y ago
  [dead]
- klabb3 2y ago
  Another suggestion is to use input with type=“url”. This makes mobile keyboards not capitalize and auto correct (I think).
  - jakub_g 2y ago
    TIL! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...
  - 9dev 2y ago
    I thought that one was unable to handle domains without a protocol, which makes it pretty much useless for normal business cases. I’ve never met a single non-technical person that understood what that https was, why they should add it, or didn’t get immeasurably bored if you tried to explain it…
    - TheIndieBuilder 2y ago
      To be fair, even Tim Berners Lee doesn't understand what the :// is for and has apologised for adding it.
      - 9dev 2y ago
        Which would be even more of a reason to standardise an input field that handles web addresses as humans enter them, not machines prefer them. Yet, here we are.
    - klabb3 2y ago
      I think you’d just prefill with https:// https:// and let the user type the rest.
      - 9dev 2y ago
        Depending on how your forms are set up, this will cause the field to be marked as invalid as soon as the user interacts with any of the forms fields, if not on load. Also, this requires additional handling for copy paste etc.
    - knallfrosch 2y ago
      > I thought that one was unable to handle domains without a protocol Check if the protocol is included and add if necessary
      - 9dev 2y ago
        No, that doesn’t work. Since the browser validates the field, it is marked as invalid unless there’s a protocol present. So you’re back to using the text field, but loose out on input optimisations for URLs.
- fayazara 2y ago
  Yep, I'll fix it. Fking annoying
  - FinnKuhn 2y ago
    Thank you :D
darkbatman 2y ago
I tried google.com. It says invalid url. looks half baked. can you not force to write protocol.
- fayazara 2y ago
  I am just making a get request to the URL and parsing the AST. 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
  - progmetaldev 2y ago
    You might have issues with sites behind Cloudflare, or similar type services.
valbis 2y ago
straight to the point without any fuss. well done
moonleay 2y ago
Cool idea, though it seems like it still requires some polish. There are small issues, for example: the design of HN links on Discord does not seem to be correct.
shinryuu 2y ago
Missing linkedin and also missing mastodon. Neat tool! If the page is missing something it would be helpful with some text on how to improve such as what should be done.
- fayazara 2y ago
  I'll add LinkedIn, Telegram and a few others tonight
- coppolaemilio 2y ago
  I thought exactly the same! Also, I'm not sure why, but LinkedIn is showing all of our pages with the wrong image. If someone is smart enough to figure it out please let me know. Get any blog-post from the godotengine.org site and paste it in linkedin and you'll see how the image that gets pulled is the auther of the post instead of the thumbnail of the article. I wasn't able to figure it out.
  - matteason 2y ago
    Your og:image meta tag is pointing to a .webp image, which I expect many services don't support as the OpenGraph image. It's probably falling back to the author photo because that's the first PNG or JPEG image on the page.
sh4jid 2y ago
It's amazing! Thanks for sharing.
vinnymac 2y ago
Does not appear to handle open graph correctly. For example, it displayed pixelated favicons resized to fit their containers, rather than the `og:image` in the head tag.
- Teknomancer 2y ago
  Came here to say just that. Totally inaccurate depiction using facicon.
- fayazara 2y ago
  I am just fetching the showing whatever the site has, I'll take a look, what URL did you test it with?
dmje 2y ago
Different to https://www.opengraph.xyz https://www.opengraph.xyz ?
- msephton 2y ago
  I use that too, but I think I'll use linkpreview in future simply because the results are less cluttered.
  - Teknomancer 2y ago
    This doesn't properly parse open graph meta data. It's inaccurate.
    - dmje 2y ago
      Which one?
gejose 2y ago
Please change the text input to not autocorrect words. Great tool!
kilian 2y ago
That's pretty cool! Get ready to keep these up to date monthly or become obsolete quickly. 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/ https://polypane.app/social-media-previews/ [1] https://polypane.app/ https://polypane.app/
- lagniappe 2y ago
  I hate when HN nerds deliver something poised as helpful advice that is just an ad for their own thing.
  - bombela 2y ago
    I think a little bit of it is fine. The person pointed out a specific limitation. And then offered a solution. Very clearly stating that they made it. Somebody might find this useful.
  - colesantiago 2y ago
    I know and it's becoming commonplace here, this is why I prefer free open source software instead so that we can ignore these ads for closed source software grifts altogether. 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.
    - demarq 2y ago
      We can’t keep demanding people work their weekends so we can have free stuff. And label them “grifts” should they dare to make a living.
dbg31415 2y ago
Why this tool over https://socialsharepreview.com/ https://socialsharepreview.com/ or https://www.opengraph.xyz/ https://www.opengraph.xyz/ or https://socialmediasharepreview.com/ https://socialmediasharepreview.com/ ? 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/ 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.ycombinator.com%2F https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb... https://i.imgur.com/LDXNYYR.png 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.)
- colesantiago 2y ago
  > Why this tool over https://socialsharepreview.com/ https://socialsharepreview.com/ or https://www.opengraph.xyz/ https://www.opengraph.xyz/ or https://socialmediasharepreview.com/ https://socialmediasharepreview.com/ ? Yeah, I don't get it when other free previewing tools already solve this problem like https://socialmediasharepreview.com/ 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.
Brajeshwar 2y ago
This got me thinking and if I can ask something. If I do not care about how/what comes up when people share, for my personal website, should I care about any of these OG/Twitter/etc? Do you just ignore and move on (I mean from these meta tags and the like -- not this particular tool)?
- afavour 2y ago
  There’s an SEO factor to some of these tags too, if you care about that. But otherwise no, feel free to not bother with them.
- inquirerGeneral 2y ago
  [dead]
- progmetaldev 2y ago
  Some will use the very first image found in your page, or generate a preview that may not look good. If that doesn't bother you, then you shouldn't worry about it. You might be better off just having a logo for your website, or something that represents your "brand" or "identity" where it's the same for all pages, just so you avoid having a bot creating something for you in the future (which may not align with your ideas).
izakfr 2y ago
This is really awesome, I’ve been looking for this exact tool. Putting the preview in the context of a real message / post makes it more useful.
- fayazara 2y ago
  Thanks mate
hoherd 2y ago
Currently this appears to not handle quotes in titles properly, rendering them as ' instead of an ascii quote.
adithyassekhar 2y ago
The WhatsApp preview is not accurate at all compared to my Android. Is this designed around how it would look on iphones?
- shreddit 2y ago
  It doesn’t. On iPhone the image and the text are in one line
Jackson__ 2y ago
This will be very useful for the half-decade we might have left until links to anything except the top 5 sites are auto-filtered.
holistio 2y ago
This is half-baked for now. 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.
- ceejayoz 2y ago
  I wish some formal standard for this would catch on, like a `META` HTTP request type or something. We try to pull in link metadata sometimes and get a Cloudflare captcha instead.
matteason 2y ago
Neat tool. A couple of suggestions: 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 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/overview/markup https://developer.x.com/en/docs/x-for-websites/cards/overvie...
- fayazara 2y ago
  I'll make some improvements, laterally made it in like 2 hours. Thanks for the suggestions
dorpstein 2y ago
This is really cool. I’m shipping a side project soon and this made me rethink the preview.
franciscop 2y ago
I usually use https://socialsharepreview.com/ https://socialsharepreview.com/ but there are many, so I'm curios on how is this different/better and/or why did you decide to make it instead of using existing solutions?
- fayazara 2y ago
  Got bored yesterday night
  - lylo 2y ago
    lol, best answer :))
- farzd 2y ago
  Above broke for me for few of some of the previews. You have to click to see various previews and it's slow. OP's version shows them all on the same page, it's cleaner, has more previews and styled appropriately. Pretty obvious reasons!
cloudking 2y ago
I just use the official Meta one, although it requires a login: https://www.facebook.com/tools/debug/ https://www.facebook.com/tools/debug/
breck 2y ago
Oh wow, I need this! I make a static site generator and making sure my users' contents appear well on social media sharing is very important. You already helped me find a few bugs. Thank you. Here's my user test: https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?sid=695c8b59-427a-4697-9dcd-2989f5bff142 https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?...
kipdotcom 2y ago
[dead]
pimlottc 2y ago
How do I know this is accurate? Does it actual use tools/APIs provided by the social media sites to generate the preview or does it just re-implement the same HTML based on observation (and therefore require constant updates to keep it in sync)?
lylo 2y ago
I’ve been using the Banner Bear one for years. Works for me! https://www.bannerbear.com/tools/twitter-card-preview-tool/ https://www.bannerbear.com/tools/twitter-card-preview-tool/
renegat0x0 2y ago
I often use my app to see what kind of properties page provides: https://github.com/rumca-js/Django-link-archive/blob/main/screenshots/page_properties.PNG 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
DitheringIdiot 2y ago
I built the opposite of this tool. It lets you generate a page to check which meta tags will generate a preview on a given platform. https://getoutofmyhead.dev/link-preview-tester/ https://getoutofmyhead.dev/link-preview-tester/
audiala 2y ago
Thanks, I like the design of your site better than the other alternatives I found and it came exactly when I needed it. As other have mentioned, a way to run it locally would be great to not have to deploy live or create a tunnel in order to test it.
johnchristopher 2y ago
It's interesting that you are adding the cruft around each preview (e.g.: the facebook comment form, etc.). That's what differentiate from https://opengraph.dev/ https://opengraph.dev/ that I use regularly.
leyesdos 2y ago
[dead]
mcint 2y ago
Well done! Nice to play with. Seeing it in context of each platform's default interface is *chefs kiss* a nice touch. - 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/#example.com https://linkpreview.xyz/#url=https://example.com https://linkpreview.xyz/#url=https://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 https://x.com/fayazara/status/1830272619637047359 [top HN]+ [all critique]!)
Scotrix 2y ago
very nice! I built a service (https://yasl.at 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-custom-metadata-and-qr-codes-the-ultimate-url-shortening-service-7faee2f88097 https://medium.com/@degola/supercharge-your-links-with-custo... Open to do some backlinking @fayazara?
aaron695 2y ago
[dead]
wlonkly 2y ago
Oh, this is nice! I would love to see a Slack unfurl sample. I don't entirely understand why Slack unfurls are unpredictable sometimes, but for example, an Instagram reel link unfurls just fine on Twitter or Facebook, but has no unfurl at all on Slack.
dheera 2y ago
I wish all thase sites that blast me with GDPR, newsletter, unsolicited chatbot, and 5 other popups could see that if on a mobile device the whole website us covered up in shit I have to deal with, I lose interest in the site and bounce
iJohnDoe 2y ago
Very helpful. Great job! 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.
pino82 2y ago
I'm still dreaming about days when I can just write my website against the standarda and test it with my browser and then be happy if it works, because it will of course work in all other browsers too. 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...
ebloom19 2y ago
Neat little tool! It helped me figure out my websites logo is getting cropped on some socials. Making it easy to see how I need to modify it to fix the issue.
nojs 2y ago
Its worth noting that Google regularly rewrites title tags, so that part is probably not accurate. https://developers.google.com/search/blog/2021/08/update-to-generating-page-titles https://developers.google.com/search/blog/2021/08/update-to-...
fayazara 2y ago
Linkedin and Telegram previews now available
piyushtechsavy 2y ago
Very interesting tool, usually developers check everything by posting links on these platforms.
- knallfrosch 2y ago
  Nothing beats testing in prod
seagullriffic 2y ago
The LinkedIn preview text made me laugh, thank you :)
deleted 2y ago
[deleted]
steelcm 2y ago
Looks good, but doesn't implement video previews, which seems to be the case with most of these OG preview tools.
aitchnyu 2y ago
It breaks on Firefox.
reporter7 2y ago
> failed to fetch meta tags 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.
anonymousd3vil 2y ago
This is some good stuff!
celtictechie 2y ago
you've reminded my how old is my banner image... solid work, thanks!

362 points by fayazara 2y ago

Great little tool, but please don't force me to type https:// https:// and just add it automatically when I type something like example.com

inquirerGeneral 2y ago
[dead]
klabb3 2y ago
Another suggestion is to use input with type=“url”. This makes mobile keyboards not capitalize and auto correct (I think).
- jakub_g 2y ago
  TIL! https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/url https://developer.mozilla.org/en-US/docs/Web/HTML/Element/in...
- 9dev 2y ago
  I thought that one was unable to handle domains without a protocol, which makes it pretty much useless for normal business cases. I’ve never met a single non-technical person that understood what that https was, why they should add it, or didn’t get immeasurably bored if you tried to explain it…
  - TheIndieBuilder 2y ago
    To be fair, even Tim Berners Lee doesn't understand what the :// is for and has apologised for adding it.
    - 9dev 2y ago
      Which would be even more of a reason to standardise an input field that handles web addresses as humans enter them, not machines prefer them. Yet, here we are.
  - klabb3 2y ago
    I think you’d just prefill with https:// https:// and let the user type the rest.
    - 9dev 2y ago
      Depending on how your forms are set up, this will cause the field to be marked as invalid as soon as the user interacts with any of the forms fields, if not on load. Also, this requires additional handling for copy paste etc.
  - knallfrosch 2y ago
    > I thought that one was unable to handle domains without a protocol Check if the protocol is included and add if necessary
    - 9dev 2y ago
      No, that doesn’t work. Since the browser validates the field, it is marked as invalid unless there’s a protocol present. So you’re back to using the text field, but loose out on input optimisations for URLs.
fayazara 2y ago
Yep, I'll fix it. Fking annoying
- FinnKuhn 2y ago
  Thank you :D

darkbatman 2y ago

I tried google.com. It says invalid url. looks half baked. can you not force to write protocol.

fayazara 2y ago
I am just making a get request to the URL and parsing the AST. 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
- progmetaldev 2y ago
  You might have issues with sites behind Cloudflare, or similar type services.

valbis 2y ago

straight to the point without any fuss. well done

moonleay 2y ago

Cool idea, though it seems like it still requires some polish. There are small issues, for example: the design of HN links on Discord does not seem to be correct.

shinryuu 2y ago

Missing linkedin and also missing mastodon. Neat tool! If the page is missing something it would be helpful with some text on how to improve such as what should be done.

fayazara 2y ago
I'll add LinkedIn, Telegram and a few others tonight
coppolaemilio 2y ago
I thought exactly the same! Also, I'm not sure why, but LinkedIn is showing all of our pages with the wrong image. If someone is smart enough to figure it out please let me know. Get any blog-post from the godotengine.org site and paste it in linkedin and you'll see how the image that gets pulled is the auther of the post instead of the thumbnail of the article. I wasn't able to figure it out.
- matteason 2y ago
  Your og:image meta tag is pointing to a .webp image, which I expect many services don't support as the OpenGraph image. It's probably falling back to the author photo because that's the first PNG or JPEG image on the page.

sh4jid 2y ago

It's amazing! Thanks for sharing.

vinnymac 2y ago

Does not appear to handle open graph correctly. For example, it displayed pixelated favicons resized to fit their containers, rather than the `og:image` in the head tag.

Teknomancer 2y ago
Came here to say just that. Totally inaccurate depiction using facicon.
fayazara 2y ago
I am just fetching the showing whatever the site has, I'll take a look, what URL did you test it with?

dmje 2y ago

Different to https://www.opengraph.xyz https://www.opengraph.xyz ?

msephton 2y ago
I use that too, but I think I'll use linkpreview in future simply because the results are less cluttered.
- Teknomancer 2y ago
  This doesn't properly parse open graph meta data. It's inaccurate.
  - dmje 2y ago
    Which one?

gejose 2y ago

Please change the text input to not autocorrect words. Great tool!

kilian 2y ago

That's pretty cool! Get ready to keep these up to date monthly or become obsolete quickly. 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/ https://polypane.app/social-media-previews/ [1] https://polypane.app/ https://polypane.app/

lagniappe 2y ago
I hate when HN nerds deliver something poised as helpful advice that is just an ad for their own thing.
- bombela 2y ago
  I think a little bit of it is fine. The person pointed out a specific limitation. And then offered a solution. Very clearly stating that they made it. Somebody might find this useful.
- colesantiago 2y ago
  I know and it's becoming commonplace here, this is why I prefer free open source software instead so that we can ignore these ads for closed source software grifts altogether. 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.
  - demarq 2y ago
    We can’t keep demanding people work their weekends so we can have free stuff. And label them “grifts” should they dare to make a living.

dbg31415 2y ago

Why this tool over https://socialsharepreview.com/ https://socialsharepreview.com/ or https://www.opengraph.xyz/ https://www.opengraph.xyz/ or https://socialmediasharepreview.com/ https://socialmediasharepreview.com/ ? 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/ 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.ycombinator.com%2F https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb... https://i.imgur.com/LDXNYYR.png 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.)

colesantiago 2y ago
> Why this tool over https://socialsharepreview.com/ https://socialsharepreview.com/ or https://www.opengraph.xyz/ https://www.opengraph.xyz/ or https://socialmediasharepreview.com/ https://socialmediasharepreview.com/ ? Yeah, I don't get it when other free previewing tools already solve this problem like https://socialmediasharepreview.com/ 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.

Brajeshwar 2y ago

This got me thinking and if I can ask something. If I do not care about how/what comes up when people share, for my personal website, should I care about any of these OG/Twitter/etc? Do you just ignore and move on (I mean from these meta tags and the like -- not this particular tool)?

afavour 2y ago
There’s an SEO factor to some of these tags too, if you care about that. But otherwise no, feel free to not bother with them.
inquirerGeneral 2y ago
[dead]
progmetaldev 2y ago
Some will use the very first image found in your page, or generate a preview that may not look good. If that doesn't bother you, then you shouldn't worry about it. You might be better off just having a logo for your website, or something that represents your "brand" or "identity" where it's the same for all pages, just so you avoid having a bot creating something for you in the future (which may not align with your ideas).

izakfr 2y ago

This is really awesome, I’ve been looking for this exact tool. Putting the preview in the context of a real message / post makes it more useful.

fayazara 2y ago
Thanks mate

hoherd 2y ago

Currently this appears to not handle quotes in titles properly, rendering them as ' instead of an ascii quote.

adithyassekhar 2y ago

The WhatsApp preview is not accurate at all compared to my Android. Is this designed around how it would look on iphones?

shreddit 2y ago
It doesn’t. On iPhone the image and the text are in one line

Jackson__ 2y ago

This will be very useful for the half-decade we might have left until links to anything except the top 5 sites are auto-filtered.

holistio 2y ago

This is half-baked for now. 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.

ceejayoz 2y ago
I wish some formal standard for this would catch on, like a `META` HTTP request type or something. We try to pull in link metadata sometimes and get a Cloudflare captcha instead.

matteason 2y ago

Neat tool. A couple of suggestions: 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 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/overview/markup https://developer.x.com/en/docs/x-for-websites/cards/overvie...

fayazara 2y ago
I'll make some improvements, laterally made it in like 2 hours. Thanks for the suggestions

dorpstein 2y ago

This is really cool. I’m shipping a side project soon and this made me rethink the preview.

franciscop 2y ago

I usually use https://socialsharepreview.com/ https://socialsharepreview.com/ but there are many, so I'm curios on how is this different/better and/or why did you decide to make it instead of using existing solutions?

fayazara 2y ago
Got bored yesterday night
- lylo 2y ago
  lol, best answer :))
farzd 2y ago
Above broke for me for few of some of the previews. You have to click to see various previews and it's slow. OP's version shows them all on the same page, it's cleaner, has more previews and styled appropriately. Pretty obvious reasons!

cloudking 2y ago

I just use the official Meta one, although it requires a login: https://www.facebook.com/tools/debug/ https://www.facebook.com/tools/debug/

breck 2y ago

Oh wow, I need this! I make a static site generator and making sure my users' contents appear well on social media sharing is very important. You already helped me find a few bugs. Thank you. Here's my user test: https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?sid=695c8b59-427a-4697-9dcd-2989f5bff142 https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?...

kipdotcom 2y ago

[dead]

pimlottc 2y ago

How do I know this is accurate? Does it actual use tools/APIs provided by the social media sites to generate the preview or does it just re-implement the same HTML based on observation (and therefore require constant updates to keep it in sync)?

lylo 2y ago

I’ve been using the Banner Bear one for years. Works for me! https://www.bannerbear.com/tools/twitter-card-preview-tool/ https://www.bannerbear.com/tools/twitter-card-preview-tool/

renegat0x0 2y ago

I often use my app to see what kind of properties page provides: https://github.com/rumca-js/Django-link-archive/blob/main/screenshots/page_properties.PNG 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

DitheringIdiot 2y ago

I built the opposite of this tool. It lets you generate a page to check which meta tags will generate a preview on a given platform. https://getoutofmyhead.dev/link-preview-tester/ https://getoutofmyhead.dev/link-preview-tester/

audiala 2y ago

Thanks, I like the design of your site better than the other alternatives I found and it came exactly when I needed it. As other have mentioned, a way to run it locally would be great to not have to deploy live or create a tunnel in order to test it.

johnchristopher 2y ago

It's interesting that you are adding the cruft around each preview (e.g.: the facebook comment form, etc.). That's what differentiate from https://opengraph.dev/ https://opengraph.dev/ that I use regularly.

leyesdos 2y ago

[dead]

mcint 2y ago

Well done! Nice to play with. Seeing it in context of each platform's default interface is *chefs kiss* a nice touch. - 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/#example.com https://linkpreview.xyz/#url=https://example.com https://linkpreview.xyz/#url=https://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 https://x.com/fayazara/status/1830272619637047359 [top HN]+ [all critique]!)

Scotrix 2y ago

very nice! I built a service (https://yasl.at 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-custom-metadata-and-qr-codes-the-ultimate-url-shortening-service-7faee2f88097 https://medium.com/@degola/supercharge-your-links-with-custo... Open to do some backlinking @fayazara?

aaron695 2y ago

[dead]

wlonkly 2y ago

Oh, this is nice! I would love to see a Slack unfurl sample. I don't entirely understand why Slack unfurls are unpredictable sometimes, but for example, an Instagram reel link unfurls just fine on Twitter or Facebook, but has no unfurl at all on Slack.

dheera 2y ago

I wish all thase sites that blast me with GDPR, newsletter, unsolicited chatbot, and 5 other popups could see that if on a mobile device the whole website us covered up in shit I have to deal with, I lose interest in the site and bounce

iJohnDoe 2y ago

Very helpful. Great job! 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.

pino82 2y ago

I'm still dreaming about days when I can just write my website against the standarda and test it with my browser and then be happy if it works, because it will of course work in all other browsers too. 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...

ebloom19 2y ago

Neat little tool! It helped me figure out my websites logo is getting cropped on some socials. Making it easy to see how I need to modify it to fix the issue.

nojs 2y ago

Its worth noting that Google regularly rewrites title tags, so that part is probably not accurate. https://developers.google.com/search/blog/2021/08/update-to-generating-page-titles https://developers.google.com/search/blog/2021/08/update-to-...

fayazara 2y ago

Linkedin and Telegram previews now available

piyushtechsavy 2y ago

Very interesting tool, usually developers check everything by posting links on these platforms.

knallfrosch 2y ago
Nothing beats testing in prod

seagullriffic 2y ago

The LinkedIn preview text made me laugh, thank you :)

deleted 2y ago

[deleted]

steelcm 2y ago

Looks good, but doesn't implement video previews, which seems to be the case with most of these OG preview tools.

aitchnyu 2y ago

It breaks on Firefox.

reporter7 2y ago

> failed to fetch meta tags 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.

anonymousd3vil 2y ago

This is some good stuff!

celtictechie 2y ago

you've reminded my how old is my banner image... solid work, thanks!