From 656c04e1d54e9d9580ba60c31eaafb0b4203495a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C3=A9ril?= <meril.pilon@gmail.com>
Date: Thu, 10 Dec 2020 16:09:20 +0000
Subject: [PATCH] fix(v2): correct typo in metas generated for Twitter cards
 (#3900)

The Open Graph protocol format is the following:

```
<meta property="og:image" content="https://example.com/image.png />
```

Twitter metas, however, are structured in a different format:

```
<meta name="twitter:image" content="https://example.com/image.png />
```

They are similar but not identical, I think this led to confusion and
the typo we have in the codebase.
---
 .../docusaurus-theme-bootstrap/src/theme/DebugLayout/index.tsx  | 2 +-
 packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.tsx | 2 +-
 packages/docusaurus-theme-bootstrap/src/theme/Layout/index.tsx  | 2 +-
 .../docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx   | 2 +-
 packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx   | 2 +-
 .../docusaurus-theme-classic/src/theme/LayoutHead/index.tsx     | 2 +-
 6 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.tsx b/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.tsx
index 58d650e649..78b3736b17 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.tsx
+++ b/packages/docusaurus-theme-bootstrap/src/theme/DebugLayout/index.tsx
@@ -58,7 +58,7 @@ function Layout(props: Props): JSX.Element {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
-        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
         )}
diff --git a/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.tsx
index 431a13a76d..928e1527e5 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-bootstrap/src/theme/DocItem/index.tsx
@@ -43,7 +43,7 @@ function DocItem(props: Props): JSX.Element {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
-        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${title}`} />
         )}
diff --git a/packages/docusaurus-theme-bootstrap/src/theme/Layout/index.tsx b/packages/docusaurus-theme-bootstrap/src/theme/Layout/index.tsx
index 0f96ef5b43..1cc6c68632 100644
--- a/packages/docusaurus-theme-bootstrap/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-bootstrap/src/theme/Layout/index.tsx
@@ -59,7 +59,7 @@ function Layout(props: Props): JSX.Element {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
-        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
         )}
diff --git a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
index a0706b281a..b42d0d7538 100644
--- a/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/BlogPostItem/index.tsx
@@ -102,7 +102,7 @@ function BlogPostItem(props: Props): JSX.Element {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {image && <meta property="og:image" content={imageUrl} />}
-        {image && <meta property="twitter:image" content={imageUrl} />}
+        {image && <meta name="twitter:image" content={imageUrl} />}
         {image && (
           <meta name="twitter:image:alt" content={`Image for ${title}`} />
         )}
diff --git a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
index 080b8d4b56..9d351ecad2 100644
--- a/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx
@@ -71,7 +71,7 @@ function DocItem(props: Props): JSX.Element {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
-        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${title}`} />
         )}
diff --git a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx b/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
index 712a7e740f..0fe78ae88e 100644
--- a/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/LayoutHead/index.tsx
@@ -52,7 +52,7 @@ export default function LayoutHead(props: Props): JSX.Element {
           <meta name="keywords" content={keywords.join(',')} />
         )}
         {metaImage && <meta property="og:image" content={metaImageUrl} />}
-        {metaImage && <meta property="twitter:image" content={metaImageUrl} />}
+        {metaImage && <meta name="twitter:image" content={metaImageUrl} />}
         {metaImage && (
           <meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
         )}