STINGER PLUS+でタイトルに ' があるとOGPに影響が出る+OGP設定に関する小ネタ

先日、副サイトでエントリーを公開した後、Facebookにシェアしようとした時に「ん…何かおかしくね?」という状態になったので調べてみたところ、テーマがSTINGER PLUS+の場合のみ発生する現象だった事がわかりました。

ちなみにタイトルの ' はアポストロフィーとかいう記号の事です。

スポンサーリンク

問題はSTINGER PLUS+のOGP設定にあった

既にそのサイトの方は対応を済ませてしまったので、テスト用のサイトで状況を再現して検証してみる事にしました。

なぜ '(アポストロフィー)がダメなのか

それはSTINGER PLUS+がOGP設定タグの引用符に "(ダブルクォーテーション)ではなく '(アポストロフィー)を使っているからでした。

st-ogp.phpのソースを見るとこんな感じです

<?php if(is_single()){ // 投稿記事 ?>
	<meta property='og:type' content='article'>
	<meta property='og:title' content='<?php the_title() ?>'>
	<meta property='og:url' content='<?php the_permalink() ?>'>
	<meta property='og:description' content='<?php echo mb_substr($exce, 0, 100) ?>'>

og:typeはarticleというリテラルですし、og:urlにも ' を含める事は出来ないはず(自動的に削除される)ですので、問題はog:titleとog:descriptionという事になります。

尚、og:descriptionには投稿本文の先頭から100キャラクターが設定されますが、その為に別の問題が発生したのはまた後ほど…

シングルクォーテーションじゃないの?

余談になりますが、引用符として対で使っている場合はシングルクォーテーション、英語で「Don't」や「Playin'」みたいな場合はアポストロフィーという感じで、使い方によって呼び方が変わるのかなと思っていましたが、どうやら文字コードからして違うようです。

十何年もプログラマーとかSEやってて気にした事がなかった…

キーボードから入力する際はShiftキー+数字の7キーを使うのが一般的だと思いますので、普段シングルクォーテーションのつもりで使っている記号は、実は全てアポストロフィーだったという事になります。

何にしても、セットで使用さえしていればシングルだろうがダブルだろうが用法はほぼ同じだと思っていいようですが、問題は括った中に同じ記号が出てきてしまった場合です。

とりあえずサンプルの記事を作ってみました

話が少々それましたが(毎度の事だってか)実際にサンプルを見てみる事にしましょう。

STINGER PLUS+で投稿タイトルにアポストロフィーがある場合

このエントリーをシェアしようとするとこうなります。

STINGER PLUS+で投稿タイトルにアポストロフィーがある場合のFacebookシェア画面

切れている部分を見れば原因はすぐにわかりますね?とりあえず実際のソースがどうなっているか確認してみましょう。画像にしたのでちょっと見難いかもしれません…

STINGER PLUS+で投稿タイトルにアポストロフィーがある場合のHTML

Firefox系のブラウザで見るとこんな感じになりますが、見事にその部分が赤く表示されちゃってますねぇ…HTML的には切れずにちゃんとセットされていますが、タイトルやディスクリプションの中に ' が出てきた時点で引用符を閉じたと見做されているようです。

引用符を"(ダブルクォーテーション)にしてみる

わざわざここだけ ' に変えてあるという事は何か理由があったはずだと思うんですよ。og:imageやTwitterカードの方は普通に " で括ってありますし、実際phpのソースの中で引用符が混在している箇所があるので、あえてそうしたのだろうと思います。

しかし、どうしてもタイトルに ' を使いたい…という事で、まず他のWordPressテーマではどうなっているか調べてみたところ、Simplicity・Luxeritas・micata2・AFFINGER4pro(公式サイトのHTMLで確認)では引用符は全てダブルクォーテーションでした。

という事で、st-ogp.phpの内容を見てみると今から修正しようとしている部分に関して特に問題は無さそうなので、応急処置的な対応になりますがタイトルとディスクリプションの部分だけ ' を " に変更する事にします。

<meta property='og:title' content="<?php the_title() ?>">
<meta property='og:description' content="<?php echo mb_substr($exce, 0, 100) ?>">

投稿記事・固定ページ・ホーム・カテゴリーなどで三箇所ありますので、必要に応じて修正します。さて、これで直ったはず…まずはソースを確認してみましょう。

STINGER PLUS+で投稿タイトルにアポストロフィーがある場合のHTML 修正後

OKですね、それではシェア画面を…

STINGER PLUS+で投稿タイトルにアポストロフィーがある場合 修正後だがキャッシュのせいで直っていないFacebookシェア画面

はい?

これが噂に聞くFacebookのキャッシュってヤツですか…前もって情報を仕入れていなかったら間違いなくハマったと思います。

ここでFacebookのデバッガーの出番となります。

修正したいエントリーのURLをコピペしてデバッグをクリックしてみます…やはりキャッシュのせいで修正前の状態のままになっているので、もう一度スクレイピングをクリックして最新の状態を取得してもらいます。

Facebookのデバッガーでキャッシュを最新の状態に

最新の情報が反映されましたね。

Facebookのデバッガーでキャッシュを更新

それでは気を取り直してもう一度シェア画面を確認してみたいと思います。

STINGER PLUS+で投稿タイトルにアポストロフィーがある場合 修正後のFacebookシェア画面も正常に

とりあえずは直ったようですが、これで心配が無くなったかというと実はそうとも言えないところがあります。

実は完全には解決していなかったり

既にお気付きかもしれませんが、今度はタイトルに "(ダブルクォーテーション)を使うと先ほどと同じ状況になってしまいます…何だか少しもやもやするところはあるものの、私の場合は ' が使いたいだけで " を使う事は無いのでこれでOKとしました。

参考までに他のWordPressテーマ Simplicity・Luxeritasではアポストロフィー、ダブルクォーテーションのどちらをタイトルや本文に使った場合も、元々の引用符が " である事やエスケープ処理がされている事から問題ありませんでした。

という事で、私が確認したテーマの中ではSTINGER PLUS+のみエントリーのタイトルに記号が含まれる場合、OGP関連に影響が出ていないか注意した方が良さそうです。

fb:adminsからfb:app_idに変更する方法

OGPの話が出たついでにこちらのカスタマイズも紹介してみたいと思います。

fb:adminsはあまりオススメ出来ないらしい

理由としてはfb:adminsは個人のFacebookアカウントに紐付いているIDなので、なるべく使用を避けた方が良いという事のようです。

STINGER管理画面 OGP設定

ですが、STINGER PLUS+では(実はmicata2もですが)管理画面からfb:adminsしか入力出来ないようなので、その辺りをちょちょいとイジってみたいと思います。

今回ついでにこの事を書いたのは、先ほどと同じst-ogp.phpの修正になるので一緒にやってしまった方が効率が良いだろうと思いまして。

<meta property='fb:admins' content='<?php echo $fbadmin; ?>'>

のfb:adminsをfb:app_idに変更するだけです。

<meta property='fb:app_id' content='<?php echo $fbadmin; ?>'>

右側の$fbadminはそのままでOKです。そこにはSTINGER管理に入力した内容を一旦セットしているだけなので、わざわざ項目名まで変えてやる必要はありませんが、どうしても揃えておきたい場合は、その上でセットしている部分と合わせて修正する必要があります。

st-ogp.phpの修正だけではSTINGER管理の画面上はfb:adminsのままになっていますが、本人が変更した事さえ覚えていればわざわざ修正するほどの事でも無いと思います。

それでも気になるという几帳面な方は、st-kanri.phpの中に該当する部分が二箇所ありますので(内一箇所はコメントですが)そこを修正すればOKです。

$stdata49 = get_option( 'st-data49' ); //Webフォント選択
$stdata50 = get_option( 'st-data50' ); //fb:admins
$stdata51 = get_option( 'st-data51' ); //Facebookpage

	~ 中略 ~

</i>OGP設定</h4>

               <P>fb:admins:
                    <input type="number" name="st-data50" value="<?php echo esc_attr( $GLOBALS["stdata50"] ); ?>" >
               </p>

変更箇所はコメントとPタグで表示している部分だけですので、消しちゃいけない部分を消したりしない限りは大丈夫です。

以上で、OGP設定をfb:adminsからfb:app_idに変更する事が出来ました。

og:descriptionにタグが入ってしまう

先ほど、上の方の段落で

og:descriptionには投稿本文の先頭から100キャラクターが設定されますが、その為にまた別の問題が発生したのはまた後ほど…

と言いましたが、これがその別の問題です。

もしかしたらこんな事をする人はあまりいないのかもしれませんが、エントリーの先頭に画像を挿入するとこのようになります。

STINGER PLUS+で投稿の先頭に画像を挿入した場合

ソースで見るとこんな感じに…パッと見た感じ何がおかしいのかわからないかもしれませんが、よーく見て下さい…

STINGER PLUS+で投稿の先頭に画像を挿入した場合のOGP設定HTML

シェアしてみると…

STINGER PLUS+で投稿の先頭に画像を挿入した場合のFacebookシェア画面

本来なら抜粋が表示されるはずの部分にimgタグがそのまんま出ちゃってます。

これは文章をタグで括った場合も同様で、og:descriptionにタグが含まれてしまいますが、シェア画面で見ると文章だけになっているので、タグの分だけ文字数は少なくなってしまいますがそこまで致命的ではないようです。

なので、投稿の先頭に画像を挿入したい場合は、STINGER管理 > 投稿・固定記事設定 > 投稿記事最上部にアイキャッチ画像を表示するにチェックを入れておくのがよさそうです。ただし、画像がタイトルよりも上に表示されてしまうので、タイトルの下に表示させたい場合はphpをイジる必要があります。

今回はその修正方法まで確認していませんので、とりあえずそうなりますよという事だけにしておいて下さい。

STINGER PLUS+のOGP関連は注意が必要かと

プラグインに頼らなくてもテーマだけでOGP対応出来るのは有り難いですが、STINGER PLUS+の場合は念入りにチェックした方が良いかもしれないと思いました。これはSTINGER PLUS+に限った話ではないかもしれませんが、特にエントリーのタイトルに記号を使う場合がある方は時々シェア画面を開いて確認してみる事をオススメします。

でもSTINGER PLUS+で今回のエントリーのような現象が出たという記事を他に見ないので、何か普通じゃ考えられないような使い方をしてるのか非常に不安ではありますが…とりあえず今日はこの辺で。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る