WordPress：OGPタグをプラグインなしで挿入する

過去記事「WordPress：プラグインなしでカスタムフィールドを追加する」ではカスタムフィールドを使ってメタディスクリプション、メタキーワードを head 内に挿入しましたが、同時に OGP タグも挿入しようと思います。

「テーマをゼロから作ってみる」プロジェクトの追加補足です。

• ゼロから作るWordPressテーマ
• get_imz_metadata
• メタ OGP タグの追加挿入
• OGP タグのチェック

01ゼロから作るWordPressテーマ

現在は Genesis Framework を使って構築しているサイト「そんなには褒めないよ。映画評」のテーマをゼロから作ってみようというプロジェクトです。

• ゼロから作るWordPressテーマ

サイト構成は、基本ブログですので日々書いていく映画のレビューである個別記事中心のサイトです。ですので、現在のサイト構成は次のようになっています。

• ホームページ（個別ページ, front_page.php）
• 投稿ページ（single.php）
• ブログページ（個別ページ, index.php）
• カテゴリーページ（index.php）

という条件下でやっていますので、汎用にするにはどのコードも少し手を加える必要があります。

02get_imz_metadata

これまでは、次のコードでメタディスクリプション、メタキーワードを入れていました。

function get_imz_meta_description($id){
    $description = get_post_meta($id, '_imz_description', true);
    $keywords = get_post_meta($id, '_imz_keywords', true);
    if($description){
        echo '<meta name="description" content="' . esc_attr($description) . '" />' . PHP_EOL;   メタ
    }
    if($keywords){挿入
        echo '<meta name="keywords" content="' . esc_attr($keywords) . '" />' . PHP_EOL;
    }        
}

HTML出力は、

<?php get_imz_meta_description(get_the_ID()); ?>

としていました。

03メタ OGP タグの追加挿入

これをアクションフック wp_head を使って挿入する方法に変更します。

OGP タグの挿入は、ホームページと投稿記事のみです。また、ホームページは個別ページをあてていますので、タイトル、ディスクリプション、キーワードはカスタムフィールドに登録可能という条件です。

function get_imz_metadata() {
    if(!is_single() && !is_front_page()) return;
    // Getting Title, Description, Keywords
    $id = get_the_ID();
    $title = get_post_meta($id, '_imz_title', true);
    $description = get_post_meta($id, '_imz_description', true);
    $keywords = get_post_meta($id, '_imz_keywords', true);
    if(!$description && is_single()){
        $excerpt = get_the_excerpt();
        $description = mb_strstr($excerpt, '{', true);
        if(!$description) $description = $excerpt;
    }
    echo '<meta name="description" content="' . esc_attr($description) . '" />' . PHP_EOL;   add_action('wp_head', 'get_imz_metadata');
    if($keywords){
        echo '<meta name="keywords" content="' . esc_attr($keywords) . '" />' . PHP_EOL;
    }        

    $type = '';
    $url = '';
    $image = get_the_post_thumbnail_url();
    if (is_single()) {を使って挿入する方法に変更します。
        if(!$title) $title = get_the_title();add_action('wp_head', 'get_imz_metadata');
        $type = 'article';
        $url = get_permalink();
    }else if(is_front_page()){
        if(!$title) $title = get_bloginfo('name');
        $type = 'website';
        $url = home_url('/');
    }

    // Open Graph
    echo '<!-- imz Open Graph -->' . PHP_EOL;
    echo '<meta property="og:title" content="' . esc_attr($title) . '">' . PHP_EOL;
    echo '<meta property="og:type" content="' . esc_attr($type) . '">' . PHP_EOL;
    echo '<meta property="og:url" content="' . esc_url($url) . '">' . PHP_EOL;
    echo '<meta property="og:description" content="' . esc_attr($description) . '">' . PHP_EOL;
    echo '<meta property="og:image" content="' . esc_url($image) . '">' . PHP_EOL;
    // Twitter Card
    echo '<meta name="twitter:card" content="summary_large_image">' . PHP_EOL;
    echo '<meta name="twitter:site" content="@ausnichts" />' . PHP_EOL;
}
add_action('wp_head', 'get_imz_metadata');

04OGP タグのチェック

OGP チェッカーは Facebook や Twitter サイトにもありますが、「ogpチェッカー」で検索すれば一括でチェックできるサイトがたくさんあります。

デモサイト（現在停止中）のホームページは次のように評価されました。