搜索引擎优化 (SEO)
Docusaurus支持以多种方式进行搜索引擎优化。
Global metadata
Provide global meta attributes for the entire site through the site configuration. The metadata will all be rendered in the HTML <head>
using the key-value pairs as the prop name and value.
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"/> in the generated HTML
},
};
Docusaurus 添加了一些开箱即用的元数据。 For example, if you have configured i18n, you will get a hreflang
alternate link.
To read more about types of meta tags, visit the MDN docs.
Single page metadata
Similar to global metadata, Docusaurus also allows for the addition of meta-information to individual pages. Follow this guide for configuring the <head>
tag. 一言以蔽:
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog"/>
</head>
Some content...
Docusaurus automatically adds description
, title
, canonical URL links, and other useful metadata to each Markdown page. 可以用前言进行配置:
---
title: 给搜索引擎看的标题;可能和正文标题不一样
description: 关于此页的简短描述
image: 在社交媒体卡片中显示的缩略图
keywords: [描述, 中心的, 关键词]
---
When creating your React page, adding these fields in Layout
would also improve SEO.
Prefer to use front matter for fields like description
and keywords
: Docusaurus will automatically apply this to both description
and og:description
, while you would have to manually declare two metadata tags when using the <head>
tag.
For JSX pages, you can use the Docusaurus <Head>
component.
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function page() {
return (
<Layout title="Page" description="A React page demo">
<Head>
<meta property="og:image" content="image.png" />
</Head>
{/* ... */}
</Layout>
);
}