[HN Gopher] Show HN: Linkpreview, see how your sites looks in so...
___________________________________________________________________
Show HN: Linkpreview, see how your sites looks in social media and
chat apps
Author : fayazara
Score : 213 points
Date : 2024-09-01 13:07 UTC (9 hours ago)
(HTM) web link (linkpreview.xyz)
(TXT) w3m dump (linkpreview.xyz)
| FinnKuhn wrote:
| Great little tool, but please don't force me to type https:// and
| just add it automatically when I type something like example.com
| klabb3 wrote:
| Another suggestion is to use input with type="url". This makes
| mobile keyboards not capitalize and auto correct (I think).
| jakub_g wrote:
| TIL! https://developer.mozilla.org/en-
| US/docs/Web/HTML/Element/in...
| 9dev wrote:
| 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 wrote:
| To be fair, even Tim Berners Lee doesn't understand what
| the :// is for and has apologised for adding it.
| 9dev wrote:
| 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 wrote:
| I think you'd just prefill with https:// and let the user
| type the rest.
| fayazara wrote:
| Yep, I'll fix it. Fking annoying
| darkbatman wrote:
| I tried google.com. It says invalid url. looks half baked. can
| you not force to write protocol.
| fayazara wrote:
| 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 wrote:
| You might have issues with sites behind Cloudflare, or
| similar type services.
| valbis wrote:
| straight to the point without any fuss. well done
| moonleay wrote:
| 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 wrote:
| 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 wrote:
| I'll add LinkedIn, Telegram and a few others tonight
| coppolaemilio wrote:
| 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 wrote:
| 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 wrote:
| It's amazing! Thanks for sharing.
| dmje wrote:
| Different to https://www.opengraph.xyz ?
| msephton wrote:
| I use that too, but I think I'll use linkpreview in future
| simply because the results are less cluttered.
| Teknomancer wrote:
| This doesn't properly parse open graph meta data. It's
| inaccurate.
| dmje wrote:
| Which one?
| gejose wrote:
| Please change the text input to not autocorrect words.
|
| Great tool!
| vinnymac wrote:
| 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 wrote:
| Came here to say just that. Totally inaccurate depiction using
| facicon.
| fayazara wrote:
| I am just fetching the showing whatever the site has, I'll take
| a look, what URL did you test it with?
| kilian wrote:
| 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/
| lagniappe wrote:
| I hate when HN nerds deliver something poised as helpful advice
| that is just an ad for their own thing.
| colesantiago wrote:
| 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 wrote:
| 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.
| jraph wrote:
| I don't quite agree with your parent comment. However, I
| think we should stop equating free software with weekend
| projects.
| bombela wrote:
| 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.
| philipwhiuk wrote:
| "I hate when people's adverts on a popular discussion website
| is undermined by other people's adverts"
| lylo wrote:
| c'mon, makers gotta pimp. it's tough out there :)
| stevenicr wrote:
| 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..
| gloosx wrote:
| Not as bad as seeing low-effort AI generated articles here
| and there disguised as a useful blog post that is just an ad
| for yet another AI tool
| dbg31415 wrote:
| Why this tool over https://socialsharepreview.com/ or
| https://www.opengraph.xyz/ or
| 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/"
| 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.)
| colesantiago wrote:
| > Why this tool over https://socialsharepreview.com/ or
| https://www.opengraph.xyz/ or
| https://socialmediasharepreview.com/ ?
|
| 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.
| Brajeshwar wrote:
| 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 wrote:
| 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.
| progmetaldev wrote:
| 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 wrote:
| 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 wrote:
| Thanks mate
| hoherd wrote:
| Currently this appears to not handle quotes in titles properly,
| rendering them as ' instead of an ascii quote.
| adithyassekhar wrote:
| The WhatsApp preview is not accurate at all compared to my
| Android. Is this designed around how it would look on iphones?
| shreddit wrote:
| It doesn't. On iPhone the image and the text are in one line
| Jackson__ wrote:
| 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 wrote:
| 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 wrote:
| 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 wrote:
| 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...
| fayazara wrote:
| I'll make some improvements, laterally made it in like 2 hours.
|
| Thanks for the suggestions
| dorpstein wrote:
| This is really cool. I'm shipping a side project soon and this
| made me rethink the preview.
| franciscop wrote:
| 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?
| fayazara wrote:
| Got bored yesterday night
| lylo wrote:
| lol, best answer :))
| farzd wrote:
| 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 wrote:
| I just use the official Meta one, although it requires a login:
| https://www.facebook.com/tools/debug/
| breck wrote:
| 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?...
| pimlottc wrote:
| 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 wrote:
| I've been using the Banner Bear one for years. Works for me!
|
| https://www.bannerbear.com/tools/twitter-card-preview-tool/
| renegat0x0 wrote:
| I often use my app to see what kind of properties page provides:
|
| 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 wrote:
| 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/
| audiala wrote:
| 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 wrote:
| 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/ that I use
| regularly.
| mcint wrote:
| 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/#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]!)_
| Scotrix wrote:
| very nice!
|
| 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?
| wlonkly wrote:
| 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.
___________________________________________________________________
(page generated 2024-09-01 23:00 UTC)