Improved support for Open Graph tags

[daiyi]

Trustroots should have open graph support, so user profiles, tribe pages, and other pages show up nicely on Facebook, Twitter, and other social media with proper preview image, title, summary, etc.

It's partially there, but some things are still missing, like images on Facebook, and I think Twitter tags aren't supported at all. (Will compose a better list later when I reunite with laptop!)

http://ogp.me/

[simison]

Yep, totally.

Current setup for OG tags is a bit of a hack, some express middleware handling these would be better, but quick and hacky is better than nothing. :-)

Problems with current implementation:

• logic is at the template => messy and just meh.
• Cumbersome to test
• Hard to expand

Relevant parts at code:

• modules/core/server/controllers/core.server.controller.js
• modules/core/server/views/layout.server.view.html
• Place for the middleware would be at core.server.routes.js

Interesting npm packages:

• https://www.npmjs.com/package/express-metatag
• https://www.npmjs.com/package/ogp-meta

Also #356 "Add OG tags to tribe index page"

Worth mentioning that user pages shouldn't leak data to og tags.

[daiyi]

Thanks for all the info! I can help with this of you don't get to it (:

(Ah, and that task "Add OG tags to tribe index page" was what inspired me to make this issue (I was sharing the new tribes on Twitter and realised they didn't have preview cards) but I didn't find through github search because I looked up open graph instead of og)

[simison]

Tribe pages do have og tags, tho:

<meta property="og:title" content="Join Climbers on Trustroots">
<meta property="og:description" content="Join to meet, host and get hosted by Trustroots Tribe Climbers. Trustroots is a travellers' community for sharing, hosting and getting people together.">
<meta property="og:url" content="https://www.trustroots.org/tribes/climbers">
<meta property="og:image" content="https://ucarecdn.com/bfaf468a-2c48-4798-b1bb-bffd0c6b716b/-/progressive/yes/-/scale_crop/1200x630/center/-/quality/lightest/-/format/jpeg/-/overlay/b72e2604-e926-4e17-acbd-e37c0e1f5c73/50%25x50%25/center/climbers.jpg">
<meta property="og:site_name" content="Trustroots: travellers hospitality community">
<meta property="og:type" content="website">
<meta property="og:locale" content="en_GB">

<meta name="twitter:site" content="trustroots">
<meta name="twitter:title" content="Join Climbers on Trustroots">
<meta name="twitter:description" content="Join to meet, host and get hosted by Trustroots Tribe Climbers. Trustroots is a travellers' community for sharing, hosting and getting people together.">
<meta name="twitter:url" content="https://www.trustroots.org/tribes/climbers">
<meta name="twitter:image" content="https://ucarecdn.com/bfaf468a-2c48-4798-b1bb-bffd0c6b716b/-/progressive/yes/-/scale_crop/1200x630/center/-/quality/lightest/-/format/jpeg/-/overlay/b72e2604-e926-4e17-acbd-e37c0e1f5c73/50%25x50%25/center/climbers.jpg">

On FB:

On Twitter (via):

---

356 is referring to page trustroots.org/tribes

Thanks for all the info! I can help with this of you don't get to it (:

👍 👍 👍

[simison]

I'll add <meta name="twitter:card" content="summary_large_image"> to make Twitter images bigger. https://dev.twitter.com/cards/types/summary-large-image

[simison]

Aight:

[daiyi]

Huh, the preview card wasn't showing up for me, but then I used the dev-card validator (https://cards-dev.twitter.com/validator) and it started working after, so maybe it was a caching problem for me!

[Jagjeet]

@simison - Do you think the middleware approach still best for this? Or should be looking at using Helmet with transitioning to React?

https://github.com/nfl/react-helmet

Also a couple useful links for previewing metadata on Twitter and Facebook:

• https://developers.facebook.com/tools/debug/sharing/
• https://cards-dev.twitter.com/validator

I've done some work with open graph tags in the past so was considering jumping into this to get more familiar with the front end code. Might also need to touch base with regards to testing any changes related to this using the dev server.

[github-actions[bot]]

This issue is marked as unloved because it has not had any activity for 180 days.

It doesn't mean it's not important, so please remove the unloved label if you like it, or add a comment saying what it means to you :) If this was a bug, maybe you can test to see if this is still an issue?

However, if you just leave it like this, I'll close it in 14 days to help keep your issues tidy!

Thanks!