MieuxVoter / majority-judgment-web-app

Other
20 stars 10 forks source link

Include OpenGraph tags in the result page #54

Closed roipoussiere closed 3 years ago

roipoussiere commented 4 years ago

The result page could include OpenGraph tags, in particular property="og:image" set to the image url displaying the merit profile, generated by the /merit-profile endpoint (https://github.com/MieuxVoter/mv-api-spec/issues/10).

This will allow Facebook, LinkedIn, Slack, Twitter, WhatsApp, Telegram, Discourse, among many others services that support OpenGraph, to directly embed the merit profile image and its result, just by pasting the election result url in any post.

A Share this button could encourage users to do this by:

I may work on a PR for this once my merit-profile module will be finished.

guhur commented 4 years ago

So right now, we are kind of limited for open graph to static elements due to our architecture.

The reason for this is that Facebook downloads only the first MB of a web page. Thus React is not entirely loaded and it can't be used to inject the poll ID/ title in the meta tags.

We considered several solutions:

If we just want to update the image, we might try to inject just a JS snippet in the head tag. This script copies the poll ID given in the URL to the og meta. Dirty but simple.

⁣ ​

On May 27, 2020, 9:33 PM, at 9:33 PM, "Nathanaël" notifications@github.com wrote:

The result page could include OpenGraph tags, in particular property="og:image" set to the image url displaying the merit profile, generated by the /merit-profile endpoint (https://github.com/MieuxVoter/mv-api-spec/issues/10).

This will allow Facebook, LinkedIn, Slack, Twitter, WhatsApp, Telegram, Discourse, among many others services that support OpenGraph, to directly embed the merit profile image and its result, just by pasting the election result url in any post.

A Share this button could encourage users to do this by:

  • including links to some mainstream social media with a predefined message (that include the link of the result page)
  • including code samples in html and markdown to let them share in other places (ie. ![](https://api.mieuxvoter.fr/merit-profile?<...>.svg) for markdown).

I may work on a PR for this once my merit-profile module will be finished.

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/MieuxVoter/mvfront-react/issues/54

guhur commented 3 years ago

This is fixed with the integration of Next Js since tag v1.1