【Astro】WordPressで投稿した記事のmeta KeywordやDescriptionをどう取得するか

TEDASKのToshi Seitoです。

WordPressでブログを投稿している場合、少なからずSEOを目的としている場合があります。

SEOをする場合、コンテンツが最も大事であることは周知の事実ですが、metaタグでも特にDescriptionを設定している方も多いかと思います。

今回は、WordPressにAstroを導入した場合、meta KeywordやDescriptionがそもそも取得できるのか、どのように対策するべきかを共有したいと思います。

プラグインのAll in one SEOを使うことでmetaタグ情報が取得できる

まずひとつの方法として、WordPressのSEOプラグインで有名なAll in one SEOを使っている場合、metaタグの情報をREST APIでも取得することができます。

しかしながら注意が一つ必要です。

画像のようにAll in one SEOには、「投稿コンテンツ」のように、タグで本文の情報を入れ込むことが出来るようになっていますが、このタグで入力している場合は、残念ながらREST APIではテキスト情報を取得できません。

つまり、このメタディスクリプションの入力欄に直書きしてないと、REST APIでデータは取得できないということです。

ですので、もしすべての記事においてこの投稿コンテンツタグで入力している場合は、これから直書きで対応するか、別の対応を検討する必要があります。

All in one SEOを使っていない場合の代替案

もしAll in one SEOを使っていない場合や、先程話した通りメタディスクリプションの入力欄にタグで入力してしまっている場合には、他の対策が必要です。

excerptのrenderedのデータをメタディスクリプションに設定する

まず一番簡単なのは、WordPressの投稿をすると自動で生成されるexceptという先頭から数文字だけ切り出したようなデータが取得できます。

ただし、このexceptデータは画像の通りhtmlタグが含まれたデータのため、htmlタグを取り除く処理は必要になります。

とはいえAstro（JavaScript）側で正規表現（Replace関数）などを使えば、わずか数行の処理で綺麗にタグを剥がすことができます。開発の手間としてはそこまで大きくありません。（先頭からのテキストデータのため頭からの文章になります。）

テーマのSEO設定情報をREST APIに含めて取得する

もしお使いのテーマにSEOの設定情報（メタディスクリプションやキーワード）を入れることが出来る場合は、functions.phpでREST APIにそのカスタムフィールド情報を含めることで、SEO関連データを取得することができます。

テーマの例としては、例えばCocoonやAffinger、Emanonなどでしょうか。

SEO関連のデータのキーを確認するために以下をテーマのfunctions.phpにいれてREST APIにアクセスします。

add_filter('rest_prepare_post', function($response, $post, $request) {
    $response->data['debug_all_meta'] = get_post_meta($post->ID);
    return $response;
}, 10, 3);

必要なキーが割り出せたら

add_action('rest_api_init', 'tedask_register_test_meta_to_rest');
function tedask_register_test_meta_to_rest() {
    // DescriptionをAPIの第一階層（custom_meta_description）に露出させる
    register_rest_field('post', 'custom_meta_description', array(
        'get_callback' => function($post_array) {
            // 前のコードで確認したキー名から値を取得
            return get_post_meta($post_array['id'], '{取得したキー名}', true);
        },
        'update_callback' => null,
        'schema'          => null,
    ));
}

これで、REST APIにデータを送ることができます。

SEOデータはOGPにも流用できる

今回はメタディスクリプションを中心に説明していますが、SNSでシェアされたときに表示されるOGP画像や、ページの説明などは、今回のSEOデータを流用できます。

• og:title → 記事タイトル（post.title.rendered）で代替
• og:description → All in One SEO のメタディスクリプションなど
• og:image → アイキャッチ画像（post.featured_imageなど）

と言った感じで、SEOだけでなくOGPにも流用ができるので、設定を忘れないようにしましょう。

まとめ

WordPressをAstro化して静的サイトに生まれ変わらせても、これまでに蓄積してきたSEOの設定（メタディスクリプション等）が消えてしまうことで、多少なりともサイトに変化が出てしまいます。

可能な限り元のサイトのまま引き継ぐために、あらかじめSEO関連データをREST APIで取り出せるかは確認が必要です。

もし、SEO関連データでの取得についてなにか新しい情報があれば追記していこうと思っています。