FacebookのOGP仕様が変更になったのをPukiWikiのプラグインで対応した話

本サイトの記事中の文章でもたびたび書いているが、Facebookは突然仕様変更をしたり、それに伴うバグ(?)を出したり、しかもそれをコソッと直したりするので、非常に手に負えない部分がある
Facebookが「世界人口75億人のうち、12億人が毎日35分は見ている」と言われていたのが何年前の話だったか忘れたが、今でも世界的に利用されており、日本国内でも最大規模のSNSだから利用する価値はあるものの、何度もあり得ないレベルの大規模な情報流出事故を世界中でやらかしているのも事実で、端的に言ってFacebookはシステム的にクソだと思っている。
そのクソSNSシステムPukiWikiのページからシェア投稿した際に、OGPで致命的な仕様変更をしてくれており、いい加減こちら側で対応せにゃならんと腹を決めたので、記事として書き残すことにした。

突然FacebookのOGP仕様が変更になった?

私が私設松本零士博物館サイトをオープンして運用を開始したのは、今年の1月25日で松本零士先生が82歳を迎えた、その誕生日からだ。
そもそも私は、この私設松本零士博物館を立ち上げたくて数年前から細々と準備をし、近年になってPukiWikiの改造とライブラリとプラグインの開発をしている。その成果としてPukiWiki本体の改造を含む記事や、独自に開発したライブラリとプラグインを本サイトのダウンロードページで公開しているが、本来的にPukiWikiが未だに古い設計である点に問題がある。その問題のひとつとして、TwitterやFacebookといったSNSとつながる機能すら持っていない点が挙げられるが、私はPukiWikiでのページ作成とそのメンテナンスの簡便さを殺さない範囲で、OGP連携をウマイこと工夫をしているつもりだ。
改めて私がローカルやネットの別なく書き散らしているメモやログその他を調べると、少なくとも2月20日頃までは、FacebookにPukiWikiページをシェア投稿する際に問題になることは無かったようだ。

図は私が参加している@meetでの2月23日の投稿だが、正確な時刻は不明だ。恐らく日付が変わってすぐぐらいに私設松本零士博物館のページを更新しているから、深夜0時~1時頃の投稿だろうと思う。
実はFacebookに私設松本零士博物館専用ページを持っており、サイトの更新情報をその都度投稿しているので、Facebookページを確認すれば、正確に2月の何日からOGP仕様が変更になってPukiWiki側のページ画像がFacebookに連動出来なくなったのかが判明するハズだ。しかし悪いことに先日、Facebookページ名を完全に変更するために作業してしまったので、過去の投稿が全て失われてしまっている

ともあれ、私設松本零士博物館のページをOGP経由で拡散する際に、Twitterには画像付きで連動が出来るのが、Facebookには画像付きで連動出来ない状況が2ヶ月ほど続いていた。当初は例によって「FBがまたコソッと直すだろう」ぐらいに思っていたが、どうもそんな気配が一切ない。
毎日ページを追加しているので、私設松本零士博物館での「展示」もかなり増えて来たし、Twitterアカウントも色々トラブルがあったものの、順調に稼働している。だから余計にFacebookページの不備と不具合が気になるし、目立つような気がしてならない。
ジリジリと焦っている内に、現今のコロナ禍による緊急事態宣言下でGWに突入してしまった。相変わらず突発的な事象ばかり発生するから予定通りに物事が進まないが、そのついでに、この問題にじっくりと向き合うことにしたのだ。

Facebookがやらかした「デグレード」の詳細

今回の問題を整理すると、

  1. 私設松本零士博物館のページをFacebookへOGP経由でシェアした場合、少なくとも1月25日~2月20日頃までは問題なくページ画像を連動することが出来た
  2. まったく同じ仕様でTwitterには問題なくページ画像を連動したツイートが行えている
  3. 上記問題に関してネットに情報が一切ない(少なくとも私は探せなかった)

