diff --git a/frontend/docusaurus.config.cjs b/frontend/docusaurus.config.cjs
index 2d20756a6e370..ef346ff37bb14 100644
--- a/frontend/docusaurus.config.cjs
+++ b/frontend/docusaurus.config.cjs
@@ -65,6 +65,7 @@ const config = {
   themeConfig:
     /** @type {import('docusaurus-preset-openapi').ThemeConfig} */
     ({
+      image: 'img/opengraph.png',
       languageTabs: [],
       navbar: {
         title: 'Shields.io',
diff --git a/frontend/static/img/opengraph-badges/build.svg b/frontend/static/img/opengraph-badges/build.svg
new file mode 100644
index 0000000000000..9e88e7fec8bb8
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/build.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="88" height="20" role="img" aria-label="build: passing"><title>build: passing</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="88" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="37" height="20" fill="#555"/><rect x="37" width="51" height="20" fill="#4b0"/><rect width="88" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="195" y="150" fill-opacity=".8" filter="url(#blur)" textLength="270">build</text><text x="195" y="150" fill-opacity=".3" textLength="270">build</text></g><text x="195" y="140" textLength="270">build</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="615" y="150" fill-opacity=".8" filter="url(#blur)" textLength="410">passing</text><text x="615" y="150" fill-opacity=".3" textLength="410">passing</text></g><text x="615" y="140" textLength="410">passing</text></g></g></svg>
diff --git a/frontend/static/img/opengraph-badges/coverage.svg b/frontend/static/img/opengraph-badges/coverage.svg
new file mode 100644
index 0000000000000..b1511dc3bf95c
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/coverage.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="96" height="20" role="img" aria-label="coverage: 95%"><title>coverage: 95%</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="96" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="61" height="20" fill="#555"/><rect x="61" width="35" height="20" fill="#67ac09"/><rect width="96" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="315" y="150" fill-opacity=".8" filter="url(#blur)" textLength="510">coverage</text><text x="315" y="150" fill-opacity=".3" textLength="510">coverage</text></g><text x="315" y="140" textLength="510">coverage</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="775" y="150" fill-opacity=".8" filter="url(#blur)" textLength="250">95%</text><text x="775" y="150" fill-opacity=".3" textLength="250">95%</text></g><text x="775" y="140" textLength="250">95%</text></g></g></svg>
diff --git a/frontend/static/img/opengraph-badges/downloads.svg b/frontend/static/img/opengraph-badges/downloads.svg
new file mode 100644
index 0000000000000..f559145245289
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/downloads.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="140" height="20" role="img" aria-label="downloads: 13k/month"><title>downloads: 13k/month</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="140" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="69" height="20" fill="#555"/><rect x="69" width="71" height="20" fill="#4b0"/><rect width="140" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="355" y="150" fill-opacity=".8" filter="url(#blur)" textLength="590">downloads</text><text x="355" y="150" fill-opacity=".3" textLength="590">downloads</text></g><text x="355" y="140" textLength="590">downloads</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="1035" y="150" fill-opacity=".8" filter="url(#blur)" textLength="610">13k/month</text><text x="1035" y="150" fill-opacity=".3" textLength="610">13k/month</text></g><text x="1035" y="140" textLength="610">13k/month</text></g></g></svg>
diff --git a/frontend/static/img/opengraph-badges/license.svg b/frontend/static/img/opengraph-badges/license.svg
new file mode 100644
index 0000000000000..4fe04f31520a0
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/license.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="78" height="20" role="img" aria-label="license: MIT"><title>license: MIT</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="78" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="47" height="20" fill="#555"/><rect x="47" width="31" height="20" fill="#67ac09"/><rect width="78" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="245" y="150" fill-opacity=".8" filter="url(#blur)" textLength="370">license</text><text x="245" y="150" fill-opacity=".3" textLength="370">license</text></g><text x="245" y="140" textLength="370">license</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="615" y="150" fill-opacity=".8" filter="url(#blur)" textLength="210">MIT</text><text x="615" y="150" fill-opacity=".3" textLength="210">MIT</text></g><text x="615" y="140" textLength="210">MIT</text></g></g></svg>
diff --git a/frontend/static/img/opengraph-badges/npm.svg b/frontend/static/img/opengraph-badges/npm.svg
new file mode 100644
index 0000000000000..2640e990c29d3
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/npm.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="97" height="20" role="img" aria-label="npm: v6.0.0"><title>npm: v6.0.0</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="97" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="52" height="20" fill="#555"/><rect x="52" width="45" height="20" fill="#007ec6"/><rect width="97" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="translate(5 3) scale(.5833333333)"><path d="M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z"/></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="355" y="150" fill-opacity=".8" filter="url(#blur)" textLength="250">npm</text><text x="355" y="150" fill-opacity=".3" textLength="250">npm</text></g><text x="355" y="140" textLength="250">npm</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="735" y="150" fill-opacity=".8" filter="url(#blur)" textLength="350">v6.0.0</text><text x="735" y="150" fill-opacity=".3" textLength="350">v6.0.0</text></g><text x="735" y="140" textLength="350">v6.0.0</text></g></g></svg>
diff --git a/frontend/static/img/opengraph-badges/rating.svg b/frontend/static/img/opengraph-badges/rating.svg
new file mode 100644
index 0000000000000..de5ea9e2d5657
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/rating.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="108" height="20" role="img" aria-label="rating: ★★★★☆"><title>rating: ★★★★☆</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="108" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="43" height="20" fill="#555"/><rect x="43" width="65" height="20" fill="#4b0"/><rect width="108" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="225" y="150" fill-opacity=".8" filter="url(#blur)" textLength="330">rating</text><text x="225" y="150" fill-opacity=".3" textLength="330">rating</text></g><text x="225" y="140" textLength="330">rating</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="745" y="150" fill-opacity=".8" filter="url(#blur)" textLength="550">★★★★☆</text><text x="745" y="150" fill-opacity=".3" textLength="550">★★★★☆</text></g><text x="745" y="140" textLength="550">★★★★☆</text></g></g></svg>
diff --git a/frontend/static/img/opengraph-badges/version.svg b/frontend/static/img/opengraph-badges/version.svg
new file mode 100644
index 0000000000000..4e1916f8f435b
--- /dev/null
+++ b/frontend/static/img/opengraph-badges/version.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="90" height="20" role="img" aria-label="version: 1.2.3"><title>version: 1.2.3</title><filter id="blur"><feGaussianBlur stdDeviation="16"/></filter><linearGradient id="s" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="r"><rect width="90" height="20" rx="3"/></clipPath><g clip-path="url(#r)"><rect width="51" height="20" fill="#555"/><rect x="51" width="39" height="20" fill="#007ec6"/><rect width="90" height="20" fill="url(#s)"/></g><g fill="#fff" text-anchor="middle" font-family="Verdana,Geneva,DejaVu Sans,sans-serif" text-rendering="geometricPrecision" font-size="110"><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="265" y="150" fill-opacity=".8" filter="url(#blur)" textLength="410">version</text><text x="265" y="150" fill-opacity=".3" textLength="410">version</text></g><text x="265" y="140" textLength="410">version</text></g><g transform="scale(.1)"><g aria-hidden="true" fill="#010101"><text x="695" y="150" fill-opacity=".8" filter="url(#blur)" textLength="290">1.2.3</text><text x="695" y="150" fill-opacity=".3" textLength="290">1.2.3</text></g><text x="695" y="140" textLength="290">1.2.3</text></g></g></svg>
diff --git a/frontend/static/img/opengraph.png b/frontend/static/img/opengraph.png
new file mode 100644
index 0000000000000..8d46f2fe5e969
Binary files /dev/null and b/frontend/static/img/opengraph.png differ
diff --git a/frontend/static/img/opengraph.svg b/frontend/static/img/opengraph.svg
new file mode 100644
index 0000000000000..1669300648649
--- /dev/null
+++ b/frontend/static/img/opengraph.svg
@@ -0,0 +1,80 @@
+<svg width="1200" height="630" viewBox="0 0 1200 630" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <title>Shields.io OpenGraph image</title>
+  <desc>Social preview image for Shields.io featuring the logo and sample badges.</desc>
+  <defs>
+    <pattern id="dot-grid" width="28" height="28" patternUnits="userSpaceOnUse">
+      <circle cx="2" cy="2" r="1.5" fill="#d5dde6" />
+    </pattern>
+  </defs>
+
+  <rect width="1200" height="630" fill="#f7f9fb" />
+  <rect width="1200" height="630" fill="url(#dot-grid)" opacity="0.85" />
+
+  <path d="M702 -24H1200V630H514L702 -24Z" fill="#eef3f6" />
+  <path d="M846 0H1200V630H672L846 0Z" fill="#e8eef2" />
+  <path d="M946 0H1200V630H812L946 0Z" fill="#dde7ec" />
+
+  <g transform="translate(72 70)">
+    <rect x="0" y="0" width="64" height="64" rx="16" fill="#555555" />
+    <path d="M32 0H48C56.837 0 64 7.163 64 16V48C64 56.837 56.837 64 48 64H32V0Z" fill="#97ca00" />
+    <text font-family="Arial" x="88" y="44" fill="#1f2933" font-size="38" font-weight="800">Shields.io</text>
+  </g>
+
+  <g font-family="Arial" transform="translate(72 224)">
+    <text x="0" y="0" fill="#17202a" font-size="64" font-weight="800">Concise, consistent,</text>
+    <text x="0" y="76" fill="#17202a" font-size="64" font-weight="800">and legible badges.</text>
+    <text x="0" y="150" fill="#485766" font-size="28" font-weight="500">Build status, versions, downloads,</text>
+    <text x="0" y="188" fill="#485766" font-size="28" font-weight="500">coverage, funding, and more.</text>
+  </g>
+
+  <g transform="translate(72 506)">
+    <rect x="0" y="0" width="236" height="48" rx="12" fill="#ffffff" stroke="#d8e1e8" />
+    <rect x="14" y="14" width="20" height="20" rx="5" fill="#555555" />
+    <path d="M24 14H29C31.761 14 34 16.239 34 19V29C34 31.761 31.761 34 29 34H24V14Z" fill="#97ca00" />
+    <text font-family="Arial" x="48" y="31" fill="#2d3742" font-size="20" font-weight="700">img.shields.io</text>
+  </g>
+
+  <g transform="translate(716 112) rotate(-7 235 197)">
+    <g transform="translate(38 0)">
+      <rect x="0" y="8" width="193.6" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/badge/build-passing-brightgreen -->
+      <image href="opengraph-badges/build.svg" width="193.6" height="44" />
+    </g>
+
+    <g transform="translate(142 72)">
+      <rect x="0" y="8" width="198" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/badge/version-1.2.3-blue -->
+      <image href="opengraph-badges/version.svg" width="198" height="44" />
+    </g>
+
+    <g transform="translate(2 144)">
+      <rect x="0" y="8" width="211.2" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/badge/coverage-95%25-green -->
+      <image href="opengraph-badges/coverage.svg" width="211.2" height="44" />
+    </g>
+
+    <g transform="translate(100 216)">
+      <rect x="0" y="8" width="308" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/badge/downloads-13k%2Fmonth-brightgreen -->
+      <image href="opengraph-badges/downloads.svg" width="308" height="44" />
+    </g>
+
+    <g transform="translate(28 288)">
+      <rect x="0" y="8" width="171.6" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/badge/license-MIT-green -->
+      <image href="opengraph-badges/license.svg" width="171.6" height="44" />
+    </g>
+
+    <g transform="translate(178 356)">
+      <rect x="0" y="8" width="237.6" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/badge/rating-★★★★☆-brightgreen -->
+      <image href="opengraph-badges/rating.svg" width="237.6" height="44" />
+    </g>
+
+    <g transform="translate(10 428)">
+      <rect x="0" y="8" width="213.4" height="44" rx="7" fill="#1f2933" opacity="0.14" />
+      <!-- https://img.shields.io/npm/v/badge-maker?logo=npm -->
+      <image href="opengraph-badges/npm.svg" width="213.4" height="44" />
+    </g>
+  </g>
+</svg>