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

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

まだまだ続くよ微調整ということで今回は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)をプラグイン無しで記事ごとに設定する方法

2019年5月21日追記

ソース内の画像サイズが「full」になっていたので「medium」へ変更しました。

「full」だとオリジナル画像なのでクオリティの高い画像を出力しておいて、あとは埋め込まれた先で調整してちょ!ということなんですけど、元サイズが大きすぎるので相手に大迷惑、逆に小さすぎると拡大されて粗くなる可能性があるので程よい「中」サイズに変更した次第です。

2019年6月10日追記

アイキャッチ画像のないページの画像出力用コードが誤っていましたので修正しました

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球