【WordPress】OGP設定で苦労した時の対処法【ブログ】

Blog programming WordPress

いや～、時間掛かりましたよ。何にかって？

OGPの設定にですよ。簡単な設定のはずなのにだいぶ時間持っていかれました。でも、仕方なし。これも勉強です。

僕に降りかかった問題はdescriptionが反映されないです。

もしかしたら、ほどんどの方はエラーメッセージとかでないのかもしれませんが、僕の他にもこれで苦労した人がいるかもしれないので、この記事では僕が実行した対処法を記載しておきますね。

まずOGP設定ってなに？

そもそも「OGP設定」ってなに？

知ってますか？

僕は知りませんでした（ドヤ顔

OGPとは”Open Graph Protocol“の事です。

FacebookやTwitterなどのSMS上で、ブログやHPなどのWEBサイトをシェアする時に、「記事のタイトルはコレ！」、「サムネイル画像はコレ使って！」とお願い（お約束）する為のものです。OGPのおかげでタイトルやら画像やらが表示されるようになります。

普通は、HTMLの<head>タグの中に、Metaタグとして記載されていて、普通は表（画面側）で目にすることはありません。

もし、OGPの設定をしていないとTwitter上でシェアした時にこうなります↓↓

リンクが青く表示されているだけです。

※画質が悪くてすみませんorz

これだと、なんか寂しいですよね。あと、クリックする気がしないと思います。

これをちゃんと設定してあると、こうなります↓↓

※これも画質が悪くてすみませんorz

Twitter上で、ブログ記事のタイトル、アイキャッチ画像、ディスクリプション（説明）が表示されているのがわかりますね。

これだと、目に止まりやすく面白そうな記事なら読んでもらえるかもしれません。

じゃあ、設定方法は？って話ですよね。

方法は二通りあります。

  1. プラグインを使う
  2. WordPressで使用中のテーマのheader.phpに直接コードを書き込む

ほとんどのWordPressグロガーさん達は１つ目の「プラグインを使う」で、みんな大好き「All in One SEO Pack」をインストールして、TwitterやらFacebook用のOGP設定を済ませるかと思います。

僕ももちろんインストール済みですが、あえて２つ目を選びました。

そう！プログラミングの勉強の為です。

 

・・

 

・・・

 

・・・・

 

う、うそです。すみません。

ほんとは「All in One SEO Pack」で設定できるのを知らずに、自分で手打ちでコードを書いていたのですが、エラー（&思うよう表示されない現象）が出て、色々調べたらプラグイン使って簡単に設定できることを知りました。

結果的に勉強になったので問題なし。結果オーライです。

「All in One SEO Pack」を使って設定されたい方、バズ部さんの「All in One SEO Packの設定方法と使い方」をご参考に。

とても丁寧に解説されています。

バズ部さんページ

=>All in One SEO Packの設定方法と使い方

 

でも、僕はもう２つ目の「Wordpressで使用中のテーマのheader.phpに直接コードを書き込む」を始めてしまったし、なんか変な意地があったので、自分の力で設定する事に。

僕と同じく自力で設定したい方やバグに困っている方は下記を参考にしてくださいね。

プラグイン「All in One SEO Pack」の機能管理を利用しないでOGP設定する方法

まず色々なサイトやブログを参考にさせて頂きました。本当に助かりました。

僕のWordPressテーマは、、マナブさん（manablog）が作成された「Minimal」をちょくちょく自分なりに改造して使わせて頂いております。

OGP設定も、マナブさんの【WordPress】プラグインなしでOGP設定する方法【FB/Twitter用】を参考にさせて頂きました。

それがこちら↓↓

<!-- OGP設定 -->
<meta property="fb:app_id" content="【App ID】" />
<meta property="fb:admins" content="【FB Admin】" />
<meta name="twitter:card" value="summary"/>
<meta name="twitter:site" value="@【Twitterのユーザー名】" />
<meta name="twitter:creator" value="@【Twitterのユーザー名】" />
<meta name="twitter:title" value="<?php the_title(''); ?>"/>
<meta name="twitter:description" value="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>"/>

<!-- 個別記事の場合 -->
<?php if (is_single()) { ?>
<meta property="og:url" content="<?php the_permalink() ?>"/>
<meta property="og:title" content="<?php the_title(''); ?>" />
<meta property="og:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>" />
<meta property="og:type" content="article" />
<?php
  if(has_post_thumbnail()){ //アイキャッチがある場合
    $image_id = get_post_thumbnail_id();
    $image = wp_get_attachment_image_src($image_id, 'full');
    echo '<meta property="og:image" content="'.$image[0].'" />';echo "n"; //FBのアイキャッチ画像
    echo '<meta name="twitter:image" value="'.$image[0].'" />'; echo "n"; //FBのアイキャッチ画像
  } else { //アイキャッチがない場合
    echo '<meta property="og:image" content="【画像リンク】" />';echo "n"; //指定の画像
    echo '<meta name="twitter:image" value="【画像リンク】" />';echo "n"; //指定の画像
  }
?>

<!-- 個別記事以外の場合 -->
<?php } else { ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>" />
<meta property="og:type" content="website" />
<meta property="og:image" content="【画像リンク】" />
<meta name="twitter:image" value="【画像リンク】" />
<?php } ?>
<!-- /OGP設定 -->

【App ID】や【Twitterのユーザー名】などを編集したら、OGP設定の完了で、マナブさんの記事内にも注意書きがありますが、これはAll in One SEO Packユーザー用のコードになります。

それがこのライン↓↓

<meta name="twitter:description" value="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>"/>

get_post_meta関数内の「_aioseop_description」の部分 がAll in One SEO Packの引数にあたるからなんです。

ただし、手強かったのがこのラインなんです！

実際にサーバーに上げてみると、descriptionの部分が反映されていなかったんですよ。

しかもエラーメッセージが・・・

Warning: Use of undefined constant _aioseop_description - assumed '_aioseop_description' (this will throw an Error in a future version of PHP) in /you/site/header.php

最初は、PHPのバージョンのせいかなと思ったんですが、違ったんです。

実は、シングルコーテーション（「’」←これ）かダブルコーテーション（「”」←これ）が抜けていたんです。

正しくは

<meta name="twitter:description" value="<?php echo get_post_meta($post->ID, '_aioseop_description', true); ?>"/>

「_aioseop_description」をシングルコーテーション（またはダブル）で挟まないといけないんです。

_aioseop_description ⇒　'_aioseop_description'

正直に言うと２時間ぐらいネットで答えを探したんですが見つからず。

エラーメッセージをよく見ると実は書いてあるですよね。

ちゃんとエラーメッセージ読んでおけばよかったと思いました。

これで、無事エラーも消え、Twitterに綺麗にシェアする事が出来るようになりました。

 

参考にしたサイトさん↓↓

ららさんのブログ

⇒All in One SEO Packで説明文(description)がちゃんと表示されない場合の対処法

いわしブログさん

⇒All in One SEO Packでdescriptionが反映されない時の対処法

ノッティさんのブログ

⇒All in One SEO Packで指定したdescriptionやkeywordsをページのmeta情報に表示させる方法

マナブさんのブログ

⇒【WordPress】プラグインなしでOGP設定する方法【FB/Twitter用】

RELATED

フランス発・最強の無料プログラミングスクール「エコール42」【経験談あり】...

IT

42Tokyo合格！僕が1ヶ月のPiscine（ピシン）を泳ぎ切った方法...

IT

42東京のPiscine（ピシン）参加予定者におすすめのホテル「Binemu」...

IT

>  >  【WordPress】OGP設定で苦労した時の対処法【ブログ】