OGP設定
OGP設定したら…
X やら Facebook やらよくわかわんが、OGP設定をしておくとそれらでちょっといいことがあるらしい。
まあ、設定したからと言ってGoogle の検索順位が爆上がりとか、SNS からの流入が爆増なんてことはないけど…
設定
プラグインの「All in One SEO」や「Yoast SEO」などで簡単に設定できるが、私のサイトにはそんな高機能なプラグインは似合わないので function.php で設定する。
まずは下記コードを add_og_meta.php として保存。
<?php
/** OGPを使用する宣言(htmlタグに属性を追加)**/
if (!function_exists('add_og_prefix')) :
function add_og_prefix($tagdata)
{
if (is_front_page() || is_home() || is_singular()) {
$tagdata .= ' prefix="og: http://ogp.me/ns#"';
}
return $tagdata;
}
add_filter('language_attributes', 'add_og_prefix');
endif;
/** OGP挿入 **/
if (!function_exists('add_og_meta')) :
function add_og_meta()
{
if (is_front_page() || is_home() || is_singular()) {
$og_title = '';
$og_descr = '';
$og_url = '';
$og_img = 'TOPページまたはアイキャッチ画像がないときに使われる画像のURL';
$og_site_name = get_bloginfo('name'); // サイトのタイトル
if (is_singular()) { // 記事&固定ページ
global $post;
$post = get_queried_object(); // 表示ページのWPオブジェクトを取得
setup_postdata($post);
$og_title = $post->post_title;
$og_descr = mb_substr(get_the_excerpt(), 0, 100); // 抜粋
$og_url = get_permalink();
if (has_post_thumbnail()) {
$og_img = get_the_post_thumbnail_url($post->ID, 'full');
}
$og_type = 'article';
wp_reset_postdata();
}
else { //トップページ
$og_title = $og_site_name;
$og_descr = get_bloginfo('description'); // キャッチフレーズ
$og_url = home_url();
$og_type = 'website';
}
// 出力するOGPタグをまとめる
$og_ins = '<meta property="og:title" content="' . esc_attr($og_title) . '">';
$og_ins .= '<meta property="og:description" content="' . esc_attr($og_descr) . '">';
$og_ins .= '<meta property="og:type" content="' . $og_type . '">';
$og_ins .= '<meta property="og:url" content="' . esc_url($og_url) . '">';
$og_ins .= '<meta property="og:image" content="' . esc_url($og_img) . '">';
$og_ins .= '<meta property="og:site_name" content="' . esc_attr($og_site_name) . '">';
$og_ins .= '<meta name="twitter:card" content="summary_large_image">';
$og_ins .= '<meta name="twitter:site" content="@Xのユーザー名">';
$og_ins .= '<meta property="og:locale" content="ja_JP">';
$og_ins .= '<meta property="fb:app_id" content="FacebookアプリID(app_id)">';
echo $og_ins;
}
} //END add_og_meta
add_action('wp_head', 'add_og_meta'); // headにOGPを出力
endif;
23行目の URL、54行目のXのユーザー名、56行目の FacebookアプリID は適宜変更する事。
ファイル構成が下記の場合
├ functions.php
└ fnc
└ add_og_meta.php
functions.php に下記を追加記述
/** OGP挿入 **/
get_template_part('fnc/add_og_meta');
簡単な説明
23行目にデフォルト画像のURL を書いて下さい。
トップページやアイキャッチ画像がないページの時に使用されます。
$og_img = 'https://qarry.net/images/top.jpg'; // デフォルト画像のURL
24行目のサイトのタイトルと41行目のキャッチフレーズは WordPress の「設定 - 一般」で設定されているものを get_bloginfo() 関数で取得していますが、このファイルに直接書き込んでも OK です。
$og_site_name = 'サイトのタイトル'; // サイト名や会社名など
$og_descr = 'キャッチフレーズ'; // サイトの簡単な説明など
サイトのタイトルはサイト名や会社名など、キャッチフレーズはサイトの簡単な説明などを記します。
$og_descr = mb_substr(get_the_excerpt(), 0, 100); // 抜粋
31行目で抜粋を100文字とセットしています。数字の100を変えれば文字数を変更できますが、WordPress で設定している抜粋の文字数以上は取得できません。
WordPress のデフォルトは 110文字らしいので、それ以上セットしたい場合はそちらの設定の変更も必要です。
53行目で Twitterカードの種類をセットしています。通常は summary_large_image か summary で、summary_large_image の方が summary より大きな画像が表示されるらしい。
$og_ins .= '<meta name="twitter:card" content="summary_large_image">';
54行目と56行目はそれぞれ Xのユーザー名と FacebookアプリID(app_id) を書いて下さい。なければその行を削除。
$og_ins .= '<meta name="twitter:site" content="@Xのユーザー名">';
$og_ins .= '<meta property="fb:app_id" content="123456789012345">';
関連記事
コメントを残す