enhance(opengraph): fix og:image and add og:{image:*,site_name,type} (#…

…9795) * fix(opengraph): use underscore for locale Note that we don't actively add a territory for es/fr/ja/ko/ru. * enhance(opengraph): add og:image:{type,height,width,alt} properties * enhance(opengraph): add og:site_name property * test(opengraph): update expectations * enhance(opengraph): add og:type property
mdn · Nov 6, 2023 · a9ee3d3 · a9ee3d3
1 parent 2d7e33b
commit a9ee3d3
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/client/public/index.html b/client/public/index.html
@@ -52,12 +52,21 @@
     -->
     <meta property="og:url" content="https://developer.mozilla.org" />
     <meta property="og:title" content="MDN Web Docs" />
-    <meta property="og:locale" content="en-US" />
+    <meta property="og:type" content="website" />
+    <meta property="og:locale" content="en_US" />
     <meta
       property="og:description"
       content="The MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps."
     />
     <meta property="og:image" content="%PUBLIC_URL%/mdn-social-share.png" />
+    <meta property="og:image:type" content="image/png" />
+    <meta property="og:image:height" content="1080" />
+    <meta property="og:image:width" content="1920" />
+    <meta
+      property="og:image:alt"
+      content="The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background."
+    />
+    <meta property="og:site_name" content="MDN Web Docs" />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:creator" content="MozDevNet" />
 

diff --git a/ssr/render.ts b/ssr/render.ts
@@ -233,10 +233,16 @@ export default function render(
     )
     .join("");
 
+  // Open Graph protocol expects `language_TERRITORY` format.
+  const ogLocale = (locale || (doc && doc.locale) || DEFAULT_LOCALE).replace(
+    "-",
+    "_"
+  );
+
   const og = new Map([
     ["title", escapedPageTitle],
     ["url", canonicalURL],
-    ["locale", locale || (doc && doc.locale) || "en-US"],
+    ["locale", ogLocale],
   ]);
 
   if (pageDescription) {

diff --git a/testing/tests/index.test.ts b/testing/tests/index.test.ts
@@ -239,7 +239,7 @@ test("content built zh-CN page for hreflang tag and copying image testing", () =
   expect($('link[rel="alternate"][hreflang="fr"]')).toHaveLength(1);
   expect($('link[rel="alternate"][hreflang="zh"]')).toHaveLength(1);
   expect($('link[rel="alternate"][hreflang="zh-Hant"]')).toHaveLength(1);
-  expect($('meta[property="og:locale"]').attr("content")).toBe("zh-CN");
+  expect($('meta[property="og:locale"]').attr("content")).toBe("zh_CN");
   expect($('meta[property="og:title"]').attr("content")).toBe(
     "<foo>: 测试网页 | MDN"
   );
@@ -273,7 +273,7 @@ test("content built zh-TW page with en-US fallback image", () => {
   expect($('link[rel="alternate"][hreflang="fr"]')).toHaveLength(1);
   expect($('link[rel="alternate"][hreflang="zh"]')).toHaveLength(1);
   expect($('link[rel="alternate"][hreflang="zh-Hant"]')).toHaveLength(1);
-  expect($('meta[property="og:locale"]').attr("content")).toBe("zh-TW");
+  expect($('meta[property="og:locale"]').attr("content")).toBe("zh_TW");
   expect($('meta[property="og:title"]').attr("content")).toBe(
     "<foo>: 測試網頁 | MDN"
   );
@@ -1165,7 +1165,7 @@ test("404 page", () => {
   expect($("title").text()).toContain("Page not found");
   expect($("h1").text()).toContain("Page not found");
   expect($('meta[name="robots"]').attr("content")).toBe("noindex, nofollow");
-  expect($('meta[property="og:locale"]').attr("content")).toBe("en-US");
+  expect($('meta[property="og:locale"]').attr("content")).toBe("en_US");
 });
 
 test("plus page", () => {