IMUZA.com

Xserver<<WordPress(ConoHa)<<はてなブログ

ホーム / Wordpress / WordPress:OGPタグをプラグインなしで挿入する

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

2023/01/11 Wordpress

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

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

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

ゼロから作るWordPressテーマ

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

  • ゼロから作るWordPressテーマ

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

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

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

get_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()); ?>

としていました。

メタ 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');

OGP タグのチェック

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

デモサイトのホームページは次のように評価されました。

岐阜県 新穂高温泉、福地温泉を巡る旅

岐阜県 新穂高温泉、福地温泉を巡る旅

Amazon
WordPress:canonicalタグをプラグインなしで制御する
WordPress:JSON-LD構造化データをプラグインなしで出力
Twitter
Facebook
ブックマーク
LINEで送る

最初のサイドバー

最新記事

2023/01/26

WordPress:メニューのid,classを整理カスタマイズ

2023/01/19

WordPress:JSON-LD構造化データをプラグインなしで出力

2023/01/11

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

2022/12/27

WordPress:canonicalタグをプラグインなしで制御する

2022/12/21

WordPress:robotsメタタグをプラグインなしで制御する

最新記事を一覧で見る

よく読まれている記事

よく読まれている記事を一覧で見る

カテゴリー

  • はてなブログ214
  • WebTips108
  • javascript98
  • Joomla!88
  • Windows68
  • CSS63
  • Wordpress59
  • Joomla!更新53
  • Linux49
  • はてなテーマ45
  • Plamo33
  • Google32
  • はてなプラグイン25
  • php22
  • Node.js18
  • Ubuntu16
  • SASS16
  • laravel415
  • Chrome11
  • cms-style10
  • iPhone9
  • genesis6
  • ConoHa WING6
  • Git入門6
  • Python5
  • Android5
  • スマートフォン4
  • PC全般4
  • 静的サイトジェネレーター3
  • Firefox3
  • SSD3
  • Facebook3
  • Blankslate3
  • Docker3
  • Mactype2
  • GitHub2
  • youtube1
  • rails入門1
  • Twitter1
  • はてなブクマ1
  • 映画1
  • Xserver1

Footer

My Web Sites

  • @半径とことこ60分
  • そんなには褒めないよ。映画評
  • IMUZA.com
  • GitHub

Related Sites

  • WordPress公式
  • WordPress関数リファレンス
  • PHPマニュアル

Contact Us

  • お問い合わせフォーム
  • Twitter
  • Facebook
  • Feedly

Copyright © 2023 · IMUZA.com