search

Sage-Bionetworks / sage-monorepo

Where OpenChallenges, Schematic, and other Sage open source apps are built
https://sage-bionetworks.github.io/sage-monorepo/
Apache License 2.0
21 stars 12 forks source link

[Feature] Enable to mask the image extension for better SEO #2146

Closed tschaffter closed 11 months ago

tschaffter commented 11 months ago

What product(s) is this feature for?

OpenChallenges

Description

LinkedIn needs the extension of the image to be bitmap - or at least not .svg, otherwise the image won't be used. Using an image with .png works. It does not matter what the file format is, LinkedIn looks only at the extension. This is annoying because we have organization images that have an .svg extension.

See LinkedIn - Make your website shareable on LinkedIn

The goal of this task is to enable the developer to generate an image URL that ends with one of the extension supported by LinkedIn or preferably, with an extension that all social media site support (e.g. .png).

Anything else?

No response

Code of Conduct

tschaffter commented 11 months ago

Alternative

When an image is available in SVG format, we could also have a bitmap version of it, or more simply, always have a bitmap image with a predefined extension for all the images (e.g. png). However, this approach would require to deal with multiple files for a given image, which would increase the complexity of the setup.

tschaffter commented 11 months ago

Update

It looks like LinkedIn is behaving differently specifically in the case where the image URL ends with svg. Adding a dummy query parameter to the URL is enough to trick LinkedIn into accepting the image. Also, it seems that the query parameter is simply ignored by Thumbor.

Important Thumbor is configured to always return a PNG image independently of format and file extension of the image in the S3 bucket. We are loosing the benefit of the light weight of the SVG files but we gain in standardization as all the images returned by Thumbor have the same MIME type.

image

Cc: @rrchai @vpchung See note above about the image format returned by Thumbor.

tschaffter commented 11 months ago

Solution

In #2127, I'm tricking LinkedIn by adding the dummy suffix ?seo=true if the image URL ends with "svg". This enables LinkedIn to use the image to build its rich card.