From c94180754d8b51eed53fb921e3c4a5f6c86a72a8 Mon Sep 17 00:00:00 2001 From: Tijmen Brommet Date: Thu, 19 Apr 2018 14:40:25 +0100 Subject: [PATCH 1/2] Update slimmer to fix meta tags Includes https://github.com/alphagov/slimmer/pull/218. --- Gemfile | 2 +- Gemfile.lock | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Gemfile b/Gemfile index c5b5da6e0..abdff549c 100644 --- a/Gemfile +++ b/Gemfile @@ -19,7 +19,7 @@ gem 'govuk_app_config', '~> 1.4' gem 'govuk_frontend_toolkit', '~> 7.4' gem 'govuk_publishing_components', '~> 6.5.0' gem 'plek', '~> 2.1' -gem 'slimmer', '~> 12.0' +gem 'slimmer', '~> 12.1' group :development, :test do gem 'govuk-lint' diff --git a/Gemfile.lock b/Gemfile.lock index c2c5369cc..cc453550e 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -302,7 +302,7 @@ GEM rubyzip (~> 1.2) sentry-raven (2.7.2) faraday (>= 0.7.6, < 1.0) - slimmer (12.0.0) + slimmer (12.1.0) activesupport json nokogiri (~> 1.7) @@ -382,7 +382,7 @@ DEPENDENCIES rails-i18n (>= 4.0.4) rails_translation_manager (~> 0.0.2) sass-rails (~> 5.0) - slimmer (~> 12.0) + slimmer (~> 12.1) uglifier (>= 1.3.0) webmock (~> 3.3.0) wraith (~> 4.2) From ef9371e0c2b76569ed8109a4494dba476ac641ef Mon Sep 17 00:00:00 2001 From: Tijmen Brommet Date: Thu, 19 Apr 2018 14:40:43 +0100 Subject: [PATCH 2/2] Better meta tags for third parties 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 --- app/presenters/content_item_presenter.rb | 4 ++ app/presenters/travel_advice_presenter.rb | 4 -- app/views/layouts/application.html.erb | 19 +++++++++ test/integration/meta_tags_test.rb | 52 +++++++++++++++++++++++ 4 files changed, 75 insertions(+), 4 deletions(-) create mode 100644 test/integration/meta_tags_test.rb diff --git a/app/presenters/content_item_presenter.rb b/app/presenters/content_item_presenter.rb index d92045d10..dac8a18cf 100644 --- a/app/presenters/content_item_presenter.rb +++ b/app/presenters/content_item_presenter.rb @@ -49,6 +49,10 @@ def content_id content_item["content_id"] end + def web_url + Plek.current.website_root + content_item["base_path"] + end + private def display_date(timestamp, format = "%-d %B %Y") diff --git a/app/presenters/travel_advice_presenter.rb b/app/presenters/travel_advice_presenter.rb index c8486d094..c91860537 100644 --- a/app/presenters/travel_advice_presenter.rb +++ b/app/presenters/travel_advice_presenter.rb @@ -90,10 +90,6 @@ def atom_public_updated_at DateTime.parse(content_item["public_updated_at"]) end - def web_url - Plek.current.website_root + content_item["base_path"] - end - private # Treat summary as the first part diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index c33ae2af7..c556c0514 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -20,9 +20,28 @@ <%= javascript_include_tag "application", integrity: true, crossorigin: 'anonymous' %> <%= csrf_meta_tags %> <%= render partial: 'govuk_component/analytics_meta_tags', locals: { content_item: @content_item.content_item } %> + <% if @content_item.description %> <% end %> + + + + + + + + <% if @content_item.respond_to?(:image) && @content_item.image %> + " /> + " /> + + + " /> + " /> + <% else %> + + <% end %> + <%= contextual_comms_test_variant.analytics_meta_tag.html_safe if whitelisted_campaign_page? %> <%= yield :extra_head_content %> diff --git a/test/integration/meta_tags_test.rb b/test/integration/meta_tags_test.rb new file mode 100644 index 000000000..e9fda47d9 --- /dev/null +++ b/test/integration/meta_tags_test.rb @@ -0,0 +1,52 @@ +require 'test_helper' + +class MetaTagsTest < ActionDispatch::IntegrationTest + test "correct meta tags are displayed for pages" do + case_study = GovukSchemas::RandomExample.for_schema(frontend_schema: 'news_article') do |random| + random.merge( + "title" => "Zhe title", + "withdrawn_notice" => {}, + ) + end + + content_store_has_item("/some-page", case_study.to_json) + + visit "/some-page" + + assert page.has_css?("meta[property='og:title'][content='Zhe title']", visible: false) + end + + test "correct meta tags are displayed for pages without images" do + case_study = GovukSchemas::RandomExample.for_schema(frontend_schema: 'news_article') do |random| + random["details"].delete("image") + random + end + + content_store_has_item("/some-page", case_study.to_json) + + visit "/some-page" + + assert page.has_css?("meta[name='twitter:card'][content='summary']", visible: false) + end + + test "correct meta tags are displayed for pages with images" do + case_study = GovukSchemas::RandomExample.for_schema(frontend_schema: 'news_article') do |random| + random["details"] = random["details"].merge( + "image" => { + "url" => "https://example.org/image.jpg", + "alt_text" => "An accessible alt text", + } + ) + + random + end + + content_store_has_item("/some-page", case_study.to_json) + + visit "/some-page" + + assert page.has_css?("meta[name='twitter:card'][content='summary_large_image']", visible: false) + assert page.has_css?("meta[name='twitter:image'][content='https://example.org/image.jpg']", visible: false) + assert page.has_css?("meta[property='og:image'][content='https://example.org/image.jpg']", visible: false) + end +end