mirror of
https://github.com/facebook/docusaurus.git
synced 2025-06-08 05:42:34 +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] ||
|
||||||
permalinkToId[location.pathname.replace(/\/$/, '')];
|
permalinkToId[location.pathname.replace(/\/$/, '')];
|
||||||
const metadata = docsMetadata.docs[id] || {};
|
const metadata = docsMetadata.docs[id] || {};
|
||||||
const {sidebar, description} = metadata;
|
const {sidebar, description, title, permalink, image} = metadata;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout noFooter description={description}>
|
<Layout
|
||||||
|
noFooter
|
||||||
|
description={description}
|
||||||
|
title={title}
|
||||||
|
image={image}
|
||||||
|
permalink={permalink}>
|
||||||
<div className="container container--fluid">
|
<div className="container container--fluid">
|
||||||
<div className="row">
|
<div className="row">
|
||||||
<div className="col col--3">
|
<div className="col col--3">
|
||||||
|
|
|
||||||
|
|
@ -15,19 +15,48 @@ import Footer from '@theme/Footer';
|
||||||
import './styles.css';
|
import './styles.css';
|
||||||
|
|
||||||
function Layout(props) {
|
function Layout(props) {
|
||||||
const context = useDocusaurusContext();
|
const {siteConfig = {}} = useDocusaurusContext();
|
||||||
const {siteConfig = {}} = context;
|
const {
|
||||||
const {favicon, tagline, title: defaultTitle} = siteConfig;
|
favicon,
|
||||||
const {children, title, noFooter, description} = props;
|
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 (
|
return (
|
||||||
<React.Fragment>
|
<React.Fragment>
|
||||||
<Head defaultTitle={`${defaultTitle} · ${tagline}`}>
|
<Head>
|
||||||
{title && <title>{`${title} · ${tagline}`}</title>}
|
{metaTitle && <title>{metaTitle}</title>}
|
||||||
|
{metaTitle && <meta property="og:title" content={metaTitle} />}
|
||||||
{favicon && <link rel="shortcut icon" href={withBaseUrl(favicon)} />}
|
{favicon && <link rel="shortcut icon" href={withBaseUrl(favicon)} />}
|
||||||
{description && <meta name="description" content={description} />}
|
{description && <meta name="description" content={description} />}
|
||||||
{description && (
|
{description && (
|
||||||
<meta property="og:description" content={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>
|
</Head>
|
||||||
<Navbar />
|
<Navbar />
|
||||||
{children}
|
{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: {
|
themeConfig: {
|
||||||
|
image: 'img/docusaurus.png',
|
||||||
gtag: {
|
gtag: {
|
||||||
trackingID: 'UA-141789564-1',
|
trackingID: 'UA-141789564-1',
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,7 @@ function Feedback() {
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout permalink={'/feedback'} description={'Docusaurus 2 Feedback page'}>
|
||||||
<div className="container margin-vert--xl" data-canny />
|
<div className="container margin-vert--xl" data-canny />
|
||||||
</Layout>
|
</Layout>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -65,7 +65,9 @@ function Home() {
|
||||||
const {siteConfig = {}} = context;
|
const {siteConfig = {}} = context;
|
||||||
|
|
||||||
return (
|
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']}>
|
||||||
<div className={styles['index-hero-inner']}>
|
<div className={styles['index-hero-inner']}>
|
||||||
<h1 className={styles['index-hero-project-tagline']}>
|
<h1 className={styles['index-hero-project-tagline']}>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue