Merge branch 'feature/social-meta-tags' into 'master'

Added social meta tags for opegraph and twitter

See merge request !57

src/components/Metadata.jsx

@@ -41,23 +41,17 @@ export function Metadata({ metadata = {}, page = {} }) {
       <meta name="keywords" content={meta.keywords} />
       <meta name="description" content={meta.description} />
       {/* <!-- Open Graph / Facebook --> */}
-      <meta property="og:type" content="website" />
-      <meta
-        property="og:url"
-        content={`https://embl.org/jobs${page.url || ""}`}
-      />
-      <meta property="og:title" content={site_information.title} />
-      <meta property="og:description" content={meta.description} />
-      {meta.image && <meta property="og:image" content={meta.image} />}
+      <meta name="og:type" content="website" />
+      <meta name="og:url" content={`https://embl.org/jobs${page.url || ""}`} />
+      <meta name="og:title" content={site_information.title} />
+      <meta name="og:description" content={meta.description} />
+      {meta.image && <meta name="og:image" content={meta.image} />}
       {/* <!-- Twitter --> */}
-      <meta property="twitter:card" content="summary_large_image" />
-      <meta
-        property="og:url"
-        content={`https://embl.org/jobs${page.url || ""}`}
-      />
-      <meta property="twitter:title" content={site_information.title} />
-      <meta property="twitter:description" content={meta.description} />
-      {meta.image && <meta property="twitter:image" content={meta.image} />}
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="og:url" content={`https://embl.org/jobs${page.url || ""}`} />
+      <meta name="twitter:title" content={site_information.title} />
+      <meta name="twitter:description" content={meta.description} />
+      {meta.image && <meta name="twitter:image" content={meta.image} />}
       {/* <!-- Content descriptors --> */}
       {/* the people, groups and teams involved */}
       <meta name="embl:who" content={embl_content_meta_properties.who} />

src/components/job-details/JobDetails.jsx

@@ -4,6 +4,7 @@ import { VFShortcutsList } from "component-templates/VFShortcutsList";
 import { formatISODate, parseISODateFromTimeHtml } from "helpers/date-helpers";
 import { useFetch } from "helpers/useFetch";
 import { useEffect, useState } from "react";
+import { Helmet } from "react-helmet";
 import { useParams } from "react-router";
 import { Link } from "react-router-dom";
 import { extendJobsObjects } from "services/useFetchJobsList";
@@ -121,6 +122,8 @@ export function JobDetails({ location }) {
   return (
     <div>
       {/* {JSON.stringify(currentJob)} */}
+
+      {creteSocialTags(currentJob)}
       <EmblHeader />
       <EmblBreadcrumbs />
 
@@ -479,3 +482,42 @@ function creteHeroSection(job) {
     />
   );
 }
+
+/* Create social tags for social sharing on Twitter, FB, LinkedIn */
+function creteSocialTags(job) {
+  if (!job) {
+    return null;
+  }
+
+  const title = job.title + " - EMBL Job";
+  const description = job.$stripped_field_jobs_description || "Jobs at EMBL";
+  const url = window.location.href;
+  let imageUrl;
+
+  const heroDataForThisLocation = HeroData.hero_section.find(
+    (datum) => datum.location === job.$stripped_field_jobs_duty_station
+  );
+  if (heroDataForThisLocation) {
+    imageUrl = heroDataForThisLocation.image_url;
+  }
+
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta name="description" content={description} />
+
+      {/* OpenGraph tags */}
+      <meta name="og:url" content={url} />
+      <meta name="og:title" content={title} />
+      <meta name="og:description" content={description} />
+      {imageUrl && <meta name="og:image" content={imageUrl} />}
+      <meta name="og:type" content="website" />
+
+      {/* Twitter Card tags */}
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:description" content={description} />
+      {imageUrl && <meta name="twitter:image" content={imageUrl} />}
+      <meta name="twitter:card" content="summary" />
+    </Helmet>
+  );
+}