搜索引擎优化 (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. The metadata
attribute is a convenient shortcut to declare <meta>
tags, but it is also possible to inject arbitrary tags in <head>
with the headTags
attribute.
export default {
themeConfig: {
// Declare some <meta> tags
metadata: [
{name: 'keywords', content: 'cooking, blog'},
{name: 'twitter:card', content: 'summary_large_image'},
],
},
headTags: [
// Declare a <link> preconnect tag
{
tagName: 'link',
attributes: {
rel: 'preconnect',
href: 'https://example.com',
},
},
// Declare some json-ld structured data
{
tagName: 'script',
attributes: {
type: 'application/ld+json',
},
innerHTML: JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
}),
},
],
};
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" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
})}
</script>
</head>
Some content...
Docusaurus automatically adds description
, title
, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
---
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.
The official plugins all support the following front matter: title
, description
, keywords
and image
. Refer to their respective API documentation for additional front matter support:
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" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
})}
</script>
</Head>
{/* ... */}
</Layout>
);
}
For convenience, the default theme <Layout>
component accept title
and description
as props.
Static HTML generation
Docusaurus 是一个静态网站生成器——每个 URL 路径都会静态生成对应的 HTML 文件,这有助于搜索引擎更容易地找到你的内容。
Image meta description
图片的 alt 标签会告诉搜索引擎图片的内容,同时它也用在图片无法通过视觉被观看时,比如使用屏幕阅读器,或者 图片损坏时。 Markdown 广泛地支持 alt 标签。
你也可以给图片添加一个 title——这不太会影响 SEO,不过会在鼠标悬停在图片上的时候显示浮窗,通常用于提供提示信息。
![Docusaurus banner](./assets/docusaurus-asset-example-banner.png '图片标题')