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に関してはこれでおしまい!!

やっと終わった。。



関連記事

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


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

記事を読む▷


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


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

記事を読む▷


onMouseOver、onMouseOutで、簡単に画像を切り替える


今までマウスオーバー等で画像を切り替える時は、jQueryを使ったり、cssで画像を重ねてopacityで画像を透過させ…

記事を読む▷


画像やテキストを中央(上下左右真ん中)に配置する方法


普通にtext-align:center;や、margin:0 auto;等でテキストや写真を真ん中に配置したつもりでも…

記事を読む▷


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


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

記事を読む▷


アイキャッチ_はてぶ

はてなブックマーク(はてぶ)でブックマークしたURLを、まとめて変更する方法!


ドメインの変更をすると、301リダイレクトで対策をしたとしても(詳細はこちら)やはり今まで稼いできた被リンクも一緒に変更…

記事を読む▷


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


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

記事を読む▷


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


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

記事を読む▷


301_re-direct

301リダイレクトでサイトのリニューアル(ドメインを変更)する!:.htaccessの記述、設定方法、順序etc.


最近サーバーの見直し、ドメイン管理会社の見直し、サイト内の見直し等々しているのですが、以前から使用していたサーバー(エク…

記事を読む▷


OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定


今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…

記事を読む▷


Message

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

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

PAGE TOP