search

nulib / digital-collections

ReactJS application for Northwestern Library's Digital Collections presentation layer
https://dc.library.northwestern.edu/
7 stars 5 forks source link

create sharing previews for frontend #376

Closed davidschober closed 2 years ago

davidschober commented 5 years ago

Description

The frontend should preview an image (in the future video/audio) when shared via a supported platform (pinterest, twitter, facebook, etc)

Done looks like

Notes

For Open Graph (facebook, linkedin):

http://ogp.me/ example for: http://digitalcollections.library.northwestern.edu/items/b943151f-2d6c-4ffa-ad32-4ff60dca427c


<meta property=”og:description” content=”GI soldier with helmet and bayonet stands guard; in background are farmers, scientist, factory workers and pilot in uniform. ; [illustrated by] Cecil Beall ; [poem by] Jack Childs ; presented by the United States Army Recruiting Service.” />

<meta property="og:type" content="image.jpg" />

<meta property=”og:url” content=”http://digitalcollections.library.northwestern.edu/items/b943151f-2d6c-4ffa-ad32-4ff60dca427c" />

<meta property=”og:image” content=”https://iiif.stack.rdc.library.northwestern.edu/iiif/2/c2%2F6f%2Fd9%2F19%2F-1%2F1b%2F5-%2F4a%2F20%2F-9%2Fbe%2F4-%2F71%2F6d%2Fea%2Ff5%2F3c%2Ff5/full/!1200,630/0/default.jpg">

For Twitter Cards:


<meta name=”twitter:card” content=”summary_large_image”>

<meta name=”twitter:title” content=”Keep 'em flying!” />

<meta name=”twitter:description” content=”GI soldier with helmet and bayonet stands guard; in background are farmers, scientist, factory workers and pilot in uniform. ; [illustrated by] Cecil Beall ; [poem by] Jack Childs ; presented by the United States Army Recruiting Service.” />

<meta name=”twitter:url” content=”http://digitalcollections.library.northwestern.edu/items/b943151f-2d6c-4ffa-ad32-4ff60dca427c" />

<meta name=”twitter:image” content=”https://iiif.stack.rdc.library.northwestern.edu/iiif/2/c2%2F6f%2Fd9%2F19%2F-1%2F1b%2F5-%2F4a%2F20%2F-9%2Fbe%2F4-%2F71%2F6d%2Fea%2Ff5%2F3c%2Ff5/full/!1200,675/0/default.jpg">```

1200 x 630 pixels
child of #276
kdid commented 5 years ago

I picked up this issue for a change of pace, thinking I could knock it off quickly since @adamjarling, you mentioned just adding to react-helmet.

After some looking into this it seems to me like that won't work:

(If you use the Facebook debugger to look at what it's seeing from digital collections - it's only seeing what's on the index.html page and nothing added by react-helmet)

https://www.reddit.com/r/reactjs/comments/7h06dk/sharing_to_facebook_with_a_react_sitefacebook_web/

https://stackoverflow.com/questions/50193960/react-helmet-facebook-open-graph

From what I read on Google, you have two options for dynamic meta tags on client side rendered apps:

1) render them server side 2) Pre-render your site (Gatsby was one I saw mentioned, or react-static)

Or, there also seemed to be this approach of intercepting the request, figuring out if it's from a social site and building a response with the correct metadata. This article is about one for a site on s3 done using Lambda@Edge so it seemed most relevant to our situation: https://medium.com/@MilkMan/rich-social-sharing-for-your-serverless-react-app-with-lambda-edge-15463c3e88ad

@adamjarling - am I just totally missing the easy way to do this on a fully client-side app? :)

adamjarling commented 5 years ago

@kdid Hmmm, yea I've never done this, so was just guessing on a solution via react-helmet. There's got to be other websites which have encountered this situation, right? I've played around with Gatsby, but that's a pretty heavy-handed approach, at least for this individual issue. I'll look into it too when I get a little time.

kdid commented 5 years ago

Well, no rush, I know this is not what you are currently working on. I'll dig a little more. Just thought you might know something I was missing offhand.

mbklein commented 5 years ago

I think the solution to this would be to create a lambda that generates the social preview for a given URL, and then use CloudFront to detect whether the request is a preview request and redirect it to the lambda instead of the SPA.

As far as I can tell, the only way to detect link expander/preview requests is to match the User-Agent header against a RegEx like this one: /baiduspider|twitterbot|facebookexternalhit|rogerbot|linkedinbot|embedly|quora link preview|showyoubot|outbrain|pinterest|slackbot|vkShare|W3C_Validator/i

kdid commented 5 years ago

@mbklein - is that a different approach than the one in the link I posted above?

adamjarling commented 5 years ago

@davidschober @kdid @mbklein Looks like MBK and Karen's article point to this being the most lightweight solution to solve populating the open graph tags:

https://medium.com/@MilkMan/rich-social-sharing-for-your-serverless-react-app-with-lambda-edge-15463c3e88ad

Not sure whose domain this work would fall in?

davidschober commented 5 years ago

@kdid can we also try to catch for the bingbots. https://www.bing.com/webmaster/help/which-crawlers-does-bing-use-8c184ec0

davidschober commented 4 years ago

Still valid. I opened a separate issue on prerendering

davidschober commented 2 years ago

closing as very, very stale