🫧

ローカル環境でもOGPを確認したい【localhost OGP チェッカー】

2025/03/05に公開

1. OGPは、どんな状態のとき確認できる?

まず、OGP(Open Graph Protocol)とは

Open Graph Protcolの略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWebページのタイトルやイメージ画像、詳細などを正しく伝えるための仕組みです。HTMLの<head>タグ内に<meta>タグで指定します。
OGPとはWebページをSNSで共有したときに情報を伝える仕組み

つまり、「URLで共有できる状態」が必要

  • となると、レンタルサーバー(LOLIPOP, Xサーバー)やホスティングツール(GitHub Pages, Netlify)などで公開する必要があるのか、、
  • localhostでGo Liveしてる開発中は確認できないか、、

とお思いでしょうが、実は方法はそれだけではありません!

<head>タグの中身だけでもURLで共有できればいい

URLをシェアしたときにどう表示されるかなので、ブラウザにどう表示されるかを構成する<body>タグの中身はどうだっていいのです。
関係のある<head>タグとOGP画像、favicon画像たちだけを公開できる方法があれば、もっと簡単に求めているものを実現できそうですよね。

そんなサービスが、あります!!!!!
そう、Google Chromeには。偉大な拡張機能を作ってくれた先人たちに感謝します。

2. localhostでもOGPを確認できる"擬似"URLを発行しよう【Chrome拡張機能】

さぁ、本日の本題となるGoogle Chrome拡張機能「localhost OGP チェッカー」をご紹介します。
もう、その名の通りです。
localhost:xxxxのURLの状態で、OGPをチェックするため」 のURLを発行してくれます!

Chromeに拡張機能を追加する

https://chromewebstore.google.com/detail/localhost-ogp-チェッカー/gcbnmkhkglonipggglncobhklaegphgn?hl=ja

  1. 上記のリンクを開きます
  2. [Chrome に追加] をクリックします
  3. 追加した拡張機能はツールバーにボタンで表示されます
    Chromeのツールバーはここ
    アイコンは拡張機能のアップデートによって変更されている場合があります

OGPを設定したHTMLファイル、画像ファイルを含むプロジェクトディレクトリを開く

任意のプロジェクトを開いてください。
適当なプロジェクトを開く
僕は適当なディレクトリを作成し、そこにindex.htmlファイルを作成しています。

ブラウザでのlocalhostの表示を確認する

localhostでのブラウザ表示
今回は<head>タグ内のみが重要なので<body>タグは適当です。

ツールバーにある、localhost OGP チェッカーを起動する

クリックすることで起動します。

すると上記のようなタブが開きますので、こちらのURLをコピーしましょう。

3. OGP確認ツールでチェックしよう

今回はこちらの「ラッコツール」を利用します。OGPでの表示をシミュレートすることが可能です。
https://rakko.tools/tools/9/

先ほどコピーしたURLを貼り付ける

[確認する]ボタンを押してあげると表示を確認できます。
OGPのシミュレート
上記のように表示されました!

まとめ

今回はローカル環境での開発時、「OGP画像ってどうやったら確認できるの?」という問いに対する回答を記事にまとめてみました!
Webサイト、Webアプリケーションはそのシェアの手軽さが強みの一つです。OGP画像を設定することでよりユーザーの興味を引くことができますので、正しく指定するようにしていきましょう!

Discussion