[ARROW-15125] [Website] Social media link preview image looks bad in dark mode

• Type: Improvement
• Status: Resolved
• Priority: Major
• Resolution: Fixed
• Component/s: Website
• External issue URL: https://github.com/apache/arrow/issues/30633
• Assignee: Unassigned
• Reporter: Ian Cook
• Created: 16/Dec/21 02:31
• Updated: 11/Jan/23 08:44
• Resolved: 05/Jul/22 19:27

Description

The social media link preview image (a.k.a. social share image) for the Arrow site looks really really bad when displayed on Twitter with dark mode switched on:

I don't know whether this affects the preview image on other social media sites.

This is happening because the preview image is a transparent PNG image with black content on a transparent background, and the background becomes black in dark mode, leaving barely visible black on black.

I believe the preview image is controlled by these <meta> elements (depending on which social media site the preview is displayed on):

<meta property="og:image" content="https://arrow.apache.org/img/arrow.png">
<meta property="twitter:image" content="https://arrow.apache.org/img/arrow.png">

I think the simplest way to fix this would be to point these <meta> elements to a PNG image with an opaque white background.

Perhaps it's also possible to specify separate social share images for light and dark mode, but I'm not sure about that.

Issue Links

• is related to: ARROW-15684 [Website] Visual identity guidelines for Apache Arrow logo