diff --git a/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js b/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js index ac17525817..057dea32e8 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js +++ b/packages/docusaurus-theme-classic/src/theme/DocLegacyPage/index.js @@ -20,10 +20,14 @@ function DocLegacyPage(props) { permalinkToId[location.pathname] || permalinkToId[location.pathname.replace(/\/$/, '')]; const metadata = docsMetadata.docs[id] || {}; - const {sidebar, description} = metadata; - + const {sidebar, description, title, permalink, image} = metadata; return ( - +
diff --git a/packages/docusaurus-theme-classic/src/theme/Layout/index.js b/packages/docusaurus-theme-classic/src/theme/Layout/index.js index 21d10687a0..255976da71 100644 --- a/packages/docusaurus-theme-classic/src/theme/Layout/index.js +++ b/packages/docusaurus-theme-classic/src/theme/Layout/index.js @@ -15,19 +15,48 @@ import Footer from '@theme/Footer'; import './styles.css'; function Layout(props) { - const context = useDocusaurusContext(); - const {siteConfig = {}} = context; - const {favicon, tagline, title: defaultTitle} = siteConfig; - const {children, title, noFooter, description} = props; + const {siteConfig = {}} = useDocusaurusContext(); + const { + favicon, + tagline, + title: defaultTitle, + themeConfig: {image: defaultImage}, + url: siteUrl, + } = siteConfig; + const { + children, + title, + noFooter, + description, + image, + keywords, + permalink, + } = props; + const metaTitle = title || `${defaultTitle} · ${tagline}`; + const metaImage = `${siteUrl}${withBaseUrl(image || defaultImage)}`; return ( - - {title && {`${title} · ${tagline}`}} + + {metaTitle && {metaTitle}} + {metaTitle && } {favicon && } {description && } {description && ( )} + {keywords && keywords.length && ( + + )} + {metaImage && } + {metaImage && } + {metaImage && ( + + )} + {permalink && } + {children} diff --git a/website/docs/seo.md b/website/docs/seo.md new file mode 100644 index 0000000000..44a1ae2e82 --- /dev/null +++ b/website/docs/seo.md @@ -0,0 +1,52 @@ +--- +id: seo +title: SEO +keywods: + - docusaurus + - svg +description: Adding SEO to docs +image: 'https://i.imgur.com/mErPwqL.png' +--- + +SEO helps your users reach your site. Page-specific SEO helps your users to have a higher chance of finding answers to their questions quickly. + +## Site SEO + +Your site title and logo are by default used in each page of your docs. + +## Page specific SEO + +To add SEO to your doc, use the following fields in your doc's front matter: + +```yaml +--- +keywords: + - docs + - docusaurus +description: 'How do I find you when I cannot solve this problem' +image: 'https://i.imgur.com/mErPwqL.png' +--- + +``` + +### `keywords` + +- Type: `string[]` + +You may provide an array of keywords in a bullet list. Consider putting searchable terms that summarizes key information of the page to help your users find the correct page. + +### `description` + +- Type: `string` + +If you provide a description to this page, we will use this description for SEO. + +Consider putting key information about this page, error messages, searchable terms, etc., inside description to help your users land on your doc page. + +### `image` + +- Type: `string` + +`image` is used by search engines and Twitter for a cover or thumbnail image when displaying the link to your post. + +Note that the file of this image cannot be SVG. diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index cf3eb14649..52c8cf92d0 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -33,6 +33,7 @@ module.exports = { ], ], themeConfig: { + image: 'img/docusaurus.png', gtag: { trackingID: 'UA-141789564-1', }, diff --git a/website/src/pages/feedback/index.js b/website/src/pages/feedback/index.js index 0eb37ae668..6484366fa0 100644 --- a/website/src/pages/feedback/index.js +++ b/website/src/pages/feedback/index.js @@ -23,7 +23,7 @@ function Feedback() { }, []); return ( - +
); diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 07b958f632..0952123a88 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -65,7 +65,9 @@ function Home() { const {siteConfig = {}} = context; return ( - +