WordPress の検索スニペットに説明文を表示する ~プラグイン不要、テーマ書き換え無し~

Google 検索などで WordPress の投稿が検索された際に、検索結果のスニペット(文章の部分)は、基本的には検索エンジンが本文の内容から抽出して作成します。

ですが、ここに自作の文章を表示できれば、投稿の内容がもっと伝わりやすいものになりそうなので、自分のサイトで実装してみました。

こんな風に自動で設定される文章を・・・
自分で考えた説明文にした方がわかりやすい!

SEO 対策系の WordPress プラグインを使っても実現できるのですが、もっとシンプルに実現したいと思いました。
というわけで、「プラグイン非使用で、テーマファイルへの影響がない」やり方で実装したので、その方法をまとめておきます。

検索エンジンに自作の文章を教えるには

HTML の <head> タグ内に「メタ ディスクリプション」(<meta name="description" content="説明文" />)を追加します。こうしておけば、そのうち検索エンジンが情報を拾ってスニペットに表示してくれる可能性があります。

<html>
  <head>
    <!-- 
    この部分がメタ ディスクリプション。
    本当はもうちょっと長い文章の方が良いですが、これは例として。
    -->
    <meta name="description" content="私の大好きなゲームである「ピクミン」シリーズについての紹介です。">
  </head>
</html>

文章を WordPress のどこに設定するか

「文章をそもそもどこに設定・保存しておくのか?」ですが、各投稿の「抜粋」欄に設定することにしました。

WordPress の公式ドキュメントによると、「抜粋」は投稿の要約を示すということなので、まさに目的通りの項目だと思います。それに、標準機能だけで実現できるもの良い点です。

投稿の「抜粋」

実現方法

子テーマの 📄functions.php📁wp-content\themes\<子テーマフォルダー>)に、次のプログラムを追加するだけです。

const SITE_DESCRIPTION = '★ホームページとフロントページに設定する、サイト自体の説明をここに設定します。★';

function wp_head_add_meta_description()
{
    $description = null;

    if (is_singular()) {
        // 投稿または固定ページの場合、抜粋が設定されていればそれを採用します。
        if (has_excerpt()) {
            $description = get_the_excerpt();
        }
    } elseif (is_category()) {
        // カテゴリー ページの場合、カテゴリーの説明が設定されていればそれを採用します。
        $category_description = trim(strip_tags(category_description()));
        if ($category_description !== '') {
            $description = $category_description;
        }
    } elseif (is_tag()) {
        // タグ ページの場合、タグの説明が設定されていればそれを採用します。
        $tag_description = trim(strip_tags(tag_description()));
        if ($tag_description !== '') {
            $description = $tag_description;
        }
    } elseif (is_home() || is_front_page()) {
        // ホーム ページまたはフロント ページの場合は、独自に指定した内容を採用します。
        $description = SITE_DESCRIPTION;
    }

    // 上の処理の結果、説明文が取得できた場合のみ、<meta> タグを出力します。
    if (!is_null($description)) {
        echo "\n" . '<meta name="description" content="' . esc_attr($description) . '" />' . "\n";
    }
}

// 上で作成した関数 (アクション) を、WordPress に登録します。
add_action('wp_head', 'wp_head_add_meta_description');

もし抜粋が設定されていない場合は、単に <meta name="description" ... /> タグを出力しない(つまり、何も起こらない。エラーにもならない)作りになっています。ですので、まだ抜粋を設定していない場合は、先にプログラムを組み込んでおいてから、その後各記事にぼちぼち抜粋を設定していく・・・という流れでもいいと思います。

一応、投稿以外のページにも対応しています。詳細は次の通りです。

カテゴリー ページ

カテゴリー ページは、カテゴリーのリンクを押したときに表示されるページです。このページでは、表示中のカテゴリーに対して設定された「説明」を、メタ ディスクリプションとして使用するようにしました。

カテゴリーの「説明」

タグ ページ

タグ ページは、タグのリンクを押したときに表示されるページです。このページでは、表示中のタグに対して設定された「説明」を、メタ ディスクリプションとして使用するようにしました。

カテゴリーの「説明」

ホームページ/フロントページ

こちらは、当初、サイトの「キャッチフレーズ」を使用すればいいかなぁと考えたのですが、ちょっと説明文としては短すぎる気がしたので、プログラムに直接指定する方式としました。

プログラムの細かい説明

カテゴリーおよびタグの説明文を取得する処理

プログラム内の、次の部分についてです。

// カテゴリーに設定された説明を取得します。
$category_description = trim(strip_tags(category_description()));
if ($category_description !== '') {
    $description = $category_description;
}

この部分は、category_description() という WordPress 組み込みの関数を使って、カテゴリーに設定された説明を取得しています。そして、もし説明が設定されている(=変数 category_description が空文字列ではない)場合のみ、その文章を採用します。

ところで、取得した文章に対して strip_tags() 関数と trim() 関数でさらに加工していますが、これは文章の内容が単なるテキストではなく、

<p>私の大好きなゲームのレビューや、攻略情報などを紹介するカテゴリーです。
</p>

というように <p> タグや改行を含んでいるからです。今回はページに表示するわけではなく、タグや改行は不要(むしろ邪魔)なので、それを除去しています。

ちなみにこの <p> タグは、WordPress の wpautop というフィルターによって付与されているので、このフィルターを除去するという方法もあったりします。

しかし、このフィルターを除去してしまうと、ページに表示されるカテゴリーの説明文にまで影響が及んでしまいます。ですので、今回の目的だけのためにフィルターを除去するのは避けたいと思い、プログラムで処理するようにしました。

// ちなみに、<p> タグを自動的に付与するフィルターを除去するやり方はこんな感じです。
// だがしかし、この方法だと説明文を表示する場合にも影響が出てしまいます。
// もしそれでも問題が無いなら、このやり方でも OK!
remove_filter('category_description','wpautop');

タグの説明を取得する処理も、カテゴリーと全く同じ考え方です。

おまけ:採用しなかった方法について

蛇足かもしれませんが、採用しなかった方法について、理由と合わせて書いておきます。

①SEO 対策系の WordPress プラグインを使う:ちょっと大げさすぎる・・・

SEO 対策系の WordPress プラグインを導入済みであれば、おそらくそのプラグインに機能が用意されているはずなので、それを利用すれば OK です。

ですが、それ系のプラグインは、サイト全体に影響を及ぼすことから設定項目が多岐にわたっていて、ちょっとヘビーな感じ・・・😅単に投稿に説明文を追加したいだけのシンプルな目的で導入するのはしんどいなと感じました。

②ヘッダーの HTML を直接編集する:テーマが更新されたときに消えてしまうかも

プラグインを使わないとなると、何らかの方法で自前で <head> タグ配下を編集する必要が出てきます。ここで、<head> タグは 📄header.php📁wp-content\themes\<テーマフォルダー> )というテンプレート ファイルに記載されているため、そのファイルを編集すれば、やりたいことは実現可能です。

ですが、このファイルを直接編集しても、テーマ自体が更新されたときにファイルが上書きされ、カスタマイズ内容が消えてしまうので、この方法も避けました。

③子テーマのヘッダーの HTML を編集する:親テーマの更新内容が反映されなくなる

テーマが更新されたときにカスタマイズ内容が消えてしまうのを避けるために、子テーマ側に 📄header.php を作成して、そちらを編集したうえで配置しておくという方法があります。こうすれば、親テーマの 📄header.php の内容を、子テーマの 📄header.php の内容で上書きしてくれるみたいです(実際に試して確認したわけではないので、間違っていたらすみません)。

ですが、今回このやり方も採用しませんでした。理由は、親テーマが更新されて、親テーマ側の 📄header.php に今回の一件とは関係ない部分で何か変更や修正などが入ったとしても、子テーマ(自作)側の 📄header.php で丸々上書きしてしまうからです。

あくまで今回メタ ディスクリプションを追加するだけが目的なので、それ以外の個所について親テーマに更新があればそれを反映して欲しいと思いました。

それで、最終的にたどり着いたのが、プログラムで編集するという方法でした。

①~③のやり方ではダメなのか?

①~③のやり方でも、影響を認識した上でやりやすい方法を採用するということで全然 OK だと思います。

特に、プラグインをすでに導入済みであれば、素直にそっちを使った方が絶対良いと思います。

おまけ:メタ ディスクリプションは確実に採用されるわけではないけど・・・

メタ ディスクリプションを設定しておけばスニペットに採用される「可能性がある」のですが、必ず採用されるわけではないです。実際のところ、スニペットに何を表示するのかについては、検索エンジンの種類(Google 検索や Bing 検索など)によって事情が異なるようです。

また、説明文の内容が適切かどうか(きちんと本文の要約になっているか)というところもチェックされてるみたいです。

同じ投稿なのに、検索キーワードによってスニペット内容が違っていることもありました。

ただ、実際に私がメタ ディスクリプションを設定したページでは、数日後にスニペットが書き換わりました。スニペットを設定する上で重視されることは間違いなさそうなので、何も設定しないよりは、設定しておいた方が良いと思いました。

ちなみに、Google のドキュメントに「質の高いメタ ディスクリプションを作成するためのおすすめの方法」が記載されていたので、参考にしています。

kpdn

お寿司とゲームと動物が好きな、フリーランスのエンジニアです。フロントエンドからインフラまで日々奮闘中です。最近は物忘れがどんどんがひどくなってきました。

コメントを残す