Add preview image to multidimensional data pages

We can't use a dynamic thumbnail, because the meta tags are generated during baking. We could switch to dynamic thumbnails if/when we move the Grapher pages to dynamic rendering, i.e Cloudflare functions.
owid · Jan 22, 2025 · 9287b52 · 9287b52
1 parent 506271a
commit 9287b52
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts b/packages/@ourworldindata/types/src/siteTypes/MultiDimDataPage.ts
@@ -118,6 +118,5 @@ export interface MultiDimDataPageProps {
     primaryTopic?: PrimaryTopic
     relatedResearchCandidates: DataPageRelatedResearch[]
     imageMetadata: Record<string, ImageMetadata>
-    initialQueryStr?: string
     isPreviewing?: boolean
 }
diff --git a/site/multiDim/MultiDimDataPage.tsx b/site/multiDim/MultiDimDataPage.tsx
@@ -18,7 +18,6 @@ export function MultiDimDataPage({
     primaryTopic,
     relatedResearchCandidates,
     imageMetadata,
-    initialQueryStr,
     isPreviewing,
 }: MultiDimDataPageProps) {
     const canonicalUrl = `${baseGrapherUrl}/${slug}`
@@ -31,19 +30,24 @@ export function MultiDimDataPage({
         relatedResearchCandidates,
         imageMetadata,
         tagToSlugMap,
-        initialQueryStr,
     }
+    // Due to thumbnails not taking into account URL parameters, they are often inaccurate on
+    // social media. We decided to remove them and use a single thumbnail for all charts.
+    // See https://github.com/owid/owid-grapher/issues/1086
+    const imageUrl: string = urljoin(baseUrl, "default-grapher-thumbnail.png")
+    const imageWidth = "1200"
+    const imageHeight = "628"
     return (
         <Html>
             <Head
                 canonicalUrl={canonicalUrl}
                 // pageTitle={pageTitle}
                 // pageDesc={pageDesc}
-                // imageUrl={imageUrl}
+                imageUrl={imageUrl}
                 baseUrl={baseUrl}
             >
-                {/* <meta property="og:image:width" content={imageWidth} />
-                <meta property="og:image:height" content={imageHeight} /> */}
+                <meta property="og:image:width" content={imageWidth} />
+                <meta property="og:image:height" content={imageHeight} />
                 <IFrameDetector />
                 <noscript>
                     <style>{`