| ID | Project | Category | View Status | Date Submitted | Last Update |
|---|---|---|---|---|---|
| 0007829 | Taler | Web site(s) | public | 2023-04-29 19:41 | 2023-09-23 15:09 |
| Reporter | dvn | Assigned To | Stefan | ||
| Priority | normal | Severity | text | Reproducibility | always |
| Status | closed | Resolution | fixed | ||
| Target Version | 0.9.3 | Fixed in Version | 0.9.3 | ||
| Summary | 0007829: Suboptimal Link Previews for taler.net | ||||
| Description | When sharing the taler.net URL in a common messaging application, or social media site, the link preview generated shows a blurry GNU favicon instead of the Taler logo, and is non-descriptive. This is due to the taler.net website lacking Open Graph[0] metadata in its HTML header. Link previews are generated using this metadata, if available. I've included a patch which fixes this, and I've attached before and after screenshots of the link preview card. SVG is not supported, so I converted the logo to PNG and attached that, as well. [0] https://ogp.me/ | ||||
| Steps To Reproduce | Share "https://taler.net/" (or any localization) over a messenger such as Signal (what I did to test), or on a social media site like Twitter. | ||||
| Tags | No tags attached. | ||||
|
|
This was auto-assigned to Stefan. I'm not sure if that's as it should be, but I don't seem to have the ability to change that. |
|
|
Stefan, what are your thoughts? |
|
|
I poked a bit around with ICO generators and have now a couple of most common ICO and PNG files as well as an SVG image. 16x16 and 32x32 ICO images are awkward, so none of them will be at disposal. All icon images have to be squares. favicon,ico and favicon.png have to be in the root folder (this requires an IE convention). base.j2 shows the code to integrate all images. This is my solution to combine two worlds for an optimum outcome, also including your contribution as well. This code will be commited to Git and tested on several devices after I pushed the images to the git server, too. Cheers, Stefan base.j2 (1,559 bytes) |
|
|
Okay, so if I understand correctly you want to also update the icon/favicon to improve compatibility and image resolution? That's a separate issue, in my mind, but it seems like a good idea. The only thing I see that's a problem is in your `base.j2` attachment, is that you've added another `<meta name="description" [...]` When you push the changes to master, can you make a comment here so we can look at https://stage.taler.net/ ? |
|
|
You are absolutely right about the superfluous meta tag for description. I got rid of it now in the base-file and pushed changes in git to master so that you can see the effect on the staged website. The 32x32 px favicon looks just ridiculous to me. I recommend to use the favicon we have on https://taler-systems.com instead (this was my choice over the old favicon). But please take a look yourself, whether it's OK for your eyes what you see on https://stage.taler.net/. Thank you for your work in advance, dvn, looking forward to get your comments. Cheers, Stefan |
|
|
I agree that the current favicon does not look good scaled down so small. I also concur that the favicon https://taler-systems.com looks much better. I'd go with that if there's no reason *not* to. As for the link previews, it is not showing any image, as I don't think .ico is supported by most clients. I've attached how it looks now. We are not constrained to a square with the Open Graph image, so I think we should just use a PNG of the main Taler logo as I demonstrated before. stage.taler.png (22,757 bytes) |
|
|
OK. Please test now. Christian, is there any reason to not use the favicon we have for https://taler-systems.com? |
|
|
Stefan, it looks the same. |
|
|
Hi Devan, can you test with your device(s) how my last push worked out? Thanks in advance. Stefan |
|
|
There was an issue with the apple-touch-icon. I created a single 180x180 icon (which will be scaled down to different resolutions on iOS platforms according to specific needs of devices and applications) and linked it <link rel="apple-touch-icon" sizes="180x180" href="{{ url_static('images/apple-touch-icon.png') }}"> as <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"> did not work (Buildbot failure...). I hope this satisfies iOS now, but due to an Apple convention I prefer to leave the apple-touch-icon.png at two places, namely in /www/static/images AND in / Please test how the result works... Thanks again! Cheers Stefan |
|
|
The iOS stuff is not the same as the Opengraph convention. So it still doesn't look as good as it did from my patch (in my opinion), but it does look better than before. I've attached an image of how it looks for me now. image.png (16,240 bytes) |
|
|
True, the iOS stuff is not the same as the Opengraph convention. It's an Apple convention. Hopefully, it works. Maybe my workaround with an array of meta tags for different favicons will do the job now. Attached, you will find base.j2 with OG metatags and direct and relative links to favicon.ico. Please be so kind to test again now or later. Thanks! S. base-2.j2 (1,634 bytes) |
|
|
In case we would like to be kind to Twitter users it might be recommendable to add for 'Twitter Cards': <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site"@taler"> <meta name="twitter:title" content="GNU Taler - Taxable Anonymous Libre Electronic Reserves"> <meta name="twitter:url" content="https://taler.net/"> <meta name="twitter:description" content="A payment system that makes privacy-friendly online transactions fast and easy."> <meta name="twitter:image:src" content="{{ url_static('images/favicon.png') }}"> See more info on https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started |
|
|
I don't think we want to be kind to Twitter or any other specific proprietary platform. If there is a vendor-neutral standard, that's fine, but let's not put proprietary tags. Is the issue then resolved? |
|
|
Devan, can you be so nice to test again and reply with your verdict whether you think this issue to be resolved? Regarding kindness to Twitter: NA Kindness towards Twitter users: Depends on how ugly Twitter displays the GNU Taler link preview in their media. Kindness to vendor-neutral standards: Yes, please, name them and pass on to me. Open Graph[0] metadata was originally conceived by Facebook, by the way, IIRC. S. |
|
|
Yes, it looks good now. Screenshot attached. Twitter will use Open Graph tags if no Twitter tags are present: https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started#opengraph image-2.png (31,826 bytes) |
|
|
Well then: Success! Thank you, Devan, for this Mantis ticket and for our nice conversation regarding the link review / favicon issue before we even had the chance to get acquainted on another channel. CU Stefan |
|
|
dvn/stefan: please mark issues as *resolved* when key people involved agree that the issue has been fixed. |
