ページに概要を設定するには

この記事では、 MDN Web Docs サイトにおける SEO summary (description または単に summary とも) を設定する方法を示します。この概要はいくつもの用途で使用されます。

• Google を始めとする検索エンジンで、ページを列挙し索引をつけるのに役立てるために使われます。
• 検索エンジンが検索結果ページにこの概要を表示して、読み手が自分のニーズに最も近いページを選択するための手助けになります。
• MDN のメニューや主題のランディングページが、記事の題名の下によくこの概要を表示し、こちらもユーザーが探している情報を見つけるための手助けになります。
• MDN 上のリンクでは、よく概要のテキストを含むツールチップを表示し、クリックして記事を読む前にユーザーに概要が見られるようにしています。

したがって、概要は記事自体の文脈でも、他の文脈内に単独で表示された場合でも、意味が分かるようにしてください。また、概要のテキストを書く際には MDN 執筆スタイルガイドを意識しておいてください。

既定の概要

概要のないページは、既定の概要が明確に設定されます。既定では、概要のテキストは、 HTML の最初の題名ではなくテキストの内容と見られるブロックのテキスト全体です。しかし、これが使用するのに最適なテキストとはならない可能性がいくつもあり得ます。

• 最初のテキストブロックが、有益な記事の内容の概要ではなく、余談や何らかの注意書きである場合。
• 最初のテキストブロックが内容の段落であるものの、良い記事の概要を含んでいない場合。
• テキストが長すぎる (または短すぎる) 場合。

明示的にページの概要を設定し、概要ができるだけ有益になるようにするのが最善です。

概要の設定

ページの概要の設定についての方法を見てみましょう。

どのような作業か

他の文脈で概要として使用するページ内のテキストをマークします。適切なテキストが利用できない場合は、適切な短いテキストを書く作業も含まれるかもしれません。

どこで行う必要があるのか

概要のないページ、概要があるが有益ではないページ、概要が推奨されるガイドラインに合っていないページです。

この作業で必要なスキル

MDN エディターが使えること。英語でよい文章を書くスキル。良い要約を書くために、主題に十分通じていること。

作業のステップ

1. 概要を設定するページを選択してください。すでにあるのであれば、素晴らしい！ステップ2まで飛ばしてください。そうでなければ、修正するページを探します。
   1. MDN 文書化状況のページで、よく知っている主題 (例えば HTML) の Sections の下のセクションをクリックします。
      
   2. 主題についての文書化ステータスのページで、Summary 表の Pages をクリックします。その主題の節にあるすべてのページの索引が表示されます。左の列にはページへのリンクが、タグと概要は右の列に表示されます。
      
   3. 概要がないか、概要が良くないページを選択します。
      
   4. リンクをクリックしてそのページへ移動します。
2. 概要を追加したいページに来たら、 編集 をクリックして、ページを MDN エディター内に開きます。エディターの使用についての情報が必要であれば、 MDN エディター UI のガイドを参照してください。
3. 文脈の外に出しても概要として使える1～2文を探します。必要であれば、1～2文でよい概要として選択できる文になるようテキストを作成または変更します。よい概要の作成を見ると、適切な概要を選択したり作成したりするのに役立ちます。
4. 概要として使用するテキストを選択します。
5. エディタツールバーの Styles ウィジェットで、 SEO Summary を選択します。ページのソースでは、選択したテキストが、 class="seoSummary" をつけた <span> 要素で囲まれます。
   
6. リビジョンのコメントをつけて変更を保存します。コメントは必須ではありませんが、付けることを強く推奨します。そうすることで、他の人が変更を追跡しやすくなります。付けるのを勧める。「SEO summary を設定」のようなものでも充分です。

よい概要の作成

概要は以下のような、多数の異なるシナリオで使用されます。

• Google を始めとする検索エンジンと同様に、 MDN の検索結果ページにおいて記事の説明として
• MDN 自身のメニューや主題のランディングページにおける説明として
• ユーザーがカーソルを MDN 上の記事へのリンクに当てた時のツールチップの中で

概要を作成する上で、これらのシナリオを念頭に置いておくことが重要です。これらの場面のすべてで概要がよく機能することを保証できるように、以下のガイドラインに従ってみてください。

• 概要はページの主題と種類の両方を示すようにしてください。例えば、「このガイドでは、現在画面上に表示されているアニメーションだけを更新するレスポンシブウェブアプリを作成するための Intersection Observer API の使い方を学習します。」は93文字で、どの技術を説明するのか、技術をどう使用するのか、この記事がチュートリアルであることを説明しています。
• 記事中のどの段落のどこにあるテキストを選択することもできますが、できれば最初の段落内 (または、場合によっては2段落目) にしてください。もし記事の要点がその段落にないのであれば、おそらくページの導入部を書き直す必要があるでしょう。
• 概要は記事の一部なので、記事本文の文脈内に合うようにする必要があります。
• 概要の中に他のページへのリンクを設置することが可能です。これは検索エンジンに渡される前に自動的に削除されるので、不利になることはありません。ツールチップとして使用される場合にも削除されます。 MDN のメニューやランディングページ内のページの説明として使用される場合は、とても便利なので、リンクは概要から削除されません。
• 概要には、ページに含まれる情報を探している人が検索する可能性が高い重要な用語を適切に選択して含める必要があります。 Intersection Observer API の例の場合、 API の名前、「アニメーション」、「表示されている」、「レスポンシブ」、「ウェブアプリ」などのキーワードがあります。
• 検索エンジン最適化 (SEO) のためには、概要から取得される値は150文字以下の長さにする必要があります。
• 通常、検索エンジンの結果ページ (SERP) には概要の160文字を超える部分が表示されないため、それより長い概要は避けてください。テキストを不意に切り落とすと、人々がリンクをクリックするのを思いとどまらせる可能性があります。
• ページ上で表示されない素晴らしい概要を書いて、 "hidden" クラスのブロック内で概要を非表示にするのは魅力的かもしれません。しかし、検索エンジンはユーザーには見えないテキストを無視するため、これは機能しません。

この概要は、本の裏表紙または表紙の内側の宣伝文句 (en:blurb) に似ていると考えてください。この短いテキストは、すばやく読者の注意を惹き、読み進める気を起させるものです。読者の注意をすばやくキャッチし、読者に読み進めてもらう必要があります。

検索エンジンの結果ページと記事テキスト自体の両方でうまく機能する概要を書くことは少し難しいかもしれませんが、現在 MDN はページの内容とは別に SEO 用の概要を作成する方法を提供していませんので、できる範囲でやってください。

関連情報

• どのように MDN Web Docs で SEO を考慮するか