Linkedin display of Alkemio links

alkem-io / client-web

Default web frontend, enabling browsing the Alkemio platform - so the hosted Challenges and communities collaborating around those Challenges.

https://alkem.io

European Union Public License 1.2

15 stars 6 forks source link

Linkedin display of Alkemio links #5583

Closed techsmyth closed 2 weeks ago

techsmyth commented 5 months ago

Description

As a user sharing Alkemio links on LinkedIn I want that Alkemio shows up well As a communications lead I want Alkemio to display well on LinkedIn

Acceptance criteria

Needs to be a server side middleware application Testing: "show source" when requesting a link

[ ] Client to add image as per feedback from https://www.linkedin.com/post-inspector/inspect/https:%2F%2Falkem.io%2Fhome
[ ] Start with 1 image for all links
[ ] Add other og-tags as well (title, description)
Later: tags/image dependent on the URL (journey specific)

Additional Context

techsmyth commented 5 months ago

@me-andre this can be the same of all links, so is this not the case of just adding a single static line into the "index.html" file?

bobbykolev commented 3 weeks ago

@techsmyth, yes we can set og static tags so every page from the platform has a defult og:img. If we want dynamic metadata (idealy) we should render serverside (huge effort).

Additionally, we can add Helmet so at least the titles of our browser tabs are relevant.

And you can use this tool: https://www.opengraph.xyz/url/https%3A%2F%2Falkem.io%2Fhome for preview of the sharing display on multiple platforms (not only LiN).

bobbykolev commented 3 weeks ago

@jeroentskui to provide an asset for default og:image shortly.

bobbykolev commented 2 weeks ago

og:image;
og:title;
og:description were added (synced with the ones from the website)
title;
description were updated (synced with the ones from the website)

bobbykolev commented 2 weeks ago

As this change affects how the links to the platform are displayed in the socials, @SimoneZaza please review and confirm the copy:


<title>Alkemio - Safe Spaces for Collaboration</title>
<meta name="description" content="Join Alkemio: the platform designed to help you achieve your goals by making progress central.">

<!-- Open Graph Meta Tags used by Facebook, LinkedIn and other social apps -->
<meta property="og:title" content="Alkemio - Safe Spaces for Collaboration">
<meta property="og:description" content="Join Alkemio: the platform designed to help you achieve your goals by making progress central.">

SimoneZaza commented 2 weeks ago

Thanks @bobbykolev, this is indeed correct