Feature Request: meaningful link previews

[marsrobertson]

Current state:

Better preview:

This is managed by the metatags. For my personal purposes I'm doing this combination:

  <meta property="og:title" content="Impact Evaluation Foundation (IEF)"/>
  <meta property="og:image" content="../preview-grant.jpg""/>
  <meta property="og:site_name" content=""/>
  <meta property="og:description" content="Meeting place for all the things impact / externalities / cobenefits"/>

  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@ImpactEvalFDN">
  <meta name="twitter:creator" content="@marsXrobertson">
  <meta name="twitter:title" content="Impact Evaluation Foundation (IEF)">
  <meta name="twitter:description" content="Meeting place for all the things impact / externalities / cobenefits">
  <meta name="twitter:image" content="../preview-grant.jpg">

Some of them can be retrieved from the title. Some of them can be provided via additional fields.

Generation of the image can be a bit tricky. The simplest way: each project in the round has the same preview that is optimised for the round "donate for our GG21 grant in CCN"

A little bit more but still doable could be https://imagemagick.org + reuse cover photo / profile photo + merge / overlay with Gitcoin logo

Optionally, probably not needed for this use case: run a headless browser and save screenshot as preview.jpg.

---

In case you want to see it live: https://impactevaluation.foundation/grant?🌱🌱🌱

Redirect in the following way:

  <script type="text/javascript">
    window.location.replace("https://explorer.gitcoin.co/#/round/42161/388/70");
  </script>

Some other way didn't work well with Telegram, adding some stuff after ? to refresh the preview.

EDIT / UPDATE: of course need to ensure correct aspect ratio. Yesterday optimising for TG, misaligned on FB:

[linear]

PAR-219 Feature Request: meaningful link previews

[onyedikachi-david]

Can i get assigned?