検索エンジン最適化（SEO）
Docusaurusは、さまざまな方法で検索エンジン最適化をサポートしています。
グローバルメタデータ
サイト設定 を通じて、サイト全体にグローバルメタ属性を提供します。メタデータはすべて、キーと値のペアをプロパティ名と値として使用して、HTMLの <head> にレンダリングされます。 metadata 属性は <meta> タグを宣言するための便利なショートカットですが、headTags 属性を使用して <head> に任意のタグを挿入することも可能です。
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は、いくつかのメタデータをすぐに追加します。たとえば、i18n を設定している場合、hreflang 代替リンクを取得します。
メタタグの種類について詳しくは、MDNドキュメントをご覧ください。
単一ページメタデータ
グローバルメタデータと同様に、Docusaurusでは個々のページにメタ情報を追加することもできます。 <head> タグの設定については、このガイドに従ってください。要約すると
# 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は、各Markdownページに description、title、正規URLリンク、その他の役立つメタデータを自動的に追加します。これらはfrontmatterで設定できます。
---
title: Title for search engines; can be different from the actual heading
description: A short description of this page
image: a thumbnail image to be shown in social media cards
keywords: [keywords, describing, the main topics]
---
Reactページを作成する場合、Layout にこれらのフィールドを追加すると、SEOも改善されます。
description や keywords のようなフィールドには、frontmatter を使用することをお勧めします。Docusaurusはこれを description と og:description の両方に自動的に適用しますが、<head> タグを使用する場合は、2つのメタデータタグを手動で宣言する必要があります。
公式プラグインはすべて、次の frontmatter をサポートしています: title、description、keywords、image。追加の frontmatter サポートについては、それぞれのAPIドキュメントを参照してください。
JSXページでは、Docusaurusの <Head> コンポーネントを使用できます。
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>
);
}
便宜上、デフォルトテーマの <Layout> コンポーネントは、title と description をプロパティとして受け入れます。
静的HTML生成
Docusaurusは静的サイトジェネレーターです。すべてのURLルートに対してHTMLファイルが静的に生成されるため、検索エンジンがコンテンツをより簡単に検出できるようになります。
画像のメタディスクリプション
画像のaltタグは、検索エンジンに画像の内容を伝え、画像を視覚的に確認できない場合（スクリーンリーダーを使用している場合や画像が壊れている場合など）に使用されます。altタグは、Markdownで一般的にサポートされています。
画像にタイトルを追加することもできます。これはSEOにはあまり影響しませんが、画像の上にマウスを置いたときにツールチップとして表示され、通常はヒントを提供するために使用されます。
リッチ検索情報
Docusaurusブログは、最高の検索エンジンエクスペリエンスを得るために、リッチ検索結果をすぐにサポートしています。情報は、ブログ/グローバル設定のメタ情報に応じて作成されます。リッチ検索情報のメリットを得るには、投稿の公開日、作成者、画像などの情報を入力してください。メタ情報についてはこちらをご覧ください。
robotsファイル
robots.txt ファイルは、どのページを表示し、どのページを表示しないかについて、検索エンジンの動作を規制します。静的アセットとして提供できます。以下は、すべてのリクエストからのすべてのサブページへのアクセスを許可します。
User-agent: *
Disallow:
robotsファイルについては、Googleのドキュメントをご覧ください。
**重要**: robots.txt ファイルは、HTMLページがインデックスされるのを**防ぎません**。
Docusaurusサイト全体のインデックス作成を防ぐには、noIndex サイト設定を使用します。一部のホスティングプロバイダーでは、X-Robots-Tag: noindex HTTPヘッダーを設定できる場合もあります（GitHub Pagesはこれをサポートしていません）。
単一ページのインデックス作成を防ぐには、ページメタデータとして <meta name="robots" content="noindex"> を使用します。robotsメタタグについて詳しくお読みください。
サイトマップファイル
Docusaurusは、デフォルトで preset-classic に同梱されている @docusaurus/plugin-sitemap プラグインを提供しています。これは、本番ビルド後に https://example.com/[baseUrl]/sitemap.xml で利用できる sitemap.xml ファイルを自動生成します。このサイトマップメタデータは、検索エンジンクローラーがサイトをより正確にクロールするのに役立ちます。
サイトマッププラグインは、noindex robotsメタディレクティブを含むページを自動的に除外します。
たとえば、/examples/noIndex は、次の ページメタデータ を含んでいるため、Docusaurus sitemap.xmlファイル に含まれていません。
<head>
<meta name="robots" content="noindex, nofollow" />
</head>
人間が読めるリンク
Docusaurusはファイル名をリンクとして使用しますが、スラッグを使用していつでも変更できます。詳細はチュートリアルをご覧ください。
構造化コンテンツ
検索エンジンは、<h2>、<table> などのHTMLマークアップを使用して、Webページの構造を理解します。Docusaurusがページをレンダリングするとき、セマンティックマークアップ（例：<aside>、<nav>、<main>）が使用され、ページの異なるセクションが分割されます. これにより、検索エンジンがサイドバー、ナビゲーションバー、メインページコンテンツなどの部分を特定しやすくなります.
ほとんどのCommonMark構文には、対応するHTMLタグがあります。プロジェクトでMarkdownを一貫して使用することで、検索エンジンがページコンテンツを理解しやすくなります。