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

公開日: 更新日: Ver1.0の更新情報

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

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

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

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

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

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

変更・追加したファイル

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

    // OGPタグの出力
    locate_template(‘ogp-tag.php’, true);
  3. 「header.php」(変更)
  4. 元コードのOGP出力部分を削除しました

  5. 「ogp-tag.php」(追加)
  6. 「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');
?>

参考記事

です。

2019年5月21日追記

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

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

2019年6月10日追記

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

いつでもご相談・お見積りの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】