View Issue Details

Jump to NotesJump to History
IDProjectCategoryView StatusDate SubmittedLast Update
0007829TalerWeb site(s)public2023-04-29 19:412023-05-05 16:04
Reporterdvn Assigned ToStefan  
PrioritynormalSeveritytextReproducibilityalways
Status assignedResolutionopen 
Summary0007829: Suboptimal Link Previews for taler.net
DescriptionWhen 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 ReproduceShare "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.
TagsNo tags attached.

Activities

dvn

2023-04-29 19:41

developer  

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>
opengraph.patch (855 bytes)   
BEFORE-taler-linkpreview.png (20,580 bytes)   
BEFORE-taler-linkpreview.png (20,580 bytes)   
AFTER-taler-linkpreview.png (38,204 bytes)   
AFTER-taler-linkpreview.png (38,204 bytes)   
logo-2021.png (28,781 bytes)   
logo-2021.png (28,781 bytes)   

dvn

2023-04-29 19:45

developer   ~0020171

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.

dvn

2023-05-04 17:11

developer   ~0020176

Stefan, what are your thoughts?

Stefan

2023-05-04 18:32

developer   ~0020178

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>
base.j2 (1,559 bytes)   

dvn

2023-05-04 20:17

developer   ~0020181

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/ ?

Stefan

2023-05-04 23:24

developer   ~0020183

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

dvn

2023-05-04 23:35

developer   ~0020184

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)   
stage.taler.png (22,757 bytes)   

Stefan

2023-05-05 06:31

developer   ~0020185

OK. Please test now.

Christian, is there any reason to not use the favicon we have for https://taler-systems.com?

dvn

2023-05-05 16:04

developer   ~0020186

Stefan, it looks the same.

Issue History

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