Commits on Jun 23, 2021

1. 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
   ```
   <meta property="og:image" content="https://www.gov.uk/alerts/assets/images/opengraph-image.png?f86f1d0dd106bfbcd8ad1ee5ea68e75e">
   ...
   <meta property="og:image" content="/assets/images/govuk-opengraph-image.png">
   ```
   
   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 #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

   

   idavidmcdonald committed Jun 23, 2021
   Configuration menu

   • View commit details
   • Copy full SHA for ee42867
   • Browse repository at this point

   Copy the full SHA

   ee42867 View commit details

   Browse the repository at this point in the history