Improve Open Graph metadata

This will improve how codebar.io links look like when shared across
social networks.

Closes #2371 and #2353.

Author: gnclmorais

app/assets/images/codebar-social.jpg

@@ -10,7 +10,7 @@ def attending(workshop, member, invitation, waiting_list = false)
     setup(workshop, invitation, member)
     @waiting_list = waiting_list
 
-    subject = "Attendance Confirmation: #{I18n.t('workshop.virtual.title',
+    subject = "Attendance Confirmation: #{I18n.t('workshops.virtual.title_with_date',
                                                  chapter: @workshop.chapter.name,
                                                  date: humanize_date(@workshop.date_and_time))}"
 

app/mailers/virtual_workshop_invitation_mailer.rb

@@ -5,21 +5,25 @@
     %meta{ name: 'viewport', content: 'width=device-width, initial-scale=1.0' }
     %meta{ name: 'robots', content: 'index, follow' }
     %meta{ property: 'fb:admins', content: '622070503' }
-    %meta{ property: 'og:type', content: 'website' }
-    %meta{ property: 'og:locale', content: 'en_GB' }
-    %meta{ property: 'og:site_name', content: 'codebar' }
     %meta{ name: 'keywords', content: 'codebar, programming, diversity, html, css, javascript, ruby, python' }
-    %meta{ property: 'og:image', content: image_url('logo-square.png') }
-    %meta{ property: 'og:url', content: request.original_url }
-    %meta{ property: 'og:title', content: 'codebar' }
-    %meta{ property: 'og:description', content: 'Making tech more diverse and welcoming by bringing people together and helping teach programming skills.' }
     %meta{ name: 'description', content: 'Making tech more diverse and welcoming by bringing people together and helping teach programming skills.' }
+
+    - if content_for? :meta_tags
+      = yield :meta_tags
+    - else 
+      %meta{ property: 'og:title', content: 'codebar' }
+      %meta{ property: 'og:type', content: 'website' }
+      %meta{ property: 'og:url', content: request.original_url }
+      %meta{ property: 'og:image', content: image_url('logo-square.png') }
+      %meta{ property: 'og:description', content: 'Making tech more diverse and welcoming by bringing people together and helping teach programming skills.' }
+      %meta{ property: 'og:site_name', content: 'codebar' }
+      %meta{ property: 'og:locale', content: 'en_GB' }
+      -# Only Twitter-specific tag needed
+      %meta{ name: 'twitter:card', content: image_url('logo-square.png') }
+
     %link{ rel: 'icon', sizes: '196x196', href: '/Icon-196.png'}
     %link{ rel: 'icon', sizes: '128x128', href: '/Icon-128.png'}
     %link{ rel: 'apple-touch-icon', sizes: '128x128', href: '/Icon-128.png'}
-
-    = content_for :meta_tags
-
     %link{ rel: 'image_src', href: '/assets/logo-square.png', alt: 'codebar logo' }
 
     %title= retrieve_title

app/views/layouts/application.html.haml

@@ -1,6 +1,6 @@
-- title t('workshop.virtual.title', chapter: @workshop.chapter.name, date: humanize_date(@workshop.date_and_time))
+- title t('workshops.virtual.title_with_date', chapter: @workshop.chapter.name, date: humanize_date(@workshop.date_and_time))
 
-= render partial: 'virtual_workshops/meta_tags', locals: { workshop: @workshop }
+= render partial: 'meta_tags', locals: { workshop: @workshop }
 
 .container.py-4.py-lg-5
   .row

app/views/virtual_workshops/_meta_tags.html.haml

@@ -1,6 +1,25 @@
-- content_for :meta_tags do
-  - title = "Workshop at #{workshop.host.name}"
-  - slack_description = "codebar #{workshop.chapter.name}"
+:ruby
+  title = if workshop.virtual?
+    t('workshops.virtual.title_with_date', chapter: workshop.chapter.name, date: humanize_date(workshop.date_and_time))
+  else
+    t('workshop.title', host: workshop.host.name, date: humanize_date(workshop.date_and_time))
+  end
+  url = request.original_url
+  image = workshop.host.try(:image_url).presence || image_url('codebar-social.jpg')
+  description = (workshop.virtual? ? t('workshops.virtual.lead') : t('workshops.lead'))
+
+= content_for :meta_tags do
   %meta{ property: 'og:title', content: title }
