Tere! 継続の錬金術士なおキーヌです。

そろそろブログ更新通知ツイートにアイキャッチを付けたいなと思い、
OGPの設定をプラグイン無しで導入してみました。

今まではブログの更新通知は質素な感じでしかも手動でやっていました。

ぶっちゃけてしまうとSEOプラグインがあれば簡単に設定できてしまうのでこの記事の設定はしなくても大丈夫です。

私はWordpressのSEOプラグインに慣れすぎているのも成長しないなと思い、
このブログでは「All in One SEO Pack」や「Yoast SEO」等のSEOプラグインは一切導入しておりません。

もし私のような極限までプラグインを使わずにやっていきたいという
Wordpressブロガーの方に役立てば幸いです。

この記事の内容

OGPの簡単な説明

Twitterやfacebookでシェアした時に画像付きで表示させる方法

プラグイン無しでOGPを設定する方法

OGPとは一体なんなのか？

OGPとはSNSにシェアする時にWebサイトの内容を伝えるための設定です。

WordPressにOGP設定画正しく出来ていれば、記事URLをツイートした時に
サムネイルとタイトルと要約付きのツイートが出来ます。

ブログ更新した時、あの人は画像付きなのに私は文字だけしかでない……
って悩んでいる人はOGPの設定が正しくできていません。

ちなみにOGPとは、Open Graph Protocol

の略称です。(オープン グラフ プロトコル)

プラグイン無しOGPの設定方法

function.phpに以下のコードをコピペしてください。

テーマファイルを弄る時は必ずバックアップを取っておきましょう

// ogp settings
function getOgpSettings() {
    // フロントページ or ホーム or 単一ページなら
    if( is_front_page() || is_home() || is_singular() ){

        // 変数初期化
        global $post;       // 記事情報格納変数(グローバル変数)
        $ogpTitle = '';     // OGP用タイトル変数
        $ogpExcerpt = '';   // OGP用概要変数
        $ogpUrl = '';       // OGP用URL変数
        $ogpThumbnail = ''; // OGP用サムネイル変数
        $addTagDatas = '';  // OGP用出力タグ変数

        // OGPのタイプを記事かトップかで切り替える
        $ogpType = ( is_front_page() || is_home() ) ? 'website' : 'article';

        // OGPサムネイルの設定（アイキャッチ画像を取得する）
        if ( is_singular() && has_post_thumbnail() ) {
            // 単一ページの場合
            // 記事に設定しているアイキャッチを取得する(配列がデータとして返ってくる)
            $thumbArray = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
            // 記事に設定しているアイキャッチを取得する(配列の要素0個目に入っている画像URLを取得)
            $ogpThumbnail = $ps_thumb[0];
        } else {
            // それ以外のページの場合
            $ogpThumbnail = '【アイキャッチがない場合に設定する画像URL】';
        }

        //記事or固定ページの場合
        if( is_singular() ) { 
            // グローバル変数のpostに記事情報をセットする
            setup_postdata($post);
            // 記事タイトルを取得
            $ogpTitle = $post->post_title;
            // 記事概要を取得
            $ogpExcerpt = mb_substr(get_the_excerpt(), 0, 100);
            // 記事URLを取得
            $ogpUrl = get_permalink();
            // postに入った情報をリセットする
            wp_reset_postdata();
        //トップページの場合
        } elseif ( is_front_page() || is_home() ) { 
            // ブログタイトルを取得
            $ogpTitle = get_bloginfo('name');
            // ブログ概要を取得
            $ogpExcerpt = get_bloginfo('description');
            // ブログURLを取得
            $ogpUrl = home_url();
        }

        //出力するOGPタグをまとめる

        // FaceBook用OGPの設定
        //   $addTagDatas .= '<meta property="fb:app_id" content="【app_id】">' . "\n";
        //   $addTagDatas .= '<meta property="fb:admins" content="【admins】">' . "\n";

        // Twitter用OGPの設定
        $addTagDatas .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
        $addTagDatas .= '<meta name="twitter:site" content="【TwitterID（例:@naokeyzmt）】" />' . "\n";
        $addTagDatas .= '<meta name="twitter:creator" content="【TwitterID（例:@naokeyzmt）】" />' . "\n";
        $addTagDatas .= '<meta name="twitter:title" content="'.esc_attr($ogpTitle).'" />' . "\n";
        $addTagDatas .= '<meta name="twitter:description" content="'.esc_attr($ogpExcerpt).'" />' . "\n";
        $addTagDatas .= '<meta name="twitter:image" content="'.esc_url($ogpThumbnail).'" />' . "\n";

        // OGP全体の設定
        $addTagDatas .= '<meta property="og:url" content="'.esc_url($ogpUrl).'" />' . "\n";
        $addTagDatas .= '<meta property="og:title" content="'.esc_attr($ogpTitle).'" />' . "\n";
        $addTagDatas .= '<meta property="og:description" content="'.esc_attr($ogpExcerpt).'" />' . "\n";
        $addTagDatas .= '<meta property="og:image" content="'.esc_url($ogpThumbnail).'" />' . "\n";
        $addTagDatas .= '<meta property="og:type" content="'.$ogpType.'" />' . "\n";

        // 上記で設定したタグを出力する
        echo $addTagDatas;
    }
} //END getOgpSettings
add_action('wp_head','getOgpSettings'); //headにOGPを出力

ダラダラ解説すると長くなってしまうのである程度コメントを打っておきました。

このままの状態だと自分のアカウント設定画できていませんので
【～～】で囲んだ部分は各自、下記の通りに変更してください。

【アイキャッチがない場合に設定する画像URL】

単一記事以外、もしくはアイキャッチが無い場合に設定される画像のURLを記述します。
汎用性のある画像をアップロードして、その画像のURLを指定するといいでしょう。

FaceBookの設定【app_id】と【admins】

私自身がフェイスブックをやっていないのとこれからもたぶんやることはないと思うので
一旦コメントアウトしています。もし必要な場合はコメント化を解除して
各自のIDを調べて入れてください。

もし私が何らかの理由でFacebookを始めたらここを更新してみます。

【TwitterID（例:@naokeyzmt）】

Twitterのアカウント名を記載してください。

＠マーク付きで大丈夫です。
2カ所あるので気を付けてください。

サーバー側のfunction.phpを更新してOGPタグが出ているか確認しよう

設定や改行等間違えてなければ問題なくOGPタグがソースコードに出力されています。
トップページと記事で変化しているか見比べてみましょう。

もし、タグが表示されない場合はテーマのヘッダタグがheader.phpに記載されていない可能性があります。

この時点で私もまだテストしてないのでこの記事を投稿する時に出来ているか試してみます。
問題なければ2019/03/10からアイキャッチ付きでブログ更新をしていると思います。

もし表示されない場合は

Twitter側にキャッシュが残っている可能性がありますので
下記のURLにアクセスして「Card URL」にツイートしたい記事のURLを張り付けてチェックしてください。

https://cards-dev.twitter.com/validator

エラーが１つも出なければ問題なく成功しています。

──ブログ毎日更新は69日目。

前々からやろうと思ってて腰が重たかったOGP設定、やっと終わりました。
プラグインに頼ったら入れたら負けかなと思っている（32歳Webエンジニア

ここまで書いておいてなんですが、エンジニアでもない人であれば
確実にSEOプラグインに頼った方が良いです。

それでは。