プラグインなしでOGPメタ要素をヘッダーに挿入する【コピペOK】

プラグインなしでOGPメタ要素をヘッダーに挿入する【コピペOK】 WordPress

こんにちは、mickです。

今日は、OGPメタ要素についての記事です。

WordPressでは、次の場合に簡単にOGPメタ要素を入れることができます。

  • SEO機能のプラグイン All in One SEO や Yoast SEO を使う
  • SEO機能をもつテーマを使う(例えば、Cocoon)

ここでは、コーディングしてどんな環境でもOGPメタ要素を入れる方法を紹介しています。

環境に依存しないため、汎用性が高いです。
さらに、WordPressのWebサイトが軽くなることが期待できます。

自分の場合、All in One SEOから卒業したをきっかけに、OGPメタ要素のコーディングに行き着きました。

やってみたら、面白かったです。

最後には、自分の設定が反映されているかのチェックツールも紹介しています。
安心してください。

では早速中身にはいっていきます。

OGPメタ要素について確認から

OGPメタ要素について確認しておこうと思います。

OGPはSNS投稿を最適化したSEO機能

OGPは、適切に設定するとFacebookやTwitterなどのSNSに記事を投稿したりシェアしたとき、よしなに表示してくれる機能です。

例えば、次の情報をよしなに表示してくれます。

  • ページのタイトル
  • 概要
  • 画像(サムネイル)

OGPを設定しておくと記事次第で、ときにかっこよく、ときにかわいくブログの記事を紹介してくれます。
結果としてユーザーの目を引くので、クリック率アップが狙えます。

OGPを設定してSNSで記事を紹介したサンプル
OGPを設定してSNSで記事を紹介したサンプル

このことから、SEO機能としてOGPは扱われています。

ところでOGPを調べると、いつもゴチャゴチャした印象があると思いませんか。
なので、ひと言でまとめておきました。

OGPは、ブログの記事をSNS上で良くみせる仕組み

です。
厳密には、違うんですがOGPを使う側からするとこれで十分だと思います。

WordPressでOGPを扱う3つの方法

WordPressでOGPを扱うには3つあります。

  1. プラグインを使う
  2. OGP機能の入ったテーマを使う
  3. コーディングする

WordPressでOGPを扱う場合、プラグインを使うのが一番簡単。
SEO機能の中にOGPが入っているので、All in One SEO や Yoast SEO を使っているならOGP機能が入っています。

また、WordPressテーマそのものにSEO機能がある場合もあります。
例えば、CocoonやLuxeritasなど有名な無料テーマを使っていればOGP機能が入っています。

最後は、コーディングするやり方。
Webで調べるとだいたい、functions.phpを編集するパターンが多いですね。

コーディングでOGPを設定する(コピペOK)

では本題。次をfunctions.phpに書けばOGP機能(OGPメタ要素)がWebサイトのヘッダに付きます。

