検索エンジン最適化(SEO)

Docusaurusは、様々な方法で検索エンジン最適化をサポートします。

グローバルメタデータ

サイト構成を通じて、サイト全体のグローバルなメタ属性を提供します。メタデータはすべて、キーと値のペアをプロパティ名と値として使用して、HTMLの<head>にレンダリングされます。 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.

docusaurus.config.js
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の代替リンクが表示されます。

metaタグの種類については、MDNドキュメントをご覧ください。

シングルページメタデータ

グローバルメタデータと同様に、Docusaurusでは個々のページにメタ情報を付加することも可能です。 <head>タグの設定方法は、このガイドに従ってください。簡単に言うと次のようになります。

my-markdown-page.mdx
# 料理ガイド

<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>

内容...

Docusaurusは、description、title、正規のURLリンク、その他の有用なメタデータを自動的に追加します。 They are configurable through front matter:

---
title: 検索エンジンのためのタイトル; 実際の見出しと異なる場合があります
description: このページについての短い概要
image: ソーシャルメディアのカードとして表示されるサムネイル画像
keywords: [キーワード, 説名, 主な話題]
---

Reactのページを作成する際に、Layoutでこれらのフィールドを追加すると、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:

JSXページでは、Docusaurus <Head> コンポーネントを使用することができます。

my-react-page.jsx
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のルートごとに静的TTMLファイルを生成し、検索エンジンがコンテンツを発見しやすいようにします。

画像のメタ説明

画像のaltタグは、検索エンジンに画像の内容を伝えるもので、スクリーンリーダーを使用している場合など、画像が視覚的に確認できない場合や、画像が破損している場合に使用されます。 Altタグは、Markdownで一般的にサポートされています。

画像にタイトルを追加することもできます。これはSEOにはあまり影響しませんが、画像の上にカーソルを合わせるとツールチップとして表示されます。ヒントを提供するのに使われています。

![Docusaurusバナー](./assets/docusaurus-asset-example-banner.png '画像のタイトル')

http://localhost:3000

豊富な検索情報

Docusaurus ブログは、検索エンジンで最大の効果を得るために、リッチ検索結果を最初からサポートします。この情報は、ブログ及びグローバル設定のメタ情報に基づいて作成されます。リッチ検索情報の恩恵を受けるためには、記事の公開日、著者、画像などの情報を記入してください。メタ情報についてはこちらで詳しく解説しています。

Robotsファイル

robots.txtファイルは検索エンジンの動作を設定し、表示するべきページと表示するべきではないページを指定できます。静的アセットとして提供することができます。以下のようにすると、すべてのリクエストからすべてのサブページへのアクセスが可能になります。

static/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 metaタグについて詳しくはこちらをご覧ください。

サイトマップファイル

Docusaurusは@docusaurus/plugin-sitemapプラグインを用意しており、初期設定ではpreset-classic と共に同梱されます。これはsitemap.xmlファイルを自動生成します。これは https://example.com/[baseUrl]/sitemap.xmlでプロダクションビルドの後に利用可能になります。このサイトマップメタデータは、検索エンジンのクローラーがあなたのサイトをより正確に巡回するのに役立ちます。

ヒント

サイトマップ・プラグインは、noindex robots meta指示を含むページを自動的に除外します。

例えば、/examples/noIndexは次のようなページメタデータを含んでいるため、Docusaurusのsitemap.xmlファイルには含まれません。

<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.

構造化されたコンテンツ

検索エンジンは、ウェブページの構造を理解するのに、<h2>、<table>などのHTMLマークアップに依存しています。 Docusaurusがあなたのページをレンダリングするとき、<aside>、<nav>、<main>などの意味的マークアップは、ページの異なる区画を分割するために使用され、検索エンジンがサイドバー、ナビゲーションバー、主要なページコンテンツなどの区画を見つけるのに役立ちます。

ほとんどのCommonMark構文は対応するHTMLタグを持っています。プロジェクト内で一貫してMarkdownを使用することで、検索エンジンがページの内容を理解しやすくなります。

グローバルメタデータ​

シングルページメタデータ​

静的HTML生成​

画像のメタ説明​

豊富な検索情報​

Robotsファイル​

サイトマップファイル​

人間が読めるリンク​

構造化されたコンテンツ​