それなりにソースは見たつもりだったんです。でも、後からいろいろ出てくる辺り私の目は節穴なんだなぁ…と実感せざるをえない小倉（@ogr8beat）です。
今回はココ↑の文章についてです。ずっと単純に「小倉です」としていましたが、最近は前述のように「小倉（@ogr8beat）です」とTwitterアカウントのリンクを併記するように変更しました。このように書かれているブログ、とても多いですよね。
で、Facebookページ開設に伴い、久々にデバッガーで挙動をチェックしました。するとOGP関連タグがえらいことに…( ˟_˟ )
具体的には、headではなくなぜかbodyタグ内に出力され og:image が認識されていない、という現象です。
アイキャッチではなく記事内の画像が選択されていたり、エラーが出ていたり
修正してみて、原因は og:description にHTMLタグが含まれているせいだったのかも、と推測。OGP設定を出力するファイル st-ogp.php の修正方法をご紹介します。
CONTENTS
- 1 実現させたいこと
- 2 サンプルコード
- 2.1 str_replace
- 2.2 strip_tags
実現させたいこと
og:descriptionからHTMLタグを除去- 同じく半角スペースになる改行を除去
サンプルコード
修正前
PHP
<meta property='og:description' content='<?php echo mb_substr($exce, 0, 100) ?>'>
修正後
PHP
<meta property='og:description' content='<?php echo mb_substr(str_replace(array("\r\n", "\r", "\n"), '', strip_tags($exce)), 0, 100); ?>'>
str_replace
str_replace は文字列を検索し一致したものをすべて置き換えるPHP関数です。ここでは改行（CR+LF）を検索し空に置き換えることで改行の削除を行っています。
strip_tagsはHTMLタグ、PHPタグを除去するPHP関数です。
変数$exceは STINGER PLUS+ で定義されており、「抽出した記事本文」のこと。つまりこの変数の部分は、他のテーマを使っている場合は別途指定してやる必要があります。
結果：エラー解消、アイキャッチも正しく表示されるように
記事本文のプレーンテキストをメタディスクリプションとしたいのは投稿記事ページと固定ページだけです。つまりstｰogp.phpの該当する2ヶ所を書き換えるだけでオッケー。
Facebookでは保存したキャッシュが参照されるため、このカスタマイズを実施したあとはデバッガーでスクレイピングし直すことをおすすめします。
Trackback URL :