fix(v2): correct typo in metas generated for Twitter cards

mpsq · mpsq · commit ca5722cfc28b · 2020-12-09T15:47:20.000Z
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.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}`} />
         )}
