Optimisation des pages vidéos pour les réseaux sociaux (OpenGraph)

[Miragide]

Sur les réseaux sociaux, quand on partage une vidéo en cours de vérification sur CaptainFact, cette image s’affiche :
https://forum.captainfact.io/uploads/default/original/1X/d8fe6adcebc1c5c9bd11e305271144a4d7aa8adc.png
Exemple : https://twitter.com/CaptainFact_io/status/1245289008785240065

L'équipe CaptainFact pense qu’il faudrait mettre en image OG plutôt la miniature de la vidéo en question, par exemple :

Ceci afin de motiver davantage le clic sur la vidéo.

[steelstyle]

Now that the thumbnail is fixed, the meta tags are correctly populated on page load.
However it seems that we might require server side rendering to fix the issue.

@Betree, I guess you previously considered SSR, what was your take on this ?

[Betree]

Netlify (where our frontend is hosted) has this great option that (in theory) takes out the pain of having to SSR:

It usually works: https://developers.facebook.com/tools/debug/?q=https%3A%2F%2Fcaptainfact.io%2Fvideos%2F435y. Here Facebook is probably skipping the image because it is too small, so we may need to use a larger preview from YouTube.

Regarding SSR, I think that it would not bring huge performance improvements in our situation and it's expensive to pre-render everything. The result may actually be slower than what we have today. I started a branch last year to try and see how hard it would be to migrate the stack to SSR (I chose NextJS at the time) and turns out it's super complex: we'd need to update all the paths where we depend on window, localStorage, update the way we fetch data. The behavior with websockets is also a bit touchy.

All that to say, I think at this point SSR is not worth the cost for this project.

[steelstyle]

Thanks for the answer, I didn't know about Netifly, great news !

I saw there was an issue about SSR hence my question. Overall I agree that using SSR mainly to handle header/ opengraph tags seems a bit overkill. Specially since as you said it seem to work quite often (CaptainFact twitter page has way more images now, even though we should wait ~ a week so card content can be crawled again).

So I propose that we:
A - close the issue eventually or
B - select hq thumbnail instead of mq thumbnail.

Note I have seen that during the migration hq thumbnails were populated, although the adding a new video inserts mq thumbnails.

[steelstyle]

@Betree any preferences ?

[Betree]

I like B. We could create a helper to get the image from the video in the frontend, something like:

const getHDImageFromVideo = video => {
  if (video.youtubeId) {
    return `https://img.youtube.com/vi/${video.youtubeId}/hqdefault.jpg`
  } else {
    return video.thumbnail;
  }
}