（评论）

（评论）
(comments)

原始链接: https://news.ycombinator.com/item?id=41416714

太酷了！准备好每月更新这些内容，否则很快就会过时。此类工具的缺点之一是您的 URL 需要在线可用，因此如果出现问题，您的迭代循环会相当长。在 Polypane [1] I我们已经构建了可与任何本地 URL 配合使用的社交媒体预览，但也允许您覆盖显示这些预览的社交媒体的 URL。我为 X/Twitter、Facebook、Slack、LinkedIn、Discord、Mastodon、Discord、Google Search、Bluesky、Mastodon 和 Threads 构建（并经常维护）预览。对于所有这些，我都有浅色和深色模式的设计，这样你就可以真正测试一切。它还会告诉您缺少什么以及不兼容什么。看看：https://polypane.app/social-media-previews/[1] https://polypane.app/

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…

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.

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.

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.

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

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.

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!

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

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/

[1] https://polypane.app/

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.

I sometime react that way, but most of the time I appreciate the alternatives that HN crowd adds to the conversations.

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

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.

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.

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.

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.

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

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.

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.

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

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

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.

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.

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.

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.

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.

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

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.

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

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

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.

（评论） (comments)

（评论）
(comments)