検索エンジン最適化(SEO)
Docusaurusは、様々な方法で検索エンジン最適化をサポートします。
グローバルメタデータ
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.
シングルページメタデータ
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.
静的HTML生成
Docusaurusは静的サイトジェネレーターです。URLのルートごとに静的TTMLファイルを生成し、検索エンジンがコンテンツを発見しやすいようにします。
画像のメタ説明
画像のaltタグは、検索エンジンに画像の内容を伝えるもので、スクリーンリーダーを使用している場合など、画像が視覚的に確認できない場合や、画像が破損している場合に使用されます。 Altタグは、Markdownで一般的にサポートされています。
画像にタイトルを追加することもできます。これはSEOにはあまり影響しませんが、画像の上にカーソルを合わせるとツールチップとして表示されます。ヒントを提供するのに使われています。
豊富な検索情報
Docusaurus blogs support rich search results out-of-the-box to get maximum search engine experience. この情報は、ブログ及びグローバル設定のメタ情報に基づいて作成されます。 リッチ検索情報の恩恵を受けるためには、記事の公開日、著者、画像などの情報を記入してください。 Read more about the meta-information here.
Robotsファイル
A robots.txt file regulates search engines' behavior about which should be displayed and which shouldn't. You can provide it as static asset. 以下のようにすると、すべてのリクエストからすべてのサブページへのアクセスが可能になります。
User-agent: *
Disallow:
Read more about the robots file in the Google documentation.
Important: the robots.txt file does not prevent HTML pages from being indexed.
To prevent your whole Docusaurus site from being indexed, use the noIndex site config. Some hosting providers may also let you configure a X-Robots-Tag: noindex HTTP header (GitHub Pages does not support this).
To prevent a single page from being indexed, use <meta name="robots" content="noindex"> as page metadata. Read more about the robots meta tag.
サイトマップファイル
Docusaurus provides the @docusaurus/plugin-sitemap plugin, which is shipped with preset-classic by default. It autogenerates a sitemap.xml file which will be available at https://example.com/[baseUrl]/sitemap.xml after the production build. このサイトマップメタデータは、検索エンジンのクローラーがあなたのサイトをより正確に巡回するのに役立ちます。
The sitemap plugin automatically filters pages containing a noindex robots meta directive.
For example, /examples/noIndex is not included in the Docusaurus sitemap.xml file because it contains the following page metadata:
<head>
<meta name="robots" content="noindex, nofollow" />
</head>
人間が読めるリンク
Docusaurus uses your file names as links, but you can always change that using slugs, see this tutorial for more details.
構造化されたコンテンツ
Search engines rely on the HTML markup such as <h2>, <table>, etc., to understand the structure of your webpage. When Docusaurus renders your pages, semantic markup, e.g. <aside>, <nav>, <main>, are used to divide the different sections of the page, helping the search engine to locate parts like sidebar, navbar, and the main page content.
Most CommonMark syntaxes have their corresponding HTML tags. プロジェクト内で一貫してMarkdownを使用することで、検索エンジンがページの内容を理解しやすくなります。