docs: improved SEO of documentation (#3117)

* docs: added description to documentation pages

* docs: added more descriptions

* docs: finished improving meta description

* docs: added searchbox structured data

* docs: added breadcrumbs structured data

* docs: added how to structured data

* docs: improved 404 page

* docs: added how-to frontmatter option

www/docs/src/theme/Layout/index.js

@@ -15,6 +15,7 @@ import ErrorPageContent from '@theme/ErrorPageContent';
 import styles from './styles.module.css';
 import useIsBrowser from '@docusaurus/useIsBrowser';
 import {useLocation} from '@docusaurus/router';
+import StructuredDataSearchbox from '../StructuredData/Searchbox';
 
 export default function Layout(props) {
   const {
@@ -49,12 +50,11 @@ export default function Layout(props) {
     }
   }, [isBrowser, location.pathname]);
 
-
   useKeyboardNavigation();
   return (
     <LayoutProvider>
       <PageMetadata title={title} description={description} />
-
+      {isBrowser && location.pathname === '/' && <StructuredDataSearchbox />}
       <SkipToContent />
 
       <Navbar />

www/docs/src/theme/NotFound.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import Translate, {translate} from '@docusaurus/Translate';
+import {PageMetadata} from '@docusaurus/theme-common';
+import Layout from '@theme/Layout';
+import useBaseUrl from '@docusaurus/useBaseUrl'
+
+export default function NotFound() {
+  return (
+    <>
+      <PageMetadata
+        title={translate({
+          id: 'theme.NotFound.title',
+          message: 'Page Not Found',
+        })}
+      />
+      <Layout>
+        <main className="container margin-vert--xl markdown theme-doc-markdown">
+          <div className="row">
+            <div className="col col--6 col--offset-3">
+              <h1 className="hero__title">
+                <Translate
+                  id="theme.NotFound.title"
+                  description="The title of the 404 page">
+                  Page Not Found
+                </Translate>
+              </h1>
+              <p>
+                <Translate
+                  id="theme.NotFound.p1"
+                  description="The first paragraph of the 404 page">
+                  Looks like the page you're looking for has either changed into a different
+                  location or isn't in our documentation anymore.
+                </Translate>
+              </p>
+              <p>
+                If you think this is a mistake, please <a 
+                  href="https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml"
+                  rel="noopener noreferrer"
+                  target="_blank"
+                  className='link'
+                >
+                  report this issue on GitHub
+                </a>
+              </p>
+              <h2>Some popular links</h2>
+              <ul>
+                <li>
+                  <a href={useBaseUrl('/usage/create-medusa-app')}>Install Medusa with create-medusa-app</a>
+                </li>
+                <li>
+                  <a href={useBaseUrl('/api/store')}>Storefront REST API Reference</a>
+                </li>
+                <li>
+                  <a href={useBaseUrl('/api/admin')}>Admin REST API Reference</a>
+                </li>
+                <li>
+                  <a href={useBaseUrl('/starters/nextjs-medusa-starter')}>Install Next.js Storefront</a>
+                </li>
+                <li>
+                  <a href={useBaseUrl('/admin/quickstart')}>Install Medusa Admin</a>
+                </li>
+                <li>
+                  <a href={useBaseUrl('/user-guide')}>User Guide</a>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </main>
+      </Layout>
+    </>
+  );
+}

www/docs/src/theme/StructuredData/HowTo/index.js

@@ -0,0 +1,31 @@
+import React from "react"
+import Head from '@docusaurus/Head'
+import {useLocation} from '@docusaurus/router';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+
+export default function StructuredDataHowTo ({ toc, title }) {
+  const location = useLocation();
+  const { siteConfig: { url } } = useDocusaurusContext()
+  const mainUrl = `${url}/${location.pathname}`
+
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "HowTo",
+          name: title,
+          step: [
+            toc
+              .filter((item) => item.level === 2)
+              .map((item) => ({
+                "@type": "HowToStep",
+                text: item.value,
+                url: `${mainUrl}#${item.id}`
+              }))
+          ]
+        })}
+      </script>
+    </Head>
+  )
+}

www/docs/src/theme/StructuredData/Searchbox/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Head from '@docusaurus/Head';
+
+export default function StructuredDataSearchbox () {
+  const { siteConfig: { url } } = useDocusaurusContext()
+
+  return (
+    <Head>
+      <script type="application/ld+json">
+        {JSON.stringify({
+          "@context": "https://schema.org",
+          "@type": "WebSite",
+          url,
+          potentialAction: {
+            "@type": "SearchAction",
+            "target": {
+              "@type": "EntryPoint",
+              "urlTemplate": `${url}/search?q={search_term_string}`
+            },
+            "query-input": "required name=search_term_string"
+          }
+        })}
+      </script>
+    </Head>
+  )
+}

www/docs/src/theme/TOCItems/index.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import TOCItems from '@theme-original/TOCItems';
+import StructuredDataHowTo from '../StructuredData/HowTo';
+import { useDoc } from '@docusaurus/theme-common/internal'
+
+export default function TOCItemsWrapper(props) {
+  const { frontMatter, contentTitle } = useDoc()
+  
+  return (
+    <>
+      <TOCItems {...props} />
+      {frontMatter?.addHowToData && <StructuredDataHowTo toc={props.toc} title={contentTitle} />}
+    </>
+  );
+}