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

@@ -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")

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

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 %>
     <meta name="description" content="<%= strip_tags(@content_item.description) %>" />
   <% end %>
+
+  <meta property="og:site_name" content="GOV.UK" />
+  <meta property="og:type" content="article" />
+  <meta property="og:url" content="<%= @content_item.web_url %>" />
+  <meta property="og:title" content="<%= @content_item.page_title %>" />
+  <meta property="og:description" content="<%= strip_tags(@content_item.description) %>" />
+
+  <% if @content_item.respond_to?(:image) && @content_item.image %>
+    <meta property="og:image" content="<%= @content_item.image["url"] %>" />
+    <meta property="og:image:alt" content="<%= @content_item.image["alt_text"] %>" />
+
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:image" content="<%= @content_item.image["url"] %>" />
+    <meta name="twitter:image:alt" content="<%= @content_item.image["alt_text"] %>" />
+  <% else %>
+    <meta name="twitter:card" content="summary" />
+  <% end %>
+
   <%= contextual_comms_test_variant.analytics_meta_tag.html_safe if whitelisted_campaign_page? %>
   <%= yield :extra_head_content %>
 </head>

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