From ee428679f08cfdc0853e140b1866adcdb99da81b Mon Sep 17 00:00:00 2001 From: David McDonald Date: Wed, 23 Jun 2021 14:28:34 +0100 Subject: [PATCH] Fix twitter card not showing our image Currently our specified image is not being shown on twitter cards, for example in https://twitter.com/msuxg/status/1407254592333697024 In our html we currently have ``` ... ``` where the first is the image we want to show and the second is html added by the GOV.UK Frontend. https://github.com/alphagov/govuk-frontend/blob/v3.12.0/src/govuk/template.njk#L26 Note the second meta image currently 404s for us because it is a relative url rather than an absolute url. Twitter should be following the spec of open graph, where the first image is given preference and it ignores the second - https://ogp.me/#array. However, I think it is not following this correctly and that is why our image is not showing on twitter cards. This hypothesis backed by a manual test by me to remove the second meta tag and I see that twitter renders our card with our first image correctly. Therefore it leaves us with a few options 1. Get twitter to fix a potential bug with their twitter card implementation 2. Change the second meta tag to use an absolute URL 3. Get the design system to remove their fallover tag 4. Add in specific meta tags for twitter images Option 1 and 3 will take time and effort. Option 2 may not work because we won't have a file hosted in our assets directory at that location because of https://github.com/alphagov/notifications-govuk-alerts/pull/118 Therefore I've gone for option 4 because I've tested it and it appears to work and it is also quick and non controversial. You can see the spec documented at https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup --- templates/components/meta_tags.html | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/templates/components/meta_tags.html b/templates/components/meta_tags.html index 91569a9f..ed881f0f 100644 --- a/templates/components/meta_tags.html +++ b/templates/components/meta_tags.html @@ -1,10 +1,11 @@ {% macro metaTags(description, title, url) %} + + - {% endmacro %}