Allow Open Graph image URL to be customised #1920
Assignees
Labels
🕔 hours
A well understood issue which we expect to take less than a day to resolve.
page template
small story
Milestone
Comments
kellylee-gds
added
🕔 hours
|
@DevRCRun Thanks for raising this. In theory, it shouldn't be an issue. The opengraph spec says:
However, the GOV.UK Notify team have found that Twitter seems to be using the second They're working around this by adding a specific This is all a little counter-intuitive, but I think fixing this might involve breaking changes. Ideally we'll revisit this as part of the upcoming 4.0 release. |
|
As discussed in the v4 planning session, we think this can probably be implemented without a breaking change by making sure we provide a default opengraph image even if we let users customise it. |
|
I've noticed that when links are shared on Apple's Messages, if there are multiple opengraph images defined then both will display. |
36degrees
added a commit
that referenced
this issue
Jun 24, 2022
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
36degrees
added a commit
that referenced
this issue
Jun 27, 2022
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
36degrees
changed the title
querkmachine
pushed a commit
that referenced
this issue
Oct 17, 2022
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi
We've set our own absolute URL for this per the instructions in https://design-system.service.gov.uk/styles/page-template/#blocks within block head.
However because your own fallback code is outside of the head block this is still being included in the page. Looking at the comment in the page template and the discussion in alphagov/govuk-design-system#1072 this appears to be by design / at least accepted for the moment in preference to the breaking changes discussed in #1289
From our pov as a local government organisation, we are making sure there are no crown images remaining in our service. Is it okay in this respect to have two
<meta property="og:image">I am unsure as to whether the second one from the module would or would not ever get used.
Thanks
The text was updated successfully, but these errors were encountered: