ワードプレステーマCocoonの抜粋とメタディスクリプション

このページでは、ワードプレステーマCocoonの抜粋とメタディスクリプションとの違いを使いこなす方法をお伝えしています。Cocoonでは抜粋を装飾できる機能があるので、それも紹介します。

Cocoonをwordpressテーマに設定している前提で話を勧めます。

Cocoonの抜粋とメタディスクリプションとの違い
Cocoonの抜粋とメタディスクリプションの反映場所
Cocoonの抜粋を使いこなす

Cocoonの抜粋とメタディスクリプションとの違い

Cocoonには「抜粋」と「メタディスクリプション」とを明確に分けています。ワードプレス管理画面の右上「表示オプション」を開いてみてください。

次のように「SEO設定」と「抜粋」が存在します。

Cocoonの抜粋とメタディスクリプションとの違い

両者にチェックを入れます。

すると次のように管理画面で操作できるようになります。

Cocoonの抜粋とメタディスクリプションとの違い

「抜粋」は独立し、「メタディスクリプション」は「SEO設定」に属しています。

このうち「抜粋」には簡単なテキスト装飾や文章リスト化などの改変ができます。これに対して「メタディスクリプション」は単純にテキスト形式の文字列を入れるだけになっています。

「抜粋」や「メタディスクリプション」は、そもそもブログガードや検索エンジンに表示される文章のことです。たいていは、記事内容の概要や冒頭部分の文章が表示されます。

ブログカードでの表示（スニペット＝抜粋文部分）はこんな感じです。

Cocoonの抜粋とメタディスクリプションとの違い

検索エンジンでの表示はこんな感じです。

Cocoonの抜粋とメタディスクリプションとの違い

検索エンジン結果の表示を私たちが弄ることはできません。上の結果のうち「森本六爾」が太字になっているのは私が太字指定をしたのではなく、検索エンジンが検索文字列を分かりやすくように太字にしているだけです。

Cocoonの抜粋とメタディスクリプションの反映場所

検索エンジンの結果に、自分のサイト記事の文章を装飾はできません。ですから、勝負どころは検索エンジンに記される約120文字の文章を読ませてサイトへ誘導するように書くことです。

ここで、記事投稿の管理画面を見てみましょう。「メタディスクリプション」には次のような説明が付されています。

「記事の説明を入力してください。日本語では、およそ120文字前後の入力をおすすめします。スマホではそのうちの約50文字が表示されます。こちらに入力したメタディスクリプションはブログカードのスニペット（抜粋文部分）にも利用されます。こちらに入力しない場合は、「抜粋」に入力したものがメタディスクリプションとして挿入されます。

スニペット（抜粋文部分）と検索エンジン結果文章において、「抜粋」と「メタディスクリプション」との優劣を明確にしておきます。

スニペット（抜粋文部分）と検索エンジン結果文章は

「抜粋」と「メタディスクリプション」の両方を入力している場合、スニペットにも検索エンジンにも「メタディスクリプション」が反映される。
「抜粋」を入力して「メタディスクリプション」を入力していない場合、前者がスニペットにも検索エンジンへも反映される。ただし「抜粋」の文字装飾は検索エンジンでは無視される。
「抜粋」を入力せずに「メタディスクリプション」を入力している場合、後者がスニペットにも検索エンジンへも反映される。
「抜粋」と「メタディスクリプション」の両方を入力していない場合、スニペットにも検索エンジンにも、記事の冒頭文章が反映される。

Cocoonの抜粋を使いこなす

以下に紹介するテキスト装飾を用いると、アーカイブページ（記事一覧の画面）で表示が崩れることがあります。原因はテーマ（Cocoon）にあるか、プラグインによるものか、私のCocoon設定にミスがあるか付きとめていません。表示崩れを避けるために私自身は抜粋を装飾することを止めています。（2020年3月15日追記）

先述のとおり「メタディスクリプション」の勝負どころは約120文字の文章をどう書くかにあります。

これに対してテキスト装飾機能を少しだけ備えた「抜粋」は、サイトへ来た方に対してブログカードで分かりやすく装飾するように使うこともできます。

私は面倒くさがりなので「メタディスクリプション」を「抜粋」にコピペしているだけ、このコピペすら不要かとも思っています。

でも、「抜粋」のテキスト装飾を頑張れば、次のようなスニペットを作ることができます（赤枠の中の緑枠）。条件は「メタディスクリプション」を空白にすることです。