ということになる。
つまり、私は私設松本零士博物館サイトの(PukiWikiの)プログラムを一切変更していないので、Facebook側が勝手にOGP部分の仕様を変更したことになり、しかも従来は動いていた仕様なのに現在は動作しない「デグレード」を発生させている、ということになる。
本来なら、Facebook側にデグレードという恥ずかしいチョンボを明確に提示して認めさせ、その上でFacebookにプログラムの修正対応を求めるのがスジである。
ところが、日本国内で平然と言論弾圧をしているような自称「プラットフォーマー」で、世界のGAFAの一翼を担っておいでのFacebook様なので、元よりこんな「恥ずかしい」ことを指摘されて「そうですか、済みません」などと対応するようなタマではない
また厄介なことに、私設松本零士博物館のページをFacebookへOGP経由でシェアした際に「全部のページが画像連動しない」というワケでもない。画像が連動するページとしないページがあるので、それがどれなのか?から調査せねばならない。つまり、ちょっと調べて小手先で対応出来るレベルの問題ではないのである。上記3. でも挙げたが、この問題についてネットに情報が一切ないのも痛い。
ちなみに、PukiWikiからFacebookやTwitterへOGP経由でページ情報を連動する仕様とその実装の詳細については、次の記事を参照して欲しい。

ザックリ簡単に言えば、ページの最初に出現した画像をアイキャッチ画像とし、OGP経由でFacebookやTwitterに連動する仕様にして実装している。しかも私設松本零士博物館は画像による「展示」がメインコンテンツになるため、画像遅延読み込み・画像リサイズプラグインを独自に開発し、ページに表示される画像品質の低下と画像データ転送によるページ表示速度低下を最大限回避するように工夫しているのだ。

図は、私設松本零士博物館の「管理人的親不知讃歌」ページをFacebookのシェアデバッガーで確認した際の画面だが、「修正が必要な問題」としてワーニングが出ている。図赤枠の部分を何度読んでも、具体的に何をどうすれば良いのか全く不明である。

しかし、図の通り当該ページをFacebookへシェアしようとすると、ちゃんとページ画像が連動することが分かる。

ところが、先日「展示」した「マンガ/う/宇宙海賊キャプテンハーロック/秋田書店/01巻」ページをFacebookのシェアデバッガーで確認すると、図赤枠のように「画像として処理できませんでした。破損しているか、フォーマットが無効である可能性があります」とエラーが出てリンクのプレビューに画像は出ない。

当然ながら当該ページをFacebookへシェアしようとすると、ページ画像が連動しないことが分かる。

実際に私設松本零士博物館Facebookページを確認すると、図のような投稿になる。これではFacebookユーザに対する訴求力は限りなくゼロだ。

Twitterではこのようにページ画像が連動してちゃんとツイートが出来る。ゆえに、OGP部分はFacebookと同じ仕様で処理をしているので、明らかにFacebook側の問題だと言えるのだ。
しかし、Facebookシェアデバッガーで得られる情報のみで画像が連動しない原因を突き止めて対応するのは、とてもじゃないが容易なことではない。

OGP仕様のデグレード原因と対策

せっかくこうして記事として残すので、PukiWikiでページに画像を表示する部分に関して技術的に詳細な説明をしつつ、Facebookがやらかしたデグレードの原因とその対策について解説しようと思う。具体的には、デグレード対策前からOGP経由でページ画像がFacebookへ連動していた、私設松本零士博物館の「管理人的親不知讃歌」ページを例に説明しよう。
PukiWikiで特定のページに画像を表示させるには、ページに画像ファイルを「添付」し、refプラグインで表示する。具体的にページはこのような記述となる。

#setlinebreak(off)
&seo(description){「永遠の中二病」重篤患者の管理人が綴る「管理人的親不知讃歌」。親は死んでもやはり親だし、親は子のことを永遠に知り得ない。不定期に展示した内容について、思いついたことを徒然に。雑文!悪文!バッドセンテンス!な管理人一流の駄文を掲載。};
&seo(keywords){管理人,管理人的親不知讃歌};
&seo(tag){管理人,管理人的親不知讃歌};
#setlinebreak(on)
----
タグ:[[管理人>Tag/管理人]], [[管理人的親不知讃歌>Tag/管理人的親不知讃歌]]
----
#br
#ref(top.png,nolink,center,管理人的親不知讃歌)

&lastmod; 更新

