Better meta tags for third parties #878
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Davidslv
reviewed
Apr 18, 2018
| @@ -49,6 +49,11 @@ def content_id | |||
| content_item["content_id"] | |||
| end | |||
|
|
|||
| def web_url | |||
| # Plek.current.website_root + content_item["base_path"] | |||
| "https://government-frontend-pr-878.herokuapp.com" + content_item["base_path"] | |||
There was a problem hiding this comment.
just a suggestion: You could try to make Plek.current read the env variable from heroku
https://stackoverflow.com/questions/12570579/how-to-get-heroku-app-name-url-from-inside-the-app
tijmenb
force-pushed
the
better-meta-tags
branch
from
50f226b to
1a7b880
Compare
tijmenb
added a commit
to alphagov/slimmer
that referenced
this pull request
Apr 19, 2018
When combining the template and application HTML, the `TagMover` will take the meta and script tags from the application HTML and move them to the bottom of the `<head>` tag. `TagMover` moves them to the bottom, so that the CSS of the application can override the CSS of the template (there's even a test in this gem to make sure it does it like this). However, the desired behaviour for meta tags is the reverse. In particular, we want the `og:image` from the application to be higher than the `og:image` from the template. This is because services like Slack will choose the first `og:image` tag and not the more appropriate custom one. I tried to do this in alphagov/govuk_template#349, but I forgot that life isn't easy and Slimmer exists. Will enable alphagov/government-frontend#878 to work properly.
tijmenb
force-pushed
the
better-meta-tags
branch
from
f9595b9 to
1da3b1d
Compare
tijmenb
force-pushed
the
better-meta-tags
branch
from
1da3b1d to
c2ae8e1
Compare
tijmenb
force-pushed
the
better-meta-tags
branch
from
c2ae8e1 to
1efbd60
Compare
This adds a number of meta tags for use by third parties like Facebook, Slack and Twitter. It makes the most difference to pages that have images like news articles and case studies. - Opengraph (`og`) tag are used by most services. You can read the spec here http://ogp.me. - The `twitter` tags are service-specific but are also used by Slack and possibly others (https://medium.com/slack-developer-blog/everything-you-ever-wanted-to-k now-about-unfurling-but-were-afraid-to-ask-or-how-to-make-your-e64b4bb92
tijmenb
force-pushed
the
better-meta-tags
branch
from
1efbd60 to
ef9371e
Compare
rubenarakelyan
approved these changes
Apr 19, 2018
tijmenb
added a commit
to alphagov/govuk_publishing_components
that referenced
this pull request
May 22, 2018
This was first added in: alphagov/government-frontend#878
tijmenb
added a commit
to alphagov/govuk_publishing_components
that referenced
this pull request
May 23, 2018
This was first added in: alphagov/government-frontend#878
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This adds a number of new metatags for third parties to use.
It makes the most difference to pages that have images, like news articles and images.
Facebook
Linter output
Before:
After:
Slack
Before:
After:
Twitter
Tested with https://cards-dev.twitter.com/validator.
Before:
After:
Whatsapp
Before:
After: