try this too

mui · Oct 31, 2022 · aca2cb4 · aca2cb4
1 parent bdd317e
commit aca2cb4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 68 deletions.
diff --git a/docs/src/modules/components/Head.tsx b/docs/src/modules/components/Head.tsx
@@ -16,8 +16,6 @@ interface HeadProps {
   largeCard?: boolean;
   title: string;
   type?: string;
-  authors?: string[];
-  publicationDate?: string;
 }
 
 export default function Head(props: HeadProps) {
@@ -30,8 +28,6 @@ export default function Head(props: HeadProps) {
     largeCard = true,
     title = t('headTitle'),
     type = 'website',
-    authors = [],
-    publicationDate,
   } = props;
   const userLanguage = useUserLanguage();
   const router = useRouter();
@@ -58,15 +54,6 @@ export default function Head(props: HeadProps) {
       <meta property="og:description" content={description} />
       <meta property="og:image" content={preview} />
       <meta property="og:ttl" content="604800" />
-      {/* Advanced open graph description (https://ogp.me/#type_article) */}
-      {type === 'article' && (
-        <React.Fragment>
-          {authors.map((author) => (
-            <meta property="article:author" content={author} />
-          ))}
-          {publicationDate && <meta property="article:published_time" content={publicationDate} />}
-        </React.Fragment>
-      )}
       {/* Algolia */}
       <meta name="docsearch:language" content={userLanguage} />
       {/* #major-version-switch */}

diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js
@@ -232,12 +232,58 @@ function TopLayoutBlog(props) {
         card={card}
         type="article"
       >
-        {headers.authors
-          .map((key) => authors[key].name)
-          .map((author) => (
-            <meta property="article:author" content={author} />
-          ))}
+        <meta name="author" content={headers.authors.map((key) => authors[key].name).join(', ')} />
         <meta property="article:published_time" content={headers.date} />
+        <script
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: `
+{
+  "@context": "https://schema.org",
+  "@type": "Article",
+  "publisher": {
+    "@type": "Organization",
+    "name": "MUI blog",
+    "url": "https://mui.com/blog/",
+    "logo": {
+      "@type": "ImageObject",
+      "url": "https://mui.com/static/icons/512x512.png"
+    }
+  },
+  "author": {
+    "@type": "Person",
+    "name": "${authors[headers.authors[0]].name}",
+    "image": {
+      "@type": "ImageObject",
+      "url": "${authors[headers.authors[0]].avatar}?s=${250}",
+      "width": 250,
+      "height": 250
+    },
+    "sameAs": [
+      "https://github.com/${authors[headers.authors[0]].github}"
+    ]
+  },
+  "headline": "${finalTitle}",
+  "url": "https://mui.com${canonicalAsServer}",
+  "datePublished": "${headers.date}",
+  "dateModified": "${headers.date}",
+  "image": {
+    "@type": "ImageObject",
+    "url": "${card}",
+    "width": 1280,
+    "height": 640
+  },
+  "keywords": "${headers.tags.join(', ')}",
+  "description": "${description}",
+  "mainEntityOfPage": {
+    "@type": "WebPage",
+    "@id": "https://mui.com/blog/"
+  }
+}
+`,
+          }}
+        />
       </Head>
       <Root className={className}>
         <AppContainer component="main" className={classes.container}>
@@ -305,56 +351,6 @@ function TopLayoutBlog(props) {
         <Divider />
         <AppFooter />
       </Root>
-      <script
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-{
-  "@context": "https://schema.org",
-  "@type": "Article",
-  "publisher": {
-    "@type": "Organization",
-    "name": "MUI blog",
-    "url": "https://mui.com/blog/",
-    "logo": {
-      "@type": "ImageObject",
-      "url": "https://mui.com/static/icons/512x512.png"
-    }
-  },
-  "author": {
-    "@type": "Person",
-    "name": "${authors[headers.authors[0]].name}",
-    "image": {
-      "@type": "ImageObject",
-      "url": "${authors[headers.authors[0]].avatar}?s=${250}",
-      "width": 250,
-      "height": 250
-    },
-    "sameAs": [
-      "https://github.com/${authors[headers.authors[0]].github}"
-    ]
-  },
-  "headline": "${finalTitle}",
-  "url": "https://mui.com${canonicalAsServer}",
-  "datePublished": "${headers.date}",
-  "dateModified": "${headers.date}",
-  "image": {
-    "@type": "ImageObject",
-    "url": "${card}",
-    "width": 1280,
-    "height": 640
-  },
-  "keywords": "${headers.tags.join(', ')}",
-  "description": "${description}",
-  "mainEntityOfPage": {
-    "@type": "WebPage",
-    "@id": "https://mui.com/blog/"
-  }
-}
-`,
-        }}
-      />
     </BrandingProvider>
   );
 }