【ha-Basic】OGPタグの出力方法見直し|Knowledge Base

公開日：2019(令和元)年5月16日／最終更新日： 2019(令和元)年8月28日

まだまだ続くよ微調整ということで今回はSNSへ埋め込み表示するためのOGPタグ出力に関するブラッシュアップです。

※もちろん今からダウンロードされる方は最新はこの変更までが包括されたものになります。

ベースにしたテーマに入っていたOGPタグの出力機能ではきちんと認識されなかったため、別の方法で出力することにしました。

これにより、初期設定の手順も少し増えましたので改編しました。

ダウンロード数は現状ゼロですが、もしかしたらカウントロスなどですでに使われている方もいるかもしれませんので、私的な備忘録も兼ねて変更したファイルと内容を記載しておきます。

OGPタグの出力変更に関する資料

変更・追加したファイル

「functions.php」（変更）

「ogp-tag.php」の内容を実行するための行を追加しました。追加したのは以下のコード

// OGPタグの出力
locate_template('ogp-tag.php', true);

「header.php」（変更）

元コードのOGP出力部分を削除しました

「ogp-tag.php」（追加）

「functions.php」へ直書きすると非常に長くなり、初期設定も大変になるので別ファイルとしました

「ogp-tag.php」の内容

<?php
/**
* OGPタグ出力ファンクション
*
* OGPタグをheadタグ内に出力します。
*
* ■出力するタグ
* ・OGPタグ
* ・Twitterカード
* ・Facebook
*/
function my_meta_ogp()
{
if (is_front_page() || is_home() || is_singular()) {

/**
* 初期設定
* ・初期設定内の変数項目を修正してください。
*
* ############ 初期設定 ここから ######################
*/

// 画像 （アイキャッチ画像が無い時に使用する画像URL）
$ogp_image = get_template_directory_uri().'/images/webclipicon.png';
// Twitterのアカウント名 (@xxx)
$twitter_site = '';
// Twitterカードの種類（summary_large_image または summary を指定）
$twitter_card = 'summary_large_image';
// Facebook APP ID
$facebook_app_id = '';

/**
* ############ 初期設定 ここまで ######################
*/

global $post;
$ogp_title = '';
$ogp_description = '';
$ogp_url = '';
$html = '';
if (is_singular()) {
// 記事＆固定ページ
setup_postdata($post);
$ogp_title = $post->post_title;
$ogp_description = mb_substr(get_the_excerpt(), 0, 100);
$ogp_url = get_permalink();
wp_reset_postdata();
} elseif (is_front_page() || is_home()) {
// トップページ
$ogp_title = get_bloginfo('name');
$ogp_description = get_bloginfo('description');
$ogp_url = home_url();
}

// og:type
$ogp_type = (is_front_page() || is_home()) ? 'website' : 'article';

// og:image
if (is_singular() && has_post_thumbnail()) {
$ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
$ogp_image = $ps_thumb[0];
}

// 出力するOGPタグをまとめる
$html = "\n";
$html .= '<meta property="og:title" content="' . esc_attr($ogp_title) . '" />' . "\n";
$html .= '<meta property="og:description" content="' . esc_attr($ogp_description) . '" />' . "\n";
$html .= '<meta property="og:type" content="' . $ogp_type . '" />' . "\n";
$html .= '<meta property="og:url" content="' . esc_url($ogp_url) . '" />' . "\n";
$html .= '<meta property="og:image" content="' . esc_url($ogp_image) . '" />' . "\n";
$html .= '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '" />' . "\n";
$html .= '<meta name="twitter:card" content="' . $twitter_card . '" />' . "\n";
$html .= '<meta name="twitter:site" content="' . $twitter_site . '" />' . "\n";
$html .= '<meta property="og:locale" content="ja_JP" />' . "\n";

if ($facebook_app_id != "") {
$html .= '<meta property="fb:app_id" content="' . $facebook_app_id . '">' . "\n";
}

echo $html;
}
}
// headタグ内にOGPを出力する
add_action('wp_head', 'my_meta_ogp');

?>

参考記事：【WordPress】OGP（Twitterカード・Facebook）をプラグイン無しで記事ごとに設定する方法