今回は、プラグインを使わずに、OGPとTwitterカードを設定する方法をご紹介いたします。
コピペ用コードのみの記載ですので、それぞれの意味や役割に関しましては、下記の記事を参考にしてください。
【OGPとは】OGPの基本と使い方や設定方法を解説
それでは、コードを記載しますね！
プラグインなしでOGPとTwitterカードを設定する方法
まずは、<head> に記述する、OGPを使用することを宣言するため、prefix属性を条件分岐で記述します。
下記の書き方は三項演算子ですが、分かりづらい方は、<if><else><endif>の書き方で記述してください。
<?php $attribute = (is_home() || is_front_page()) ? 'website' : 'article'; ?>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# <?php echo $attribute; ?>: http://ogp.me/ns/<?php echo $attribute; ?>#">
次に、「functions.php」に下記のコードを記述してください。
function my_meta_ogp() {
if (is_front_page() || is_home() || is_singular()) {
global $post;
$ogp_title = '';
$ogp_description = '';
$ogp_url = '';
$ogp_image = '';
$insert = '';
if (is_front_page() || is_home()) {
$ogp_title = get_bloginfo('name');
$ogp_description = get_bloginfo('description');
$ogp_url = home_url();
} elseif (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();
}
$ogp_type = (is_front_page() || is_home()) ? 'website' : 'article';
if (is_singular() && has_post_thumbnail()) {
$ps_thumbnail = wp_get_attachment_image_src(get_post_thumbnail_id(), 'full');
$ogp_image = $ps_thumbnail[0];
} else {
$ogp_image = '① TOPページ&アイキャッチ画像がないときに使われる画像のURL（絶対パス）';
// $ogp_image = 'https://〇〇〇〇/wp-content/uploads/2022/10/opg.png';
// $ogp_image = 'https://〇〇〇〇/wp-content/themes/〇〇〇〇/images/ogp.png';
}
$insert .= '<meta property="og:title" content="' . esc_attr($ogp_title) . '">' . "\n";
$insert .= '<meta property="og:description" content="' . esc_attr($ogp_description) . '">' . "\n";
$insert .= '<meta property="og:type" content="' . $ogp_type . '">' . "\n";
$insert .= '<meta property="og:url" content="' . esc_url($ogp_url) . '">' . "\n";
$insert .= '<meta property="og:image" content="' . esc_url($ogp_image) . '">' . "\n";
$insert .= '<meta property="og:site_name" content="' . esc_attr(get_bloginfo('name')) . '">' . "\n";
$insert .= '<meta name="twitter:card" content="summary_large_image">' . "\n";
$insert .= '<meta name="twitter:site" content="② @ツイッターのユーザー名">' . "\n";
$insert .= '<meta property="og:locale" content="ja_JP">' . "\n";
$insert .= '<meta property="fb:app_id" content="③ FacebookアプリID（app_id）">' . "\n";
echo $insert;
}
}
add_action('wp_head','my_meta_ogp');
記述が必要な箇所は、3箇所になります。
① TOPページ&アイキャッチ画像がないときに使われる画像のURL（絶対パス）
② @ツイッターのユーザー名
③ FacebookアプリID（app_id）
参考サイト
【WordPress】OGPとTwitterカードをプラグイン無しで設定する方法
OGPが正しく設定できているか確認する方法
① OGP確認
