Add metadata to project page so a thumbnail will appear when sharing it

[noamraph]

I shared my daughter's creation on WhatsApp, and was a bit disappointed to see that there was no thumbnail for her game. I think adding a thumbnail will make sharing creations significantly more attractive. If there is interest I can try to write a pull request. Since I see that the thumbnail images are already available (https://uploads.scratch.mit.edu/projects/thumbnails/395338573.png), I think that adding this metadata to the page should be quite easy.

Stack overflow page on how to create those thumbails: https://stackoverflow.com/a/43154489/343036

[apple502j]

The metadata part is rendered client-side; it may be hard to do so.

[noamraph]

It seems that there actually is some support for this, in src/template.ejs:

        <% if (!htmlWebpackPlugin.options.dynamicMetaTags) { %>
            <title>Scratch - <%= htmlWebpackPlugin.options.title %></title>
            <!-- Search & Open Graph-->
            <meta name="description" content="<%= htmlWebpackPlugin.options.description %>" />
            <meta name="google-site-verification" content="m_3TAXDreGTFyoYnEmU9mcKB4Xtw5mw6yRkuJtXRKxM" />
            <meta property="og:url" content="https://scratch.mit.edu/" />
            <meta property="og:type" content="website" />
            <meta property="og:title" content="Scratch - <%= htmlWebpackPlugin.options.title %>" />
            <meta property="og:description" content="<%= htmlWebpackPlugin.options.description %>" />
            <meta property="og:image" content="<%- htmlWebpackPlugin.options.og_image %>" />
            <meta property="og:image:type" content="<%- htmlWebpackPlugin.options.og_image_type %>" />
            <meta property="og:image:width" content="<%- htmlWebpackPlugin.options.og_image_width %>" />
            <meta property="og:image:height" content="<%- htmlWebpackPlugin.options.og_image_height %>" />
        <% } %>

[apple502j]

Project page is the special case - it uses dynamic meta tag and that one is not used.

[benjiwheeler]

I think @apple502j is right -- we'd be interested in making this functionality work, but maybe it would require deep changes to our react code?

[apple502j]

@benjiwheeler Yeah. Current code is designed to be fully client-side rendered, and this requires server-side rendering as most of those clients just parse raw HTML (and not selenium, etc)

[benjiwheeler]

ok -- I'm not marking this help wanted, because the solution is complex. But if anyone has suggestions, we're open!