View Issue Details
ID | Project | Category | View Status | Date Submitted | Last Update |
---|---|---|---|---|---|
0007829 | Taler | Web site(s) | public | 2023-04-29 19:41 | 2023-05-05 16:04 |
Reporter | dvn | Assigned To | Stefan | ||
Priority | normal | Severity | text | Reproducibility | always |
Status | assigned | Resolution | open | ||
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. | ||||
|
opengraph.patch (855 bytes)
diff --git a/common/base.j2 b/common/base.j2 index 31b5f1e..cc8afc2 100644 --- a/common/base.j2 +++ b/common/base.j2 @@ -3,7 +3,11 @@ <head> <meta charset="UTF-8"/> <title>{{ _("GNU Taler") }}</title> - <meta name="description" content="{{ _('Taxable Anonymous Libre Electronic Reserves') }}" /> + <meta property="og:title" content="GNU Taler - Taxable Anonymous Libre Electronic Reserves" /> + <meta property="og:type" content="website" /> + <meta property="og:url" content="{{ url_localized('index.html') }}" /> + <meta property="og:image" content="{{ url_static('images/logo-2021.png') }}" /> + <meta name="description" content="{{ _('A payment system that makes privacy-friendly online transactions fast and easy.') }}" /> {% include "common/header.j2.inc" %} {% block head_content %}{% endblock %} </head> |
|
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)
<!DOCTYPE html> <html lang="{{ lang }}"> <head> <meta charset="UTF-8"/> <title>{{ _("GNU Taler") }}</title> <meta name="description" content="{{ _('Taxable Anonymous Libre Electronic Reserves') }}" /> <link rel="icon" type="image/svg+xml" href="{{ url_static('images/favicon.svg') }}" sizes="any"> <link rel="icon" type="image/png" href="{{ url_static('images/android-chrome-192x192.png') }}" sizes="192x192"> <link rel="icon" type="image/png" href="{{ url_static('images/android-chrome-512x512.png') }}" sizes="512x512"> <link rel="apple-touch-icon" sizes="180x180" href="{{ url_static('images/apple-touch-icon.png') }}"> <meta name="msapplication-TileColor" content="#ffffff"> <meta name="msapplication-TileImage" content="{{ url_static('images/mstile-150x150.png') }}"> <meta property="og:title" content="GNU Taler - Taxable Anonymous Libre Electronic Reserves" /> <meta property="og:type" content="website" /> <meta property="og:url" content="{{ url_localized('index.html') }}" /> <meta property="og:image" content="{{ url_static('images/favicon-240x240.ico') }}" /> <meta name="description" content="{{ _('A payment system that makes privacy-friendly online transactions fast and easy.') }}" /> {% include "common/header.j2.inc" %} {% block head_content %}{% endblock %} </head> <body id="mybody"> {% include "common/navigation.j2.inc" %} <div id="body_content"> {% block body_content %}{% endblock %} </div> {% include "common/footer.j2.inc" %} </body> </html> |
|
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. |
|
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. |
Date Modified | Username | Field | Change |
---|---|---|---|
2023-04-29 19:41 | dvn | New Issue | |
2023-04-29 19:41 | dvn | Status | new => assigned |
2023-04-29 19:41 | dvn | Assigned To | => Stefan |
2023-04-29 19:41 | dvn | File Added: opengraph.patch | |
2023-04-29 19:41 | dvn | File Added: BEFORE-taler-linkpreview.png | |
2023-04-29 19:41 | dvn | File Added: AFTER-taler-linkpreview.png | |
2023-04-29 19:41 | dvn | File Added: logo-2021.png | |
2023-04-29 19:45 | dvn | Note Added: 0020171 | |
2023-04-30 19:04 | Christian Grothoff | Severity | minor => text |
2023-05-04 17:11 | dvn | Note Added: 0020176 | |
2023-05-04 18:32 | Stefan | Note Added: 0020178 | |
2023-05-04 18:32 | Stefan | File Added: base.j2 | |
2023-05-04 20:17 | dvn | Note Added: 0020181 | |
2023-05-04 23:24 | Stefan | Note Added: 0020183 | |
2023-05-04 23:35 | dvn | Note Added: 0020184 | |
2023-05-04 23:35 | dvn | File Added: stage.taler.png | |
2023-05-05 06:31 | Stefan | Note Added: 0020185 | |
2023-05-05 16:04 | dvn | Note Added: 0020186 |