Merge pull request #2380 from gnclmorais/improve-open-graph-meta

Improves sharing previews

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

@@ -1,7 +1,7 @@
 !!!
 %html
   %head
-    %link{ rel: 'image_src', href: '/assets/logo-square.png', :alt => "codebar logo" }
+    = render partial: 'shared/meta_tags'
     = favicon_link_tag 'favicon.ico'
     %title codebar.io - Page not found
     :css

app/views/errors/error.html.haml

@@ -1,7 +1,7 @@
 !!!
 %html
   %head
-    %link{ rel: 'image_src', href: '/assets/logo-square.png', :alt => "codebar logo" }
+    = render partial: 'shared/meta_tags'
     = favicon_link_tag 'favicon.ico'
     %title codebar.io - Page not found
     :css

app/views/errors/not_found.html.haml

@@ -5,23 +5,18 @@
     %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
+      = render partial: 'shared/meta_tags'
+
     %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
     = favicon_link_tag 'favicon.ico'
     = stylesheet_link_tag('application', media: 'all', data: { turbo_track: 'reload' })

app/views/layouts/application.html.haml

@@ -0,0 +1,9 @@
+%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: 'summary_large_image' }

app/views/shared/_meta_tags.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: 'workshops/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"