Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

When building the site, some og:image are inserted as base64 data, instead of as a URL.

This prevents the image from being visible when sharing the blog post on Twitter, Slack, Signal, etc.

Example:

• the page at zwyx.dev/blog/typesafe-translations contains its image as base64 data:

<meta data-rh="true" property="og:image" content="data:image/jpeg;base64,...">

which makes the image not visible in social previews (testable with opengraph.xyz)

• the page at zwyx.dev/blog/proper-dark-theme contains its image as URL:

<meta data-rh="true" property="og:image" content="https://zwyx.dev/assets/images/...">

which makes the image showing up correctly (opengraph.xyz).

Code available at github.com/zwyx/zwyx.dev.

Reproducible demo

https://github.com/Zwyx/zwyx.dev

Steps to reproduce

Please see description.

Expected behavior

Please see description.

Actual behavior

Please see description.

Your environment

• Public source code: https://github.com/Zwyx/zwyx.dev
• Public site URL: https://zwyx.dev
• Docusaurus version used: 2.4.1
• Environment name and version (e.g. Chrome 89, Node.js 16.4): Chrome 117, Node 18
• Operating system and version (e.g. Ubuntu 20.04.2 LTS): Ubuntu 22.04 LTS + GitHub Actions

Self-service

• I'd be willing to fix this bug myself.