OGP:苦闘の記録
ブログの個別投稿ページのOGPが画像だけXで表示されない問題が起きてました。
VercelのOpen GraphページやOGP確認ツールでは正しい画像が見えるけど本番ではダメという。
ブラウザーのネットワークモニターを手がかりに色々やっても追跡できる範囲には限りがあるし、結局行き当たりばったりでゴチャゴチャやるよりもちゃんとログ出してくれるツール(X Card Validator、robots.txt Validator and Testing Tool)が一番頼りになりました。
最終的に突き止めた原因は、Ghostのデフォルトのrobots.txtが全User-AgentにDisallow 命令出してたことでした。
そこでGhostのドキュメントに従ってCasperテーマのルートにrobots.txt作ってオーバーライドしてみたりしたけど上記バリデーターの実行結果は変わらず。
元よりテーマを直にいじるのはメンテ効率悪いので(せっかくのヘッドレスブログなのにクライアントのアプデとかOSのアップグレードにいちいち手動で対応するのは得策ではない)、フロントエンドでどうにかできないかと思ってやった。
できた!
昨日も試した、Ghostのクライアントサーバーから画像フェッチしてくるエンドポイントを作る方法でうまくいきました。
ただし、参照元の投稿ページとAPI自身のルートのみでプリレンダリングを有効にしてると取得に失敗する模様。
(プリレンダリング有効にしてたのもまたOGPのための試行錯誤の一環だったんですがこれは結局関係なかった)
ちなみにうちのブログはワード検索のルートがあるので、サイト全体をSSGで構成することができません。最上位ルートでは有効化してそこだけプリレンダリング無効にして…ってのも考えたけど、ルートパラメータがネストしてるルートとかもかなり面倒で(一度処理書いたことはある)この点は全体的に後回し。
何より、対になるGhost webhookのイベントがサイト変更時(一括)、もしくは個別のデータ変更時というラインナップなので、作成中の記事を途中保存する度にデプロイとかしたくなければ大量のフックをズラズラ設定しなきゃいけなくて、管理が面倒ゆえにプリレンダリングやめた時点で一旦全部破棄しました。
他にはさっきからVercelが自動デプロイしてくれん、なんでやーと思ってたらGitLabとの接続が外れてるのを発見したりしつつ…
=> [追記:] Vercelのエラーでした。

七転八倒しました。あーよかった。
もう途中(解決直前の最後のほう)、全てのやる気がなくなるかと思ったね。これはもう私だけ同人やるなってことでは?と気を腐らせ始めたり。追い詰められるとロクなこと考えんわ。
あーもう!これでOGPは怖くない!
サイト完成させる上での懸念も一個一個取っ払われていきますね。あとはSSG対応くらいか。やっぱやったほうがいいよね。
とにかく、絵を描いてはブログに載せる(そしてXで更新報告)サイクルが可能になったぞ。よかったねー。差し替えできるし色々いいです。
なおブログの更新そのものは全部はXに載せてなくてなんか気の向いた範囲でって感じ。サイトの更新は全部載せると思われます。そのためにXアカウント作ったし。
