feat(content-docs): allow SEO metadata for category index pages (#6239)

packages/docusaurus-plugin-content-docs/src/categoryGeneratedIndex.ts

@@ -28,6 +28,8 @@ function getCategoryGeneratedIndexMetadata({
   return {
     title: category.link.title ?? category.label,
     description: category.link.description,
+    image: category.link.image,
+    keywords: category.link.keywords,
     slug: category.link.slug,
     permalink: category.link.permalink,
     sidebar: sidebarName,

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

@@ -42,6 +42,8 @@ declare module '@docusaurus/plugin-content-docs' {
   export type PropCategoryGeneratedIndex = {
     title: string;
     description?: string;
+    image?: string;
+    keywords?: string | readonly string[];
     slug: string;
     permalink: string;
     navigation: PropNavigation;

packages/docusaurus-plugin-content-docs/src/routes.ts

@@ -30,8 +30,17 @@ export async function createCategoryGeneratedIndexRoutes({
   async function createCategoryGeneratedIndexRoute(
     categoryGeneratedIndex: CategoryGeneratedIndexMetadata,
   ): Promise<RouteConfig> {
-    const {sidebar, title, description, slug, permalink, previous, next} =
+    const {
-      categoryGeneratedIndex;
+      sidebar,
+      title,
+      description,
+      slug,
+      permalink,
+      previous,
+      next,
+      image,
+      keywords,
+    } = categoryGeneratedIndex;
 
     const propFileName = slugs.slug(
       `${version.versionPath}-${categoryGeneratedIndex.sidebar}-category-${categoryGeneratedIndex.title}`,
@@ -42,6 +51,8 @@ export async function createCategoryGeneratedIndexRoutes({
       description,
       slug,
       permalink,
+      image,
+      keywords,
       navigation: {
         previous,
         next,

packages/docusaurus-plugin-content-docs/src/sidebars/types.ts

@@ -52,6 +52,8 @@ export type SidebarItemCategoryLinkGeneratedIndexConfig = {
   slug?: string;
   title?: string;
   description?: string;
+  image?: string;
+  keywords?: string | readonly string[];
 };
 export type SidebarItemCategoryLinkGeneratedIndex = {
   type: 'generated-index';
@@ -59,6 +61,8 @@ export type SidebarItemCategoryLinkGeneratedIndex = {
   permalink: string;
   title?: string;
   description?: string;
+  image?: string;
+  keywords?: string | readonly string[];
 };
 
 export type SidebarItemCategoryLinkConfig =

packages/docusaurus-plugin-content-docs/src/sidebars/validation.ts

@@ -70,6 +70,8 @@ const sidebarItemCategoryLinkSchema = Joi.object<SidebarItemCategoryLink>()
           // permalink: Joi.string().optional(), // No, this one is not in the user config, only in the normalized version
           title: Joi.string().optional(),
           description: Joi.string().optional(),
+          image: Joi.string().optional(),
+          keywords: [Joi.string(), Joi.array().items(Joi.string())],
         }),
       },
       {

packages/docusaurus-plugin-content-docs/src/types.ts

@@ -174,6 +174,8 @@ export type CategoryGeneratedIndexMetadata = {
   sidebar: string;
   previous?: DocNavLink;
   next?: DocNavLink;
+  image?: string;
+  keywords?: string | readonly string[];
 };
 
 export type SourceToPermalink = {

packages/docusaurus-theme-classic/src/theme/DocCategoryGeneratedIndexPage/index.tsx

@@ -14,6 +14,7 @@ import Seo from '@theme/Seo';
 import DocVersionBanner from '@theme/DocVersionBanner';
 import DocVersionBadge from '@theme/DocVersionBadge';
 import {MainHeading} from '@theme/Heading';
+import useBaseUrl from '@docusaurus/useBaseUrl';
 
 import styles from './styles.module.css';
 
@@ -26,6 +27,9 @@ export default function DocCategoryGeneratedIndexPage({
       <Seo
         title={categoryGeneratedIndex.title}
         description={categoryGeneratedIndex.description}
+        keywords={categoryGeneratedIndex.keywords}
+        // TODO `require` this?
+        image={useBaseUrl(categoryGeneratedIndex.image)}
       />
       <div className={styles.generatedIndexPage}>
         <DocVersionBanner />

website/sidebars.js

@@ -33,6 +33,8 @@ const sidebars = {
         title: 'Docusaurus Guides',
         description:
           "Let's learn about the most important Docusaurus concepts!",
+        keywords: ['guides'],
+        image: '/img/docusaurus.png',
       },
       items: [
         'guides/creating-pages',