-  %meta{ property: 'og:description', content: slack_description }
-  %meta{ property: 'og:image', content: image_url('social-summary-card-image.png') }
+  %meta{ property: 'og:type', content: 'event' }
+  %meta{ property: 'og:url', content: url }
+  %meta{ property: 'og:image', content: image }
+  %meta{ property: 'og:description', content: description }
+  %meta{ property: 'og:site_name', content: 'codebar' }
+  %meta{ property: 'og:locale', content: 'en_GB' }
+
+  -# Only Twitter-specific tag needed
+  %meta{ name: 'twitter:card', content: 'summary_large_image' }
+
+  -# Event timing
+  %meta{ property: 'event:start_time', content: workshop.date_and_time }
+  %meta{ property: 'event:end_time', content: workshop.ends_at }

app/views/virtual_workshops/show.html.haml

@@ -128,13 +128,13 @@ en:
           subject: "Reminder: you're on the codebar waiting list (%{date_time})"
   workshop:
     title: Workshop at %{host} - %{date}
+    lead: 'Join us in our in-person workshops to learn programming in a supportive and collaborative environment at your own pace, or share your knowledge and coach our students.'
     calendar:
       summary: codebar @ %{host_name}
       description:  "Declining or removing this event from your calendar does not update your invitation. If you are unable to attend please follow the link found on this calendar entry and update your attendance status. Missing codebar events repeatedly will result in a suspension.\n
 
                      Invitation link: %{invitation_link}"
     virtual:
-      title: Virtual workshop for %{chapter} - %{date}
       calendar:
         location: codebar Slack (https://slack.codebar.io)
         description: "How to join\n
@@ -263,7 +263,8 @@ en:
     on_waiting_list: You are on the waiting list.
     virtual:
       title: 'Virtual workshop for %{chapter}'
-      lead: 'Participate in our workshops to learn programming in a supportive and collaborative online environment at your own pace, or share your knowledge and coach our students.'
+      title_with_date: 'Virtual workshop for %{chapter} 🌐 %{date}'
+      lead: 'Participate in our online workshops to learn programming in a supportive and collaborative environment at your own pace, or share your knowledge and coach our students.'
       intro: 'Our virtual workshops take place online. Our aim is to help you get started with programming by pairing you with a coach that will be able to remotely assist and guide you through what you want to learn. Once you sign up we will email you more details about how to join the workshop and tools that we recommend to make the process easier for you. In the meantime if you have any questions, do not hesitate to send an email to %{chapter_email}.'
   events:
     title: "Events"

app/views/workshops/_meta_tags.html.haml

@@ -38,13 +38,13 @@
       describe '#details' do
         scenario 'workshop and page title' do
           expect(page)
-            .to have_title("Virtual workshop for #{workshop.chapter.name} - #{humanize_date(workshop.date_and_time)}")
+            .to have_title("Virtual workshop for #{workshop.chapter.name} 🌐 #{humanize_date(workshop.date_and_time)}")
           expect(page).to have_content("Virtual workshop for #{workshop.chapter.name}")
         end
 
         scenario 'workshop info' do
           within '*[data-test=workshop-info]' do
-            expect(page).to have_content('Participate in our workshops')
+            expect(page).to have_content('Participate in our online workshops')
             expect(page).to have_content('Our virtual workshops take place online')
 
             within '.description' do

config/locales/en.yml

@@ -6,7 +6,7 @@
 
   it '#attending' do
     email_subject = "Attendance Confirmation: Virtual workshop for #{workshop.chapter.name} " \
-                    "- #{humanize_date(workshop.date_and_time)}"
+                    "🌐 #{humanize_date(workshop.date_and_time)}"
 
     VirtualWorkshopInvitationMailer.attending(workshop, member, invitation).deliver_now