ローカル環境でも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