// ogp settings
function get_my_ogp() {
    // 最新の投稿、固定ページ(フロントページか投稿ページか)、固定ページ(投稿)
    if( is_front_page() || is_home() || is_singular() ){
        global $post;       // 記事情報格納変数(グローバル変数)
        $ogp_title = '';     // OGP用タイトル変数
        $ogp_description = '';   // OGP用概要変数
        $ogp_url = '';       // OGP用URL変数
        $ogp_thumb = ''; // OGP用サムネイル変数
        $ogp_img_alt = '';  // OGP用サムネイルのALTタグ変数
        $add_tag_data = '';  // OGP用出力タグ変数

        // OGPのタイプを記事(投稿)とそれ以外で分ける
        $ogp_type = ( is_single() ) ? 'article' : 'website' ;
        // Webサイト名
        $ogp_site_name = get_bloginfo('name');
        // ロケール
        $ogp_locale = 'ja_JP';
	
        // OGPサムネイルの設定(アイキャッチ画像を取得する)
       if ( is_singular() && has_post_thumbnail() ) {
           //アイキャッチ IDを取得して画像の「URL,横幅,高さ」を取得
           //画像サイズは full(アップロードしたときのサイズ)
           $thumb_arrary = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full');
            // 記事に設定しているアイキャッチを取得する [0]url, [1]width, [2]height
            $ogp_thumb = $ps_thumb[0];
       } else {
            // それ以外のページの場合
            $ogp_thumb = '代替画像のURL';
       }
       // 最新の投稿、固定ページ(フロントページか投稿ページか)の判定が先
       if ( is_front_page() || is_home() ) { 
            // ブログタイトル
            $ogp_title = get_bloginfo('name');
            // ブログ概要
            $ogp_description = get_bloginfo('description');
            // ブログURL
            $ogp_url = home_url();
        } elseif(is_singular() ) { 
			//記事or固定ページの場合
            // グローバル変数のpostに記事情報をセットする
            setup_postdata($post);
            // 記事タイトル
            $ogp_title = $post->post_title;
            // 記事概要(100文字でカット)
            $ogp_description = mb_substr(get_the_excerpt(), 0, 100);
            // 記事URL
            $ogp_url = get_permalink();
            // postに入った情報をリセットする
            wp_reset_postdata();
        } 
        // サムネイルのaltタグは、タイトルと同じにしてある
        $ogp_img_alt =  $ogp_title;
	
        // Facebook用OGPの設定
        $isFb = false; //出力するOGPタグのスイッチング
        if($isFb){
			$add_tag_data .= '<meta property="fb:app_id" content="【app_id(例:012345670123089)】">' . "\n";
			$add_tag_data .= '<meta property="fb:admins" content="【admins(例:893948719192737)】">' . "\n";
        }

        // Twitter用OGPの設定
        // ブログの場合は、summary または summary_large_image
        $add_tag_data .= '<meta name="twitter:card" content="summary_large_image" />' . "\n";
        $isTw = false; // 出力するOGPタグのスイッチング
        if ($isTw) {
        $add_tag_data .= '<meta name="twitter:site" content="【TwitterID(例:@oneuro)】" />' . "\n";
        $add_tag_data .= '<meta name="twitter:creator" content="【TwitterID(例:@mick)】" />' . "\n";
        // OGP互換なので、twitter:title, twitter:description, twitter:image、はOGPにまかせる
		}

        // OGP全体の設定
        $add_tag_data .= '<meta property="og:url" content="'.esc_url($ogp_url).'" />' . "\n";
        $add_tag_data .= '<meta property="og:title" content="'.esc_attr($ogp_title).'" />' . "\n";
        $add_tag_data .= '<meta property="og:description" content="'.esc_attr($ogp_description).'" />' . "\n";
        $add_tag_data .= '<meta property="og:image" content="'.esc_url($ogp_thumb).'" />' . "\n";
		$add_tag_data .= '<meta property="og:image:alt" content="'.esc_attr($ogp_img_alt).'" />' . "\n";
        $add_tag_data .= '<meta property="og:type" content="'.$ogp_type.'" />' . "\n";
        $add_tag_data .= '<meta property="og:site_name" content="'.$ogp_site_name.'" />' . "\n";
        $add_tag_data .= '<meta property="og:locale" content="'.$ogp_locale.'" />' . "\n";
	
        // 上記で設定したタグを出力する
        echo $add_tag_data;
    }
} 
	
add_action('wp_head','get_my_ogp'); //headにOGPを出力

これは、直接functions.phpを編集するよりも、プラグインの Code Snippets を使うとコーディング初心者でもWordPressを壊さないので安心です。

Code Snippets の使い方は、次の記事で書きました。

いくつか補足

上のソースコードでは、Facebook用の部分とTwitter用の部分をスイッチングしています。
(あまりほめられた書き方ではありませんが)

FacebookやTwitterとWebサイトを連携しているときにだけ、設定しておけばOK。
このままでもSNSでの表示は変わりません。

またTwitterでは、専用のメタ要素が用意されています。
でも、OGPと互換があるため、共通する部分はOGPを設定していればOK

ということで3つ(twitter:title, twitter:description, twitter:image)は、省略しています。

動作確認は ラッコツールズさんで

動作確認は、ラッコツールズさんのOGP確認がオススメ。
FacebookTwitterだけでなく、LINEでの動作も確認できます。

使い方は、簡単。
調べたいURLを入力して「確認する」ボタンをクリックするだけ。シンプル。

参考にしたWebページ

今回のコーディングでは、次のWebページを参考にさせてもらいました。
ありがとうございました。

⇒ WordPressのプラグイン無しOGP設定

⇒ SEO対策のSEO Pack > SEO最新用語集 > OGP (Open Graph Protocol)

⇒ ツイートをカードで最適化する

⇒ テンプレートタグ/get the post thumbnail

⇒ is_home()とis_front_page()の条件分岐タグの違い

⇒ WordPressでOGPタイプを記事とそれ以外で分けたい

まとめ。

プラグインなしでOGPメタ要素をヘッダーに挿入する方法としてコーディングするやり方を紹介しました。

プログラミングの練習All in One SEOなどプラグインから卒業したい人は、ぜひ挑戦してみて欲しいと思います。

記事を読んでくれて嬉しいです。
今日もありがとうございました。

初稿 2021/02/15