ローカル環境でOGPをテストできるChrome拡張機能をリリースしました
![Localhost Open Graph Debugger | ローカル環境でOGPのチェックができるChrome拡張機能](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/5f23c69d-3660-43fd-9811-22e4aa62795d/p_119_1.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T074112Z&X-Amz-Expires=3600&X-Amz-Signature=d2c9cc71e5c59e1eae045e5ad48328e628028778a9c9b2436ba9952c511a1438&X-Amz-SignedHeaders=host&x-id=GetObject)
LocalhostでOGPの確認を行える同じようなChrome拡張機能があったのですが、使えなくなっていたのでこの度Localhost Open Graph DebuggerというChrome拡張機能を作りました。
使い方
- Chrome ウェブストアから拡張機能を追加
- チェックしたいローカル上のサイトで拡張機能のアイコンをクリック
- ページ生成処理が完了するとポップアップが開きますので「Open debug page」というリンクをクリック
- すると下記のようなオンラインのページが新しいタブで開きますのでURLをコピーして各デバッガーツールで検証します。
![Localhost Open Graph Debuggerの個別確認ページ](https://prod-files-secure.s3.us-west-2.amazonaws.com/3b8084dc-07d1-4420-98b2-e8e14c2bc711/1cff3a2b-e133-4ef2-9414-1659cc6d9221/p_119_2.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240727%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240727T074112Z&X-Amz-Expires=3600&X-Amz-Signature=7b2c2ef6aa7772d0fc1dea51a474af039b341d0213175b9c95cfcb2b9b371c03&X-Amz-SignedHeaders=host&x-id=GetObject)
仕組み&やっていること
- 拡張機能のアイコンをクリック
- 表示しているローカル上のサイトのmetaタグ及びmetaタグで指定されている画像を取得
- 取得したmetaタグと画像をog.nullnull.devに送信
- og.nullnull.dev側で送られて来たデータを整形して保存
- metaタグを吐き出す新しいページを生成
という流れになっています。
生成した新しいページ、metaタグ、画像等の全てのデータは15分以上経つと自動で削除されるようになっています。 Cronで10分置きにページの生成時間をチェックして15分以上経過したものを削除するようにしているので、正確には生成されてから15-25分の範囲で削除されるようになっています。
Delete this pageボタンを押すことで即座に削除することも可能です。