try this too

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

Hide file tree

Showing 3 changed files with 67 additions and 89 deletions.
diff --git a/docs/pages/index.tsx b/docs/pages/index.tsx
@@ -22,7 +22,26 @@ export default function Home() {
       <Head
         title="MUI: The React component library you always wanted"
         description="MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design."
-      />
+      >
+        <script
+          type="application/ld+json"
+          // eslint-disable-next-line react/no-danger
+          dangerouslySetInnerHTML={{
+            __html: JSON.stringify({
+              '@context': 'https://schema.org',
+              '@type': 'Organization',
+              name: 'MUI',
+              url: 'https://mui.com/',
+              logo: 'https://mui.com/static/logo.png',
+              sameAs: [
+                'https://twitter.com/MUI_hq',
+                'https://github.com/mui/',
+                'https://opencollective.com/mui',
+              ],
+            }),
+          }}
+        />
+      </Head>
       <NoSsr>
         <NewsletterToast />
       </NoSsr>
@@ -40,26 +59,6 @@ export default function Home() {
         <Divider />
       </main>
       <AppFooter />
-      <script
-        type="application/ld+json"
-        // eslint-disable-next-line react/no-danger
-        dangerouslySetInnerHTML={{
-          __html: `
-{
-  "@context": "https://schema.org",
-  "@type": "Organization",
-  "name": "MUI",
-  "url": "https://mui.com/",
-  "logo": "https://mui.com/static/logo.png",
-  "sameAs": [
-    "https://twitter.com/MUI_hq",
-    "https://github.com/mui/",
-    "https://opencollective.com/mui"
-  ]
-}
-          `,
-        }}
-      />
     </BrandingCssVarsProvider>
   );
 }
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,54 @@ 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: JSON.stringify({
+              '@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,
+              mainEntityOfPage: {
+                '@type': 'WebPage',
+                '@id': 'https://mui.com/blog/',
+              },
+            }),
+          }}
+        />
       </Head>
       <Root className={className}>
         <AppContainer component="main" className={classes.container}>
@@ -305,56 +347,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>
   );
 }