ローカル環境でもOGPを確認したい【localhost OGP チェッカー】
1. OGPは、どんな状態のとき確認できる?
まず、OGP(Open Graph Protocol)とは
Open Graph Protcolの略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWebページのタイトルやイメージ画像、詳細などを正しく伝えるための仕組みです。HTMLの<head>
タグ内に<meta>
タグで指定します。
つまり、「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に拡張機能を追加する
- 上記のリンクを開きます
- [Chrome に追加] をクリックします
- 追加した拡張機能はツールバーにボタンで表示されます
アイコンは拡張機能のアップデートによって変更されている場合があります
OGPを設定したHTMLファイル、画像ファイルを含むプロジェクトディレクトリを開く
任意のプロジェクトを開いてください。
僕は適当なディレクトリを作成し、そこにindex.html
ファイルを作成しています。
ブラウザでのlocalhostの表示を確認する
今回は<head>
タグ内のみが重要なので<body>
タグは適当です。
ツールバーにある、localhost OGP チェッカーを起動する
クリックすることで起動します。
すると上記のようなタブが開きますので、こちらのURLをコピーしましょう。
3. OGP確認ツールでチェックしよう
今回はこちらの「ラッコツール」を利用します。OGPでの表示をシミュレートすることが可能です。
先ほどコピーしたURLを貼り付ける
[確認する]ボタンを押してあげると表示を確認できます。
上記のように表示されました!
まとめ
今回はローカル環境での開発時、「OGP画像ってどうやったら確認できるの?」という問いに対する回答を記事にまとめてみました!
Webサイト、Webアプリケーションはそのシェアの手軽さが強みの一つです。OGP画像を設定することでよりユーザーの興味を引くことができますので、正しく指定するようにしていきましょう!
Discussion