[試] meta description(メタデスクリプション)の有効活用 | トップページ各記事の説明文に使用する方法

[試] meta description(メタデスクリプション)の有効活用 | トップページ各記事の説明文に使用する方法

こんにちは、@marubon_jpです。

今回は、WordPressを使用しているブログ等のトップページで、各記事の説明文として、metaタグのdescriptionを使用する方法を紹介します。

SPONSORED LINK

アウトライン

本エントリのアウトラインです。

meta description(メタデスクリプション)とは

descriptionとは、一言で説明するとページの説明文です。descriptionは、以下の様にヘッドセクションにmetaタグを追加することにより設定できます。SEOの観点から推奨されており、使用されている方も多いと思います。

詳細については、以下のヘルプを参考にして下さい。

メタ タグ – ウェブマスター ツール ヘルプ
サイトのタイトルと説明 – ウェブマスター ツール ヘルプ

 <meta> タグ内のメタデータ(descriptions)属性を使用すると、各ページのコンテンツを人が読める形式で簡潔にまとめた概要を提供することができます。

出典: サイトのタイトルと説明 – ウェブマスター ツール ヘルプ

 

トップページの各記事の説明文にmeta description(メタデスクリプション)を使用するメリット

meta descriptionを使用するメリットは、2つあります。これらを考慮すると、各記事への入り口(各記事への羅針盤)となるトップページに付加する各記事の説明文としては、meta descriptionの内容がより適切といえます。

記事の概要を読者にわかりやすく伝える

通常トップページの記事のリストに付加する説明文は、本文の抜粋を使用されている方が多いかと思います。しかしながら、抜粋はその記事の内容を端的にわかりやすく説明したものではなく、閲覧者が記事の概要を知る上で最良とはいえません。

一方で、meta descriptionを用いれば、著者が意図した記事の概要、要約(事前に著者が作成する必要あり)を正確に伝えることができます。読者としても、その記事が何を言わんとしているのか端的に把握できるメリットがあります。

重要な文章(キーワード)を含む要約文によるSEO対策強化

meta descriptionは、執筆者が自らまとめた記事の要約文であるため、一般的に重要な文章(キーワード等)が含まれており、単なる文章の抜粋と比較してSEO対策の強化にもつながります。

meta description(メタデスクリプション)を表示する方法

定義済みのmeta descriptionの値を取得し、トップページの各記事の概要として表示する方法を解説します。

前提となる構成

この方法はWordPressのプラグインであるAll in One SEO Packを使用していることが条件となります。この手法が、All in One SEO Packを通して定義した各記事のmeta descriptionのデータを使用する仕様だからです。

All in One SEO Packは、以下からダウンロードできます。このプラグインを使用したmeta descriptionの定義方法については、わかりやすく解説してくれているサイトが多数あるので、そちらを参照してみて下さい。

WordPress › All in One SEO Pack « WordPress Plugins

meta descriptionを表示するコード

meta descriptionを表示するためには、使用中のWordPressテーマの記事の概要表示部分を以下のコードで置き換えるか追記します。尚、修正が必要なphpファイルは、テーマに依存するのでコードを読み込んで直接探すか、テーマ提供元のヘルプ、Q/A等で確認して下さい。

このコードのロジックは、All in One SEO Packを通して定義されたdescriptionが存在する場合は、descriptionを表示し、存在しない場合は、記事の抜粋(先頭から90文字)を表示する内容となっています。

descriptionが存在しない場合に抜粋を用いているのは、descriptionの定義を忘れた場合に概要が非表示となるのを回避するためです。

本質的な部分のみ抜粋して解説します。All in One SEO Packで定義されたdescriptionを取得するコードは以下の部分です。上述したコードは、これを応用した一例なので、適宜修正して使用して下さい。

トップページの各記事の概要にmeta descriptionを使用した例

上記コードを使用すると、以下の当ブログのTOPページの様にmeta descriptionが表示されます。

meta descriptionの表示例

まとめ

トップページの各記事の説明文にmeta descriptionを使用する方法を紹介しました。

  • 記事の説明文には、meta descriptionを使用した方がわかりやすい
  • WordPressのプラグインであるAll in One SEO Packのmeta descriptionのデータを活用