mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-07 21:32:38 +02:00
feat(v2): improve seo (#1588)
* feat(v2): improve seo - Add doc specific seo information - Add twitter meta tags to seo in theme Layout * Cannot use svg in SEO image * Add docs about SEO * add site default image for seo * Resolve PR discussion * Add `image` to config optional fields * Use theme config instead of root config for image, rename in front matter * Use absolute url for image (wont work on preview) * update docs for frontmatter field for seo * refactor * pages seo * fix * nits again'
This commit is contained in:
Wei Gao
Endi
parent
684a2461bd
commit
2491c53ba9
6 changed files with 99 additions and 11 deletions
|
|
@ -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 (
|
||||
<Layout noFooter description={description}>
|
||||
<Layout
|
||||
noFooter
|
||||
description={description}
|
||||
title={title}
|
||||
image={image}
|
||||
permalink={permalink}>
|
||||
<div className="container container--fluid">
|
||||
<div className="row">
|
||||
<div className="col col--3">
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<React.Fragment>
|
||||
<Head defaultTitle={`${defaultTitle} · ${tagline}`}>
|
||||
{title && <title>{`${title} · ${tagline}`}</title>}
|
||||
<Head>
|
||||
{metaTitle && <title>{metaTitle}</title>}
|
||||
{metaTitle && <meta property="og:title" content={metaTitle} />}
|
||||
{favicon && <link rel="shortcut icon" href={withBaseUrl(favicon)} />}
|
||||
{description && <meta name="description" content={description} />}
|
||||
{description && (
|
||||
<meta property="og:description" content={description} />
|
||||
)}
|
||||
{keywords && keywords.length && (
|
||||
<meta property="keywords" content={keywords} />
|
||||
)}
|
||||
{metaImage && <meta property="og:image" content={metaImage} />}
|
||||
{metaImage && <meta property="twitter:image" content={metaImage} />}
|
||||
{metaImage && (
|
||||
<meta name="twitter:image:alt" content={`Image for ${metaTitle}`} />
|
||||
)}
|
||||
{permalink && <meta property="og:url" content={siteUrl + permalink} />}
|
||||
<meta
|
||||
name="twitter:card"
|
||||
content={image || favicon ? 'summary_large_image' : 'summary'}
|
||||
/>
|
||||
</Head>
|
||||
<Navbar />
|
||||
{children}
|
||||
|
|
|
|||
52
website/docs/seo.md
Normal file
52
website/docs/seo.md
Normal file
|
|
@ -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.
|
||||
|
|
@ -33,6 +33,7 @@ module.exports = {
|
|||
],
|
||||
],
|
||||
themeConfig: {
|
||||
image: 'img/docusaurus.png',
|
||||
gtag: {
|
||||
trackingID: 'UA-141789564-1',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@ function Feedback() {
|
|||
}, []);
|
||||
|
||||
return (
|
||||
<Layout>
|
||||
<Layout permalink={'/feedback'} description={'Docusaurus 2 Feedback page'}>
|
||||
<div className="container margin-vert--xl" data-canny />
|
||||
</Layout>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -65,7 +65,9 @@ function Home() {
|
|||
const {siteConfig = {}} = context;
|
||||
|
||||
return (
|
||||
<Layout description={'Docusaurus makes it easy to build websites'}>
|
||||
<Layout
|
||||
permalink={'/'}
|
||||
description={'Docusaurus makes it easy to build websites'}>
|
||||
<div className={styles['index-hero']}>
|
||||
<div className={styles['index-hero-inner']}>
|
||||
<h1 className={styles['index-hero-project-tagline']}>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue