WordPressのプラグインなしで、Jetpackと共存してFacebookやTwitter CardのOGPの設定をする!

LINEで送る
Pocket

先日、ようやく気になっていたOGPの設定を、WP-OGPのプラグインを変更して使えるようにしたのですが(詳細は こちらこちら)、チラッと違うことで要素検証をしてhead内を見てみたら、OGPの記述が2つある!? ということに気づき、どうやらその原因はJetpackが吐き出しているOGPの記述のようでした。

JetpackはWordPressでサイトを作っている方ならご存知だと思うのですが、非常に便利なWP用のプラグインですので、Jetpackが自動でOGPを出力してくれてるなら、Twitter Cardsの記述も一緒に出力してくれるようなのでこの際それにしよう。ということになりました。せっかくWP-OGPの設定をやり直して使えるようになんとか改変したとこなのですが。。

ってことで、管理している全サイトの設定を変更してチェックしてみたのですが、あるサイトはTwitter Cardsの記述がホームでなかったり、app_id や admin がうまく出力されなかったりと、ちょっと意味がわらからーーーん!!!!!という状態になってしまいました。

ですので一度WP-OGPに戻したのですが、descriptionが長ったらしかったり、Twitter cardが自動で吐き出されてないので、手動でheaderに書かないといけなかったりと、気になることがちょくちょくあったのでもうプラグインはやめや!
ということで、もうプラグインでのOGP設定はやめて、オリジナルのOGP設定でなんとかすることにしたので、また次回WPでサイト作成する時の覚書です。

プラグインなしで、FacebookやTwitter CardのOGPの設定をする!

やる作業としては大きく分けて以下の3つ。

  • Jetpackの吐き出すOGP設定を止める。
  • 今まで使用していたプラグイン(WP-OGP)を止める。
  • オリジナルのOGP.phpを作成して読み込む。

html宣言の編集や、facebookアプリの設定は、以前の記事(こちらこちら)にあるので今回は省略しています。

1, Jetpackの吐き出すOGP設定を止める。

これは以下の記述をTheme内のfunction.phpに記述します。

// Jetpackのパブリサイズ共有で自動的に出力されるOGPの設定の削除
add_filter('jetpack_enable_open_graph', '__return_false', 99);

これでとりあえずはJetpackとの共存設定はおしまいです。

2, WP-OGPを止める。

これはそのままプラグインの設定で、WP-OGPを、他のOGPのプラグインを使ってる方はそのプラグインを停止(無効化)します。
WP−ogpをとめる

WP-OGP、短い間やったけど今までありがとう!

3, オリジナルのOGP.phpを作成して読み込む。

先ほども記載しましたが、これはhtml宣言の編集や、facebookアプリの設定が終わっている必要があるので、それがまだの方は以前書いた記事(こちらこちら)を参考にしてくださいね。

この設定が終わっている状態で、
まずは header.phpのタグ内に以下の記述をコピペします。

<?php get_template_part('ogp');?>

こちらのサイトを参考にさせていただきました。
寝ログさんのサイト:http://nelog.jp/wp-ogp-settings
*Web Design 覚え書き*さんのさいと:http://webdesign.practice.jp/ogp-wordpress

次に以下のOGP.phpのファイルを作成して、

<!--- OGP設定 --->
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
  echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示
endwhile; endif;
  echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
  echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
  echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
  echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
  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";
  } else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
    echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
  } else {//投稿にサムネイルも画像も無い場合の処理
    $ogp_image = get_home_url().'/JUN_images/ABC.png';//ここはオリジナルの画像のURLにしています。Theme内ではなく、ホーム直下にフォルダを作っておいてます。Theme内のimageフォルダは、get_template_directory_uri().'/images/ABC_Logo.png'; です。
    echo '<meta property="og:image" content="'.$ogp_image.'">';echo "\n";
  }
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
  if (get_header_image()){//ヘッダーイメージがある場合は、ヘッダーイメージを
    echo '<meta property="og:image" content="'.get_header_image().'">';echo "\n";
  } else {//ヘッダーイメージがない場合の画像をとってくる。600×313pxのものを使っています。
    echo '<meta property="og:image" content="'.get_home_url().'/JUN_images/ABC_image.png">';echo "\n";//Theme内ではなく、ホーム直下にフォルダを作っておいてます。Theme内のスクリーンショットにする場合は、.get_template_directory_uri().'/screenshot.png">';echo "\n";
  }
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="APP_ID">
<meta property="fb:admins" content="ADMIN_ID"><!--これはなしでもOKのようです。-->
<!--以下はTwitter Cardsの設定-->
<meta name="twitter:card" content="summary_large_image"><!--標準はsummary-->
<meta name="twitter:site" content="@Web_Desine_ABC(@Twitterアカウント)">
<meta name="twitter:creator" content="@Web_Desine_ABC(@Twitterアカウント)" ><!--これはなしでもOKと思います。-->
<!--- /OGP設定 --->

こちらのサイトを参考にさせていただきました。ありがとうございます。ちなみに25,32行目と40行目以下は変更しています。
寝ログさんの記事:http://nelog.jp/wp-ogp-settings
*Web Design 覚え書き*さんの記事:http://webdesign.practice.jp/ogp-wordpress

さて。ここ最近OGPに長〜〜〜い時間かけてしまってましたが、これでもうOGPに関しては大丈夫!!なはず?だと思いますので、OGPに関してはこれでおしまい!!

やっと終わった。。



関連記事

複数の横に並ぶブロック要素をセンタリングさせる!!


よく複数の画像をfloatで並べることありますよね?でも、それを括ったDivタグとかをセンタリングしようとしたら、なかな…

記事を読む▷


2015最新版:PING送信先リスト20(WordPress Ping Optimizerへ登録するPingのURL)


色々と設定の見直し中なのですが、PingはSEO対策では大切なんですよね?正直まだイマイチPingは把握しきれていません…

記事を読む▷


opacityの書き方 クロスブラウザ


今までも書いてましたが、ほんとIE嫌い。 そして、これからもまた同じ事書くでしょう。 さて。クロスブラウザでIE…

記事を読む▷


WP-OGPの設定方法:WPの投稿記事のサムネイルをFBできちんと表示させる


この記事は前回からの続きなのですが、、、実は1年経ってます。。下書きを途中まで書いてたのですが、あまりにも大変で途中で終…

記事を読む▷


サーバー移転の手順 その2:データベースの移行(phpMyAdminを使って)


前回サーバ移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)からの続きです! って…

記事を読む▷


Facebookでシェアした記事のサムネイル画像がおかしい時、表示されない時の解決方法


せっかく面白そうなネタを見つけたので、早速Wordpressに記事を投稿!でもいざFBでシェアしようとしたら、サムネイル…

記事を読む▷


お名前.comで “Whois情報公開代行” の設定にチェックを入れ忘れて登録した時の対処方法


先日、こちら で少し書いたのですが、お名前.comでドメインを取った時に、 "Whois情報公開代行" の設定にチェック…

記事を読む▷


RSSフィードを設置してすぐにエラーが…


恥ずかしながら、RSSフィードを管理している全てのサイトに設置していませんでした。やろうやろう。とは思ってたのですが、ど…

記事を読む▷


これは便利!!WordPressの投稿内に、管理者やログインユーザーにしか見れないメモを残す方法


よく投稿を途中まで作って、なかなか仕上げれずに長い期間あいてしまうと『これなんのサイト参考にしてたんやっけ?』とか『え〜…

記事を読む▷


easy-edit

共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策


WordPress等のCMSではなく、htmlで構築され、headerやfooter等、同じパーツを使っているサイトを編…

記事を読む▷


Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

参考にさせていただいてるサイト

Error: Feed has an error or is not valid

PAGE TOP