Commit 912c351f authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

Added social meta tags for opegraph and twitter

parent 41acccad
Pipeline #175336 passed with stages
in 3 minutes and 42 seconds
......@@ -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} />
......
......@@ -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>
);
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment