Add opengraph/SEO metadata to Release Note pages

[oleg-nenashev]

Issue type

Styling or Accessibility

Problem description

For release candidates and final releases, it would be nice to have embedded metadata so that, when sharing the links, people could see a preview and some description.

For that, the following meta tags should be added:

   <meta property="og:image" content="https://gradle.org/images/releases/gradle-{VERSION}.png">
   <meta property="og:image:type" content="image/png">
   <meta property="og:site_name" content="Gradle Release Notes">
   <meta property="og:title" content="Gradle {VERSION} - Release Notes">
   <meta property="og:type" content="article">
   <meta property="og:description" content="{Release Summary}">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@gradle">
    <meta name="twitter:creator" content="@gradle">
    <meta name="twitter:title" content="...">
    <meta name="twitter:url" content="...">
    <meta name="twitter:description" content="...">
    <meta name="twitter:image" content="...">
 

Context (optional)

No response

Page with the problem

https://docs.gradle.org/current/release-notes.html

[oleg-nenashev]

@lkasso I am reopening it, because not all metadata was integrated. In particular, #31665 didn't include Twitter metadata, and the descriptions

Also, we need to update templates to ensure that a proper image is taken and, ideally, tested.
I patched the image in https://github.com/gradle/dotorg-site/pull/1024 (private repo), but it is crucial to have the links with ".png" extension in the future. We serve the site from GitHub Pages, and for its CDN and MIME type the extension is the only source of the info. It is my mistake in the original issue description, sorry

[ljacomet]

Fixed with #31817