Allow og:image meta tag to be customisable #847

kr8n3r · 2018-06-29T13:08:55Z

Moving the meta tag into the head block so that it can be overwritten, as the image path for it needs to be an absolute path.

Fixes: #813

NickColley · 2018-07-02T15:05:42Z

src/template.njk

@@ -18,10 +18,11 @@
      <link rel="apple-touch-icon" href="{{ assetPath | default('/assets') }}/images/govuk-apple-touch-icon.png">
    {% endblock %}

-    {% block head %}{% endblock %}
-
+    {% block head %}


This is a breaking change since before even when you set head you'd get the default open graph image.

Could this be solved by something like

<meta property="og:image" content="{{ opengraphAssetPath | default('') }}{{ assetPath | default('/assets') }}/images/govuk-opengraph-image.png">

tru dat. updated so that the variable can just be set

36degrees · 2018-07-02T16:10:21Z

src/template.njk

    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
-    <meta property="og:image" content="{{ assetPath | default('/assets') }}/images/govuk-opengraph-image.png">
+    {# image path needs to absolute e.g. http://wwww.domain.com/.../govuk-opengraph-image.png #}


Path refers to just the part after the domain - i.e. just the /.../govuk-opengraph-image.png bit. How about assetUrl?

sure. updated

NickColley · 2018-07-03T09:31:23Z

Would you mind raising an issue after this is merged on the Design System repo to include this new feature in the guidance?

NickColley · 2018-07-10T09:45:19Z

src/template.njk

    {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #}
-    <meta property="og:image" content="{{ assetPath | default('/assets') }}/images/govuk-opengraph-image.png">
+    {# 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">


I think the default needs to be 'assetPath' otherwise this is a breaking change still?

maybe {{ openGraphImagePath | assertPath | default('/assets') }}

not sure

it doesn't work with assetPath anyway, so not sure it's a breaking change

Fair point, but consider if someone set their 'assetPath' to a absolute path, it would be working for those users?

yeah.
we can set
{% set assetUrl = assetUrl or (assetPath | default('/assets')) %}

so if they do have it set to absolute atm, OG image will still work.

for anyone new, they can assign a new value to assetUrl ?

modified so that the default value for assetUrl is assetPath, insuring it is not a breaking change if anyone specified an absolute url for the assets

36degrees

Given it seems that the opengraph image needs an absolute URL, do we need to document this somewhere? e.g. https://design-system.service.gov.uk/styles/page-template/?

How did this work in GOV.UK Template?

36degrees · 2018-07-10T14:11:50Z

CHANGELOG.md

@@ -28,6 +28,15 @@
  ([PR #837](https://github.com/alphagov/govuk-frontend/pull/837) and
   [PR #848](https://github.com/alphagov/govuk-frontend/pull/848))

+- Use relative line-height


This shouldn't be part of this PR.

36degrees · 2018-07-10T14:12:13Z

CHANGELOG.md

+  Update typography styles to use relative, unitless line-height
+  ([PR #837](https://github.com/alphagov/govuk-frontend/pull/837))
+
+- Allow og:image meta tag to be customisable


It was already customisable by modifying assetPath – I think we need to be clearer as to what the change is here.

NickColley · 2018-07-10T14:17:29Z

Original code: https://github.com/alphagov/govuk_template/blob/master/source/views/layouts/govuk_template.html.erb#L36

kr8n3r · 2018-07-10T15:05:41Z

i've updated the wording

NickColley · 2018-07-17T14:52:36Z

Thinking about this more, if this is solved by setting 'assetPath' to an absolute url do we need to do this at all?

kr8n3r · 2018-07-18T13:37:06Z

we can't set the absolute path for example in the design system (as we have two different urls)
but if thats not of a concern and we just leave the declaration twice as we have now, then there is no need for this indeed

Moving the meta tag into the `head`block so that it can be overwritten with an absolute path

NickColley

I think this makes sense, assetUrl feels a little vague but it works as intended, as long as we document this well in the Design System.

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-847 June 29, 2018 13:09 Inactive

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from 00ef166 to 645e77a Compare June 29, 2018 13:12

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-847 June 29, 2018 13:12 Inactive

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from 645e77a to 56132d5 Compare July 1, 2018 10:36

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-847 July 1, 2018 10:37 Inactive

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from 56132d5 to ff7a345 Compare July 2, 2018 14:24

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-847 July 2, 2018 14:24 Inactive

kr8n3r added the enhancement label Jul 2, 2018

NickColley reviewed Jul 2, 2018

View reviewed changes

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from ff7a345 to 254971a Compare July 2, 2018 15:56

govuk-design-system-ci temporarily deployed to govuk-frontend-review-pr-847 July 2, 2018 15:56 Inactive

36degrees reviewed Jul 2, 2018

View reviewed changes

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from 254971a to 12e1249 Compare July 2, 2018 19:28

govuk-design-system-ci deployed to govuk-frontend-review-pr-847 July 2, 2018 19:28 View deployment

kr8n3r mentioned this pull request Jul 3, 2018

Add guidance to the template on how to customise OpenGraph image alphagov/govuk-design-system#424

Closed

kr8n3r added this to the v1.1.0 milestone Jul 4, 2018

NickColley reviewed Jul 10, 2018

View reviewed changes

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch 2 times, most recently from 57b4d7a to 062c959 Compare July 10, 2018 14:12

36degrees reviewed Jul 10, 2018

View reviewed changes

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from 062c959 to e01316d Compare July 10, 2018 14:49

kr8n3r removed this from the v1.1.0 milestone Jul 13, 2018

NickColley added feature request User requests a new feature and removed enhancement labels Jul 13, 2018

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch 2 times, most recently from ae6f29f to 6b7b7dc Compare July 13, 2018 18:39

Jani Kraner added 2 commits July 19, 2018 09:46

Allow og:image meta tag path to be customisable

b72504d

Moving the meta tag into the `head`block so that it can be overwritten with an absolute path

Document in CHANGELOG

912b9f1

kr8n3r force-pushed the make-og-image-meta-tag-customisable branch from 6b7b7dc to 912b9f1 Compare July 19, 2018 08:46

NickColley approved these changes Jul 19, 2018

View reviewed changes

kr8n3r added this to the [NEXT] milestone Jul 19, 2018

kr8n3r merged commit 7509a5d into master Jul 19, 2018

kr8n3r deleted the make-og-image-meta-tag-customisable branch July 19, 2018 10:37

kr8n3r mentioned this pull request Jul 26, 2018

Release v1.2.0 (feature release) #928

Merged

hannalaakso mentioned this pull request Oct 28, 2019

Add ability to override or remove Open Graph meta tag in Template #1289

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow og:image meta tag to be customisable #847

Allow og:image meta tag to be customisable #847

kr8n3r commented Jun 29, 2018 •

edited

Loading

NickColley Jul 2, 2018

kr8n3r Jul 2, 2018

36degrees Jul 2, 2018

kr8n3r Jul 2, 2018

NickColley commented Jul 3, 2018

NickColley Jul 10, 2018

NickColley Jul 10, 2018

kr8n3r Jul 10, 2018

NickColley Jul 10, 2018

kr8n3r Jul 10, 2018 •

edited

Loading

kr8n3r Jul 10, 2018 •

edited

Loading

36degrees left a comment

36degrees Jul 10, 2018

36degrees Jul 10, 2018

NickColley commented Jul 10, 2018

kr8n3r commented Jul 10, 2018

NickColley commented Jul 17, 2018

kr8n3r commented Jul 18, 2018

NickColley left a comment

Allow og:image meta tag to be customisable #847

Allow og:image meta tag to be customisable #847

Conversation

kr8n3r commented Jun 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley commented Jul 3, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kr8n3r Jul 10, 2018 • edited Loading

Choose a reason for hiding this comment

kr8n3r Jul 10, 2018 • edited Loading

Choose a reason for hiding this comment

36degrees left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NickColley commented Jul 10, 2018

kr8n3r commented Jul 10, 2018

NickColley commented Jul 17, 2018

kr8n3r commented Jul 18, 2018

NickColley left a comment

Choose a reason for hiding this comment

kr8n3r commented Jun 29, 2018 •

edited

Loading

kr8n3r Jul 10, 2018 •

edited

Loading

kr8n3r Jul 10, 2018 •

edited

Loading