* 管理人的親不知讃歌 [#k7dbe79b]

- 2020/02/11 [[初代ミー造の思い出>管理人的親不知讃歌/初代ミー造の思い出]]
- 2020/02/06 [[最期は笑って死ねるような人生-松本零士的生死観>管理人的親不知讃歌/最期は笑って死ねるような人生-松本零士的生死観]]
- 2020/01/26 [[サイト開設に寄せて>管理人的親不知讃歌/サイト開設に寄せて]]

上記10行目の

#ref(top.png,nolink,center,管理人的親不知讃歌)

この部分でページに添付した「top.png」ファイルをrefプラグインで中央に画像表示しているが、HTMLでどのように変換されるか?というと、通常は次のように変換される。

<div class="img_margin" style="text-align:center">
<img src="./?plugin=ref&amp;page=%E7%AE%A1%E7%90%86%E4%BA%BA%E7%9A%84%E8%A6%AA%E4%B8%8D%E7%9F%A5%E8%AE%83%E6%AD%8C&amp;image=top.png&amp;width=1024&amp;height=575" alt="管理人的親不知讃歌" title="管理人的親不知讃歌" />
</div>

2行目のHTML「img」タグで画像を指定しているのが分かるだろう。ここでは画像のソースを「./?plugin=ref」で指定しており、インラインでPukiWikirefプラグインを指定している。
ちなみに「&amp;page=」に続くパラメータでrefプラグインの引数を渡しているが、ページ名の「管理人的親不知讃歌」が日本語のため、エンコードされて「%E7%AE%A1%E7%90%86%E4%BA%BA%E7%9A%84%E8%A6%AA%E4%B8%8D%E7%9F%A5%E8%AE%83%E6%AD%8C」となっている。
私設松本零士博物館では前述しているように、独自開発した画像遅延読み込み・画像リサイズプラグインを組み込んでいるので、実際にHTMLは次のように展開される。

<div class="img_margin" style="text-align:center">
<img class="lazyload" src="image/spacer.png" data-src="./?plugin=resize_image&amp;page=%E7%AE%A1%E7%90%86%E4%BA%BA%E7%9A%84%E8%A6%AA%E4%B8%8D%E7%9F%A5%E8%AE%83%E6%AD%8C&amp;image=top.png&amp;width=1024&amp;height=575" alt="管理人的親不知讃歌" title="管理人的親不知讃歌" />
</div>

2行目のHTML「img」タグで画像を指定しているのは同じだが、プラグイン側で画像を遅延読み込みするために「class=”lazyload” src=”image/spacer.png”」を指定し、画像のソースを「data-src=”./?plugin=resize_image」で指定している。インラインで独自開発のresize_imageプラグインを指定している以外、ページ名以降のパラメータはrefプラグインと同様である。
そこで、FacebookへOGP経由でこのページ画像を連動させるため、次のOGPメタタグを指定している。

<meta property=”og:image” content=”https://museum.dajya-ranger.com/./?plugin=resize_image&amp;page=%E7%AE%A1%E7%90%86%E4%BA%BA%E7%9A%84%E8%A6%AA%E4%B8%8D%E7%9F%A5%E8%AE%83%E6%AD%8C&amp;image=top.png&amp;width=1024&amp;height=575″ />

Facebookシェアデバッガーでは意味不明のワーニングが出るが、

図のようにちゃんとページ画像が連動するのは前述した通りだ。
では、画像に関してまったく同じ記述ではないものの、「マンガ/う/宇宙海賊キャプテンハーロック/秋田書店/01巻」ページの画像はなぜ連動しないのか?
FacebookへOGP経由でページ画像を連動させる部分のOGPメタタグ部分を確認すると、

<meta property=”og:image” content=”https://museum.dajya-ranger.com/?plugin=resize_image&amp;page=%E3%83%9E%E3%83%B3%E3%82%AC%2F%E3%81%86%2F%E5%AE%87%E5%AE%99%E6%B5%B7%E8%B3%8A%E3%82%AD%E3%83%A3%E3%83%97%E3%83%86%E3%83%B3%E3%83%8F%E3%83%BC%E3%83%AD%E3%83%83%E3%82%AF%2F%E7%A7%8B%E7%94%B0%E6%9B%B8%E5%BA%97%2F01%E5%B7%BB%20&amp;image=1.jpg&amp;w=500&amp;h=762″ />

となっている。
これを比較すると、Facebookへ画像が連動する「管理人的親不知讃歌」ページの「og:image」プロパティの内容は194文字だが、画像が連動しない「マンガ/う/宇宙海賊キャプテンハーロック/秋田書店/01巻」ページの同プロパティ内容は307文字となっている。
ここで「OGPプロパティの内容が長すぎるから、Facebook側でエラーになっているのではないか?」という仮説が成立する。そして、そのプロパティ内容はと言えば、画像が紐付けられているPukiWikiページ名が日本語のため、エンコードされて文字列としてムダに長くなっているのだ。であれば、独自開発して組み込んでいるPukiWiki用URL短縮ライブラリでページ名を短縮すれば良いんじゃね?
試しに、画像リサイズプラグインを修正して検証してみると・・・

ビンゴ!( ̄ー ̄)bグッ!

そこで画像遅延読み込み・画像リサイズプラグインURL短縮ライブラリに正式対応させ、私設松本零士博物館太宰治真理教サイトでテストを実施した。そしてURL短縮対応画像遅延読み込み・画像リサイズプラグインとして本サイトのダウンロードページで公開したのである。

私が開発するPukiWiki用プラグインの多くは、現在運用しているPukiWikiサイトそのものや、運用している従来のページ記述内容を(ほぼ)変更することなく導入が可能だ。
今回、画像遅延読み込み・画像リサイズプラグインURL短縮ライブラリに正式対応させてバージョンアップしたが、すでに同プラグインとURL短縮ライブラリを導入している場合は、最新のプラグインをダウンロードし、自サイトへFTPして差し替えるだけでOKだ。
これを機に、現在運用しているPukiWikiサイトにURL短縮ライブラリを導入したい場合は、次の記事を参照して欲しい。

その上で、画像遅延読み込み・画像リサイズプラグインを導入したい場合は、次の記事を参照していただければ、と思う。

なお、ここまで読んでいただければお分かりだと思うが、PukiWikiページ名が日本語かつエンコードされるためにOGP経由で画像がFacebookに連動されないのであって、元々ページ名が短い場合や、ページに添付している画像ファイル名が日本語でクソほど長い場合は本サイトで公開しているプラグインを導入しても、当然ながら問題は解決しない
最後に私から、FacebookでOGP部分をデグレードさせた担当者にひとこと申し上げたい。
豆腐のカドに頭ぶつけて ( ゚Д゚)<氏ね!

おわりに

PukiWikiに限らず、Wikiシステムの多くはページ名がそのままURLになるため、日本人で日本語ページ名を使う圧倒的大多数のWikiシステムユーザは、2月20日以降に発生したFacebookのOGP仕様変更(デグレード)の影響があったと思う。
しかし、ネットでその手の情報が見当たらないようだし、そもそもWikiシステムユーザが絶滅に近いのか、はたまたFacebookなんぞに自サイトページをOGPで連動しているような人が皆無なのか?その辺については良く分からない。
ただ、ここ2ヶ月ほど本サイトでPukiWiki関連記事のPVが目立って伸びているし、PukiWikiのライブラリとプラグインのダウンロード数も伸びている。地味ながら、「私設松本零士博物館太宰治真理教サイトの認知度がPVその他に寄与しているのかも?」と思わなくはない。
だとしたら、こういった情報を発信する奇特な変態は、恐らく私をおいて他にいないだろう。「ならば望むところである」と思って本稿を起こしてみた。本当は、こんなFacebookの尻拭いをするようなことに時間を割くぐらいなら、PukiWikiをさらに改良したいところではあるし、その構想とアイデアも具体化しているのだが。
ともあれ本記事の内容が、PukiWikiサイトを運営している人や、これからPukiWikiサイトを運用する人にとって参考になれば幸いである。

 

 


Warning: strpos() expects parameter 1 to be string, array given in /home/eware/dajya-ranger.com/public_html/wp-includes/compat.php on line 498

Warning: preg_match_all() expects parameter 2 to be string, array given in /home/eware/dajya-ranger.com/public_html/wp-includes/shortcodes.php on line 155
Array

この記事が気に入ったら
いいね ! をお願いします


ITで何かお手伝い出来ることはありませんか?

CTA-IMAGE

本サイトでは、外部サービスと連携して「ITの困った」を解決します!

PukiWikiカテゴリの最新記事