STINGER PLUS+のog:descriptionからタグと改行を削除する

WordPress

2017/2/11

それなりにソースは見たつもりだったんです。でも、後からいろいろ出てくる辺り私の目は節穴なんだなぁ…と実感せざるをえない小倉(@ogr8beat)です。

今回はココ↑の文章についてです。ずっと単純に「小倉です」としていましたが、最近は前述のように「小倉(@ogr8beat)です」とTwitterアカウントのリンクを併記するように変更しました。このように書かれているブログ、とても多いですよね。

で、Facebookページ開設に伴い、久々にデバッガーで挙動をチェックしました。するとOGP関連タグがえらいことに…( ˟_˟ )
具体的には、headではなくなぜかbodyタグ内に出力され og:image が認識されていない、という現象です。

アイキャッチではなく記事内の画像が選択されていたり、エラーが出ていたり

修正してみて、原因は og:description にHTMLタグが含まれているせいだったのかも、と推測。OGP設定を出力するファイル st-ogp.php の修正方法をご紹介します。

実現させたいこと

  • 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

strip_tagsHTMLタグ、PHPタグを除去するPHP関数です。
変数$exceは STINGER PLUS+ で定義されており、「抽出した記事本文」のこと。つまりこの変数の部分は、他のテーマを使っている場合は別途指定してやる必要があります。


結果:エラー解消、アイキャッチも正しく表示されるように

記事本文のプレーンテキストをメタディスクリプションとしたいのは投稿記事ページと固定ページだけです。つまりstーogp.phpの該当する2ヶ所を書き換えるだけでオッケー。

Facebookでは保存したキャッシュが参照されるため、このカスタマイズを実施したあとはデバッガーでスクレイピングし直すことをおすすめします。

WordPress