Allow OpenGraph image URL to be customised

We previously told users that if they needed to override the OpenGraph image they should add their own meta tag to the head block and that this would override the one in the template (based on the spec). Some users have found that this isn’t reliable [1] or can result in multiple images being displayed [2] – and it’s a waste of bytes to include a redundant meta tag. Instead, allow the OpenGraph image URL in the template to be set using a new `opengraphImageUrl` Nunjucks option. If no `opengraphImageUrl` is provided, keep the existing behaviour that uses `assetUrl` as a prefix for a non-customisable path of `images/govuk-opengraph-image.png`. However, when neither `opengraphImageUrl` or `assetUrl` are passed, no longer fall back to using the `assetPath` option. OpenGraph image URLs must be absolute [3] and using the `assetPath` only gives us a relative URL, so we should just omit the OpenGraph image tag in these cases. This is a change in behaviour, as previously an `og:image` meta tag would always be included, but it only be valid if `assetUrl` had been set. Fixes #1920. [1]: alphagov/emergency-alerts-govuk#124 [2]: #1920 (comment) [3]: https://ogp.me/#data_types
alphagov · Jun 27, 2022 · 9afc0bf · 9afc0bf
1 parent 7c14c47
commit 9afc0bf
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 14 deletions.
diff --git a/src/govuk/template.njk b/src/govuk/template.njk
@@ -1,8 +1,6 @@
 {% from "./components/skip-link/macro.njk" import govukSkipLink -%}
 {% from "./components/header/macro.njk" import govukHeader -%}
 {% from "./components/footer/macro.njk" import govukFooter -%}
-{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #}
-{%- set assetUrl = assetUrl | default(assetPath) -%}
 <!DOCTYPE html>
 <html lang="{{ htmlLang | default('en') }}" class="govuk-template {{ htmlClasses }}">
   <head>
@@ -23,9 +21,11 @@
     {% endblock %}
 
     {% block head %}{% endblock %}
-    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
-    {# image url needs to be absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}
-    <meta property="og:image" content="{{ assetUrl | default('/assets') }}/images/govuk-opengraph-image.png">
+
+    {# OpenGraph images needs to be absolute, so we need either a URL for the image or for assetUrl to be set #}
+    {% if opengraphImageUrl or assetUrl %}
+    <meta property="og:image" content="{{ opengraphImageUrl | default(assetUrl + '/images/govuk-opengraph-image.png') }}">
+    {% endif %}
   </head>
   <body class="govuk-template__body {{ bodyClasses }}" {%- for attribute, value in bodyAttributes %} {{attribute}}="{{value}}"{% endfor %}>
     <script{% if cspNonce %} nonce="{{ cspNonce }}"{% endif %}>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>

diff --git a/src/govuk/template.test.js b/src/govuk/template.test.js
@@ -76,18 +76,27 @@ describe('Template', () => {
       expect($icon.attr('href')).toEqual('/whatever/images/favicon.ico')
     })
 
-    it('uses a default assets URL of whatever assetPath is', () => {
-      const $ = renderTemplate({ assetPath: '/whatever' })
-      const $ogImage = $('meta[property="og:image"]')
+    describe('opengraph image', () => {
+      it('is not included if neither assetUrl nor opengraphImageUrl are set ', () => {
+        const $ = renderTemplate({})
+        const $ogImage = $('meta[property="og:image"]')
 
-      expect($ogImage.attr('content')).toEqual('/whatever/images/govuk-opengraph-image.png')
-    })
+        expect($ogImage.length).toBe(0)
+      })
 
-    it('can have the assets URL overridden using assetUrl', () => {
-      const $ = renderTemplate({ assetUrl: '//a.gov.uk' })
-      const $ogImage = $('meta[property="og:image"]')
+      it('is included using default path and filename if assetUrl is set', () => {
+        const $ = renderTemplate({ assetUrl: 'https://foo.com/my-assets' })
+        const $ogImage = $('meta[property="og:image"]')
 
-      expect($ogImage.attr('content')).toEqual('//a.gov.uk/images/govuk-opengraph-image.png')
+        expect($ogImage.attr('content')).toEqual('https://foo.com/my-assets/images/govuk-opengraph-image.png')
+      })
+
+      it('is included if opengraphImageUrl is set', () => {
+        const $ = renderTemplate({ opengraphImageUrl: 'https://foo.com/custom/og-image.png' })
+        const $ogImage = $('meta[property="og:image"]')
+
+        expect($ogImage.attr('content')).toEqual('https://foo.com/custom/og-image.png')
+      })
     })
 
     describe('<meta name="theme-color">', () => {