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

362 点作者 fayazara9 个月前

44 条评论

mcint9 个月前

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.<a href="https://linkpreview.xyz/#example.com" rel="nofollow">https://linkpreview.xyz/#example.com</a><a href="https://linkpreview.xyz/#url=https://example.com" rel="nofollow">https://linkpreview.xyz/#url=https://example.com</a><a href="https://linkpreview.xyz/?url=https://example.com" rel="nofollow">https://linkpreview.xyz/?url=https://example.com</a>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, <a href="https://x.com/fayazara/status/1830272619637047359" rel="nofollow">https://x.com/fayazara/status/1830272619637047359</a> [top HN]+ [all critique]!)

FinnKuhn9 个月前

Great little tool, but please don't force me to type <a href="https://" rel="nofollow">https://</a> and just add it automatically when I type something like example.com

评论 #41417920 未加载

评论 #41417945 未加载

评论 #41417886 未加载

matteason9 个月前

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 <a href="https://govukvue.org" rel="nofollow">https://govukvue.org</a> 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] <a href="https://developer.x.com/en/docs/x-for-websites/cards/overview/markup" rel="nofollow">https://developer.x.com/en/docs/x-for-websites/cards/overvie...</a>

评论 #41417935 未加载

vinnymac9 个月前

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.

评论 #41417941 未加载

评论 #41417682 未加载

franciscop9 个月前

I usually use <a href="https://socialsharepreview.com/" rel="nofollow">https://socialsharepreview.com/</a> 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?

评论 #41417948 未加载

评论 #41417930 未加载

DitheringIdiot9 个月前

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.<a href="https://getoutofmyhead.dev/link-preview-tester/" rel="nofollow">https://getoutofmyhead.dev/link-preview-tester/</a>

pino829 个月前

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...

dbg314159 个月前

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

评论 #41417593 未加载

kilian9 个月前

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: <a href="https://polypane.app/social-media-previews/" rel="nofollow">https://polypane.app/social-media-previews/</a>[1] <a href="https://polypane.app/" rel="nofollow">https://polypane.app/</a>

评论 #41417601 未加载

shinryuu9 个月前

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.

评论 #41419957 未加载

评论 #41417957 未加载

holistio9 个月前

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.

评论 #41418434 未加载

pimlottc9 个月前

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)?

adithyassekhar9 个月前

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

评论 #41417677 未加载

dmje9 个月前

Different to <a href="https://www.opengraph.xyz" rel="nofollow">https://www.opengraph.xyz</a> ?

评论 #41417322 未加载

seagullriffic9 个月前

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

renegat0x09 个月前

I often use my app to see what kind of properties page provides:<a href="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...</a>It can display open graph, RSS, YouTube propsIt is a selfhostable app mostly for RSS reading

Brajeshwar9 个月前

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)?

评论 #41420635 未加载

评论 #41417689 未加载

评论 #41417911 未加载

reporter79 个月前

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

breck9 个月前

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: <a href="https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?sid=695c8b59-427a-4697-9dcd-2989f5bff142" rel="nofollow">https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?...</a>

izakfr9 个月前

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.

评论 #41417953 未加载

nojs9 个月前

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

iJohnDoe9 个月前

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.

wlonkly9 个月前

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.

johnchristopher9 个月前

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

audiala9 个月前

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.

Scotrix9 个月前

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

lylo9 个月前

I’ve been using the Banner Bear one for years. Works for me!<a href="https://www.bannerbear.com/tools/twitter-card-preview-tool/" rel="nofollow">https://www.bannerbear.com/tools/twitter-card-preview-tool/</a>

cloudking9 个月前

I just use the official Meta one, although it requires a login: <a href="https://www.facebook.com/tools/debug/" rel="nofollow">https://www.facebook.com/tools/debug/</a>

ebloom199 个月前

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.

moonleay9 个月前

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.

valbis9 个月前

straight to the point without any fuss. well done

steelcm9 个月前

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

hoherd9 个月前

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

piyushtechsavy9 个月前

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

评论 #41423828 未加载

dorpstein9 个月前

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

dheera9 个月前

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

gejose9 个月前

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

fayazara9 个月前

Linkedin and Telegram previews now available

sh4jid9 个月前

It's amazing! Thanks for sharing.

Jackson__9 个月前

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.

celtictechie9 个月前

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

anonymousd3vil9 个月前

This is some good stuff!

aitchnyu9 个月前

It breaks on Firefox.

darkbatman9 个月前

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

评论 #41417969 未加载