古いバージョンのWPしか使えないときのOGP設定

最新のWPであれば「ALL in One SEO Pack」というプラグインをインストールしておけば
OGP設定もさくっとできるのですが、サーバ側のPHPのバージョンの制限から古いWPでサイトを構築しないといけない
場面に出くわしました。

そのときのOGPの設定をプラグインを使用せずに実装したので備忘録として残しておこうと思います。

head内に書き出される内容は以下となります。

1
2
3
4
5
6
7
8
9
<meta property="og:title" content="タイトル">
<meta property="og:description" content="ページの概要">
<meta property="og:type" content="ページタイプ">
<meta property="og:url" content="ページのURL">
<meta property="og:image" content="アイキャッチ">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@Twitterアカウント">

実際にはfunction.phpに下記の内容を記述していきます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
function my_meta_ogp()
{
    if (is_front_page() || is_home() || is_singular()) {
 
        /*初期設定*/
 
        // 画像 （アイキャッチ画像が無い時に使用する代替画像URL）
        $post_type = get_post_type();
        if ($post_type === '投稿タイプ名A') {//カスタム投稿タイプにも対応
            $image1 = get_field('投稿タイプ名Aのフィールド名'); //設定した投稿タイプごとの画像
        } elseif ($post_type === '投稿タイプ名B') {
            $image1  = get_field('投稿タイプ名Bのフィールド名');
        }
 
        if ($image1) {
            $image1_url = $image1['url'];
        } else {
            $image1_url = get_template_directory_uri() . '/images/common/dummy.jpg'; //通常投稿の画像を表示する
        }
        $ogp_image = $image1_url;
        // Twitterのアカウント名 (@xxx)
        $twitter_site = 'ecoloshiga';
        // Twitterカードの種類（summary_large_image または summary を指定）
        $twitter_card = 'summary';
        // 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(), 'full');
            $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');

これで実装完了です！
さくっとできましたね✨

設定されたOGPを確認しよう

【Twitterで確認する】
https://cards-dev.twitter.com/validator

【Facebookで確認する】
https://developers.facebook.com/tools/debug/

最後に上記で設定できているかどうか確認して完了です。
同じような場面に出くわした人はぜひ一度試してみてください！

Share: