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…
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.
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.
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.
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.
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.
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.
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/
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.
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.
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.)
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).
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.
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'.
I usually use 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?
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!
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.
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)?
91 comments
[ 0.23 ms ] story [ 215 ms ] threadCheck if the protocol is included and add if necessary
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
Great tool!
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/
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.
And label them “grifts” should they dare to make a living.
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..
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.
Do you just ignore and move on (I mean from these meta tags and the like -- not this particular tool)?
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'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
Here's my user test: https://www.loom.com/share/b7cb729ed84b407d95ee764ab60c7dd3?...
https://www.bannerbear.com/tools/twitter-card-preview-tool/