diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3d27b4fb30..be7be5b0f8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -40,6 +40,14 @@ You can use this option instead of setting the boolean `selected` option on each
This change was introduced in [pull request #2616: Allow selecting options by passing current values](https://github.com/alphagov/govuk-frontend/pull/2616).
+#### Customise the Open Graph image URL without duplicate meta tags
+
+You can now customise the Open Graph image URL included in the `` by setting the `opengraphImageUrl` Nunjucks option.
+
+Additionally, the default Open Graph image URL meta tag will now only be included if either `opengraphImageUrl` or `assetUrl` is set.
+
+This change was introduced in [pull request #2673: Allow Open Graph image URL to be customised](https://github.com/alphagov/govuk-frontend/pull/2673).
+
### Recommended changes
#### Replace deprecated `govuk-header__link--service-name` class in the header
diff --git a/src/govuk/template.njk b/src/govuk/template.njk
index 55f19553da..67bcdd1240 100644
--- 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) -%}
@@ -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 #}
-
+
+ {# 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 %}
+
+ {% endif %}
document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');
diff --git a/src/govuk/template.test.js b/src/govuk/template.test.js
index ddbdbdc4ef..1f3b5beed7 100644
--- 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('', () => {