📑

Wordpressのトップページ・記事一覧の各記事にYoast SEOのメタディスクリプションの情報をフロントに反映した話

2021/11/17に公開

こんにちはうえむーです。

今回はWordpressのSEO系のプラグインの一つでありますYoast SEOの設定した項目をトップページ・記事一覧ページの各記事にフロント表示したいと思います。

そもそもYoast SEOとは何か?

Yoast SEOは、WordPressの内部SEO対策をサポートしてくれるプラグインです。
適切な内部SEO対策により、検索エンジンにコンテンツの内容を正しく伝えることができ、結果として検索順位が上昇します。

例えば、Yoast SEOを使うと、次のようなSEO対策機能を利用することができるみたいです。

・コンテンツのSEO解析
・XMLサイトマップ
・タイトルタグ
・メタディスクリプション
・構造化データ
・カテゴリー構造
・パンくずリスト
・robots.txt/.htaccess

Yoast SEOの情報のフロント出力可否調査

クライアントさんからの要望でトップページ・記事一覧の記事の説明文(キャプチャー1)をYoast SEOで設定したdescriotion(キャプチャー2)の情報をフロントに掲載してほしいと依頼を頂いたので早速調査しました。

キャプチャー1

キャプチャー2

調査した所、以下の記事にYoast SEOの各記事に投稿した情報をフロントに反映するタグ情報が記載されていたので、これを参照にして実装しました。

https://in-visible.net/blog/wordpress-seo-by-yoastの設定した項目を表示する/

実装

記事のモジュールテンプレートは「loop.php」なのでこのファイルを編集しました。
変更前・変更後のコードは以下になります。

変更前

<p class="phrase phrase-secondary">
<?php echo get_the_excerpt(); ?>
</p>

変更後

<p class="phrase phrase-secondary phrase_loop">
<?php 
    switch(true) {
        case ( strlen( 
                get_post_meta(
                    get_the_ID(),
                    '_yoast_wpseo_metadesc',
                    true
                )
             ) > 0):
            echo get_post_meta(
                    get_the_ID(),
                    '_yoast_wpseo_metadesc',
                    true
                );
            break;
        default:
            echo get_the_excerpt();
            break;
    }
?>
</p>

変更後のコードのロジックは各記事のYoast SEOのメタディスクリプションの文字列が1バイト以上の場合は、Yoast SEOのメタディスクリプションの情報を出力させ、0バイトの場合は、記事内容の一部を出力するように記述し無事要望通りに反映されました。

ぜひ、参考にしてみてください。

参考記事
https://blog-bootcamp.jp/start/wordpress-yoastseo/

Discussion