Link previews from Mastodon should show more info with Apple link view #20569
Comments
|
It's unfortunate that they don't just use normal opengraph things, since Discord is able to embed toots just fine:
|
|
Also, for devs: the best way to reproduce this is via Apple's Messages app, if you have an iPhone/macOS device. |
|
Here's Twitter's HTML Mastodon: <meta content="#191b22" name="theme-color">
<meta content="yes" name="apple-mobile-web-app-capable">
<title>Eugen 💀: "I've changed quite a few parts…" - Mastodon</title>
<meta content="Mastodon" property="og:site_name">
<meta content="article" property="og:type">
<meta content="Eugen 💀 (@Gargron@mastodon.social)" property="og:title">
<meta content="https://mastodon.social/@Gargron/109300299959535882" property="og:url">
<meta content="2022-11-07T03:03:41Z" property="og:published_time">
<meta content="I've changed quite a few parts on joinmastodon.org/servers today in response to the feedback from the past week. In detail:
You can now filter by region, type of legal entity, and sign-up speed. Added note about why the topics filter exists. Changed tagline.
"Get on waitlist" has become "Apply for an account" for servers that manually review new sign-ups. Removed total user count from cards." name="description">
<meta content="I've changed quite a few parts on joinmastodon.org/servers today in response to the feedback from the past week. In detail:
You can now filter by region, type of legal entity, and sign-up speed. Added note about why the topics filter exists. Changed tagline.
"Get on waitlist" has become "Apply for an account" for servers that manually review new sign-ups. Removed total user count from cards." property="og:description">
<meta content="https://files.mastodon.social/accounts/avatars/000/000/001/original/dc4286ceb8fab734.jpg" property="og:image">
<meta content="400" property="og:image:width">
<meta content="400" property="og:image:height">
<meta content="summary" property="twitter:card">Twitter: <meta property="og:site_name" content="Twitter">
<link rel="mask-icon" sizes="any" href="https://abs.twimg.com/responsive-web/client-web/icon-svg.168b89d9.svg" color="#1D9BF0">
<meta name="theme-color" content="#FFFFFF">
<title>Marphy Black on Twitter: "I always felt the most curious alteration made to Gordon's model in Half-Life's Dreamcast port is blahblahblah</title>
<meta content="article" property="og:type" data-rh="true">
<meta description="" name="description" data-rh="true">
<meta content="https://twitter.com/SlappyCromwell/status/1591457037761671168" property="og:url" data-rh="true">
<meta content="Marphy Black on Twitter" property="og:title" data-rh="true">
<meta content="“I always felt the most curious alteration made to Gordon's model in Half-Life's Dreamcast port is blahblahblah”" property="og:description" data-rh="true">
<meta content="https://pbs.twimg.com/media/FhXKLxtXwAM2Do5.jpg:large" property="og:image" data-rh="true">
<meta content="twitter://status?id=1591457037761671168" property="al:ios:url" data-rh="true">
<meta content="333903271" property="al:ios:app_store_id" data-rh="true">
<meta content="Twitter" property="al:ios:app_name" data-rh="true">Interestingly, the primary difference appears to be that Twitter does not use og:image unless it's an image embedded into the tweet. So for text-only tweets, it doesn't include an image property. Mastodon uses og:image for toots to represent the user's profile picture. |
|
Okay, so after playing around with this for the last while, I'm pretty sure this can't be fixed by Mastodon (unless you do some very cursed things). It's hardcoded so it only works for twitter. This HTML: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<meta property="og:site_name" content="Mastodon">
<link rel="mask-icon" sizes="any" href="https://abs.twimg.com/responsive-web/client-web/icon-svg.168b89d9.svg" color="#1D9BF0">
<link rel="shortcut icon" href="//abs.twimg.com/favicons/twitter.2.ico">
<link rel="apple-touch-icon" sizes="192x192" href="https://abs.twimg.com/responsive-web/client-web/icon-ios.b1fc7279.png">
<meta name="theme-color" content="#191b22">
<title>Eugen 💀: "I've changed quite a few parts…" - Mastodon</title>
<meta content="article" property="og:type">
<meta description="" name="description">
<meta content="https://mastodon.social/@Gargron/109300299959535882" property="og:url">
<meta content="Eugen 💀 (@Gargron@mastodon.social)" property="og:title">
<meta
content="“I've changed quite a few parts on joinmastodon.org/servers today in response to the feedback from the past week. In detail:”"
property="og:description">
</head>
<body>
Foo
</body>
</html>Gets us this in LinkPreview:
This HTML: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover">
<meta property="og:site_name" content="Mastodon">
<link rel="mask-icon" sizes="any" href="https://abs.twimg.com/responsive-web/client-web/icon-svg.168b89d9.svg" color="#1D9BF0">
<link rel="shortcut icon" href="//abs.twimg.com/favicons/twitter.2.ico">
<link rel="apple-touch-icon" sizes="192x192" href="https://abs.twimg.com/responsive-web/client-web/icon-ios.b1fc7279.png">
<meta name="theme-color" content="#191b22">
<title>Eugen 💀: "I've changed quite a few parts…" - Mastodon</title>
<meta content="article" property="og:type">
<meta description="" name="description">
<meta content="https://twitter.com/Redistrict/status/1591657489933938689" property="og:url">
<meta content="Eugen 💀 (@Gargron@mastodon.social)" property="og:title">
<meta
content="“I've changed quite a few parts on joinmastodon.org/servers today in response to the feedback from the past week. In detail:”"
property="og:description">
</head>
<body>
Foo
</body>
</html>Gets us this in LinkPreview:
The ONLY difference is that the Maybe we should open a Radar ticket to fix this, or something? All tested on macOS Monterey 12.6 by just throwing stuff at the wall with basic HTML on a github pages site. |
Wouldn't surprise me, a lot of platforms handle Twitter in a special way unfortunately. |
|
Yes, there seems to be special treatment for Twitter in Apple LinkPreview (as in other platforms too). I’ve seen lots of LinkPreviews from different sites and now that I think of it, Twitter is the only one where the content is expanded. Influencing internal working and special rules inside Apple LinkPreview is beyond the scope of this bug and we can’t expect it to happen. Nevertheless, even within these constraints, the previews for Mastodon posts could be much more useful, compared to the current one seen above. I made a few more examples.
Github is especially interesting because they encode a lot of info into the image 🙃 here is the extracted image from that. (Original image URL:
Generating the image is cool, but unlikely to be worth the work for Mastodon currently. What I think would make the most sense for Mastodon is to set up the metadata so that the author’s image does not end up being so big, and the title text is the beginning of the post content, instead of just referring to the author. You often won’t see the full content of the post, but just the beginning would be useful to get a flavor/taste of what the post is about, and deciding whether to tap on the preview to see the full thing. |
|
From disassembly, I can support the special tweet formatting comes from it detecting specifically Twitter or Sina Weibo URLs. ( With that being acknowledged, what should it be doing instead? From the OpenGraph side, how is Maybe it would be additional to throw up some non-standard attributes and build support around that, rather than encouraging one-off exceptions. As others have pointed out, there are likely improvements to be made to the tags as we provide them now. |
|
I've submitted a Radar for Apple to hopefully improve the way LPLinkView works, ID FB11832545 in case any Apple employees happen to see this :) |
|
Based on examination of the html of a twitter post and a mastodon post, I guessed in my closed-as-a-dupe issue #22382 that I suspected Messages is using the og:title and og:image tag information (as well as possibly some other meta tags) and discarding og:description. I wonder if it's possible for Mastodon server to detect the user-agent used by Messages and serve it a special version of the post in which the contents that would go into og:description is stuffed into og:title and og:image is omitted if there's no image in the post? I don't like the idea of serving things wrong as a special case, but I think this is an important case and I don't know how quickly or whether Apple will fix their implementation. A comment on the closed issue suggests that Messages isn't the only app that this might fix. I don't have a dev build of Mastodon up and running to try a test, I suppose maybe I could just put some static HTML versions of twitter and Mastodon posts on my web server and see what tweaks to the opengraph tags (and possibly the |
I can't imagine that would look very nice. |
|
It's what twitter does. If you open up this link in a browser and then examine the resulting source (getting the contentss of the tweet to display requires javascript), you'll find there's a tag that looks like this:
And when I send that twitter URL to myself via Apple Messages, its preview renders like so, which seems to be using the full contents of that og:title:
The og:title tag of "Insider Business on Twitter" appears to be ignored by Messages. It does attribute the tweet in the preview to "Insider Business", so maybe it isn't ignoring og:title but is doing a special-case-for-twitter grep of og:title for |
|
Whoa, so I'm totally wrong. There's the og:description right there, not og:title. I'm face-palming right now. It remains a mystery to me why URLs to Mastodon posts don't end up with better previews in Messages. |
I found the same thing. It seems to require a format of I did the very cursed thing (😂) as a hacky workaround for https://mstdn.link but I'd agree it's improper to update the actual project and the ball's fully in Apple's court for this, unfortunately. |
This is not only about Messages. Many other apps use LPLinkView for web previews. Including Mastodon apps. I'm not sure if the user agent for LPLinkMetadata fetcher is always the same, or does it depend on the app. |
|
One other tidbit. Link previews for Mastodon posts that contain images are actually really nice, and exactly as expected. The problem is only about the posts with text. Here is a nice LPLinkView of a Mastodon post with images. You could argue that if the post has both images and text (like this one), it could show some text as well, but that doesn’t matter so much. The images already provide a lot of valuable preview smell.
|
|
I'd actually suggest Mastodon should remove the account profile photo header from the markup for links to individual posts, on the logic that the profile photo is per se associated with the account, and not individual posts from that account. Until such time as Apple's Link Preview framework supports text preview content generally and not as a special-casing of Twitter, when sent/sending a Mastodon post link with no attachments, I'd personally rather see a media-less Link Preview in my Messages, with just the user name and domain text. A giant profile photo (perhaps repeated over and over, if you send multiple links) isn't directly relevant and unnecessarily takes up huge vertical space in the message thread. |
FWIW I like this suggestion because the giant profile photo can create a false impression that the profile photo is the content being shared. The recipient may not realize they are supposed to click on it to read a text-based message. |
|
Already removed in main branch. |
|
I am closing this as the original reporter, because in iOS 16.4 Apple indeed greatly improved how LPLinkView renders Mastodon previews. For reference, this is how the link from my original report is now presented.
|
Steps to reproduce the problem
LPLinkViewto render link previewsExpected behaviour
The link preview should have the post content
Actual behaviour
Link preview only shows avatar of author
Detailed description
(This issue may well affect also other systems that render previews of web links. I limit my discussion only to Apple LPLinkView because that’s what I’m familiar with.)
Link previews of Mastodon posts aren’t useful. They only show a large avatar of the author, and nothing about the post itself. Here is an example.
Link preview for
https://mastodon.social/@Gargron/109300299959535882rendered withLPLinkViewlooks like this:As comparison, link preview for a tweet like
https://twitter.com/joinmastodon/status/1591089671794462720looks like this, which is much more useful:Apple does not disclose how exactly they generate the previews. They definitely crawl the URL, and the preview is probably some combination of OpenGraph content, HTML metadata, and content parsing.
Link previews are powered by the
LPLinkMetadata. I give a URL toLPMetadataProviderwhich fetches the link for me and generates the metadata object.I can inspect the metadata objects in debugger. Here is what the data looks like for the Mastodon post:
And here is the same for the Twitter post:
You see that the link metadata for the Mastodon post actually contains the Mastodon post content, but for whatever reason, the Apple LPLinkView decides not to render it, and only shows me the author’s avatar.
I am not sure how other link preview renderers behave with Mastodon posts. Maybe it’s only an Apple quirk. Nevertheless, there are quite a few Apple users out there, and many apps use the system-provided link previews. It would be nice to provide more informative previews for Mastodon posts.
Specifications
Mastodon server version on mastodon.social that was used to fetch the post: v4.0.0rc3
The text was updated successfully, but these errors were encountered: