diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
index ccfe381b0eb5..48b3086ec44a 100644
--- a/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
+++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.tsx
@@ -28,11 +28,11 @@ function Providers({children}) {
}
function Layout(props: Props): JSX.Element {
- const {siteConfig = {}} = useDocusaurusContext();
+ const {siteConfig} = useDocusaurusContext();
const {
favicon,
title: siteTitle,
- themeConfig: {image: defaultImage},
+ themeConfig: {image: defaultImage, metadatas},
url: siteUrl,
} = siteConfig;
const {
@@ -48,13 +48,11 @@ function Layout(props: Props): JSX.Element {
const metaImage = image || defaultImage;
const metaImageUrl = useBaseUrl(metaImage, {absolute: true});
const faviconUrl = useBaseUrl(favicon);
-
return (
{/* TODO: Do not assume that it is in english language */}
-
{metaTitle && {metaTitle}}
{metaTitle && }
{favicon && }
@@ -74,6 +72,19 @@ function Layout(props: Props): JSX.Element {
{permalink && }
+
+ element here,
+ // as it allows react-helmet to override values set in previous
+ // ie we can override default metadatas such as "twitter:card"
+ // In same Head, the same meta would appear twice instead of overriding
+ // See react-helmet doc
+ >
+ {metadatas.map((metadata, i) => (
+
+ ))}
+
+
{children}
diff --git a/packages/docusaurus-theme-classic/src/validateThemeConfig.js b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
index 968e6e37bda7..ca6c51888125 100644
--- a/packages/docusaurus-theme-classic/src/validateThemeConfig.js
+++ b/packages/docusaurus-theme-classic/src/validateThemeConfig.js
@@ -137,6 +137,15 @@ const ColorModeSchema = Joi.object({
}).default(DEFAULT_COLOR_MODE_CONFIG.switchConfig),
}).default(DEFAULT_COLOR_MODE_CONFIG);
+// schema can probably be improved
+const HtmlMetadataSchema = Joi.object({
+ id: Joi.string(),
+ name: Joi.string(),
+ property: Joi.string(),
+ content: Joi.string(),
+ itemprop: Joi.string(),
+}).unknown();
+
const FooterLinkItemSchema = Joi.object({
to: Joi.string(),
href: URISchema,
@@ -164,6 +173,7 @@ const ThemeConfigSchema = Joi.object({
}),
colorMode: ColorModeSchema,
image: Joi.string(),
+ metadatas: Joi.array().items(HtmlMetadataSchema).default([]),
announcementBar: Joi.object({
id: Joi.string().default('announcement-bar'),
content: Joi.string(),
diff --git a/website/docs/theme-classic.md b/website/docs/theme-classic.md
index 769411b915ea..6fed3f709204 100644
--- a/website/docs/theme-classic.md
+++ b/website/docs/theme-classic.md
@@ -85,6 +85,20 @@ module.exports = {
};
```
+### Metadatas
+
+You can configure additional html metadatas (and override existing ones).
+
+```js {4-6} title="docusaurus.config.js"
+module.exports = {
+ // ...
+ themeConfig: {
+ metadatas: [{name: 'twitter:card', content: 'summary'}],
+ // ...
+ },
+};
+```
+
### Announcement bar
Sometimes you want to announce something in your website. Just for such a case, you can add an announcement bar. This is a non-fixed and optionally dismissable panel above the navbar.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index a2ce5bdd5045..ee5891776d65 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -228,6 +228,7 @@ module.exports = {
darkTheme: require('prism-react-renderer/themes/dracula'),
},
image: 'img/docusaurus-soc.png',
+ // metadatas: [{name: 'twitter:card', content: 'summary'}],
gtag: {
trackingID: 'UA-141789564-1',
},