localhostの状態でOGPのテストを開発環境で行う

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/ccc41f10-1524-770d-0156-506a420fb6ee.png)

# TL; DR
このChrome拡張機能を使え
[<img width="627" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/5ba17114-5eff-00f6-259e-dc92b2cd8ab3.png">](https://chrome.google.com/webstore/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn)

# はじめに
自社サービス開発するエンジニアの方であれば、自社のHPやサービスのLPのコーディングやメンテナンスも自分の担当である方は多いでしょう。そうなればSEO等のマーケティングに絡む要件の開発もあると思います。

今回はそんな中でも、SNSでシェアする際に見た目をリッチにできる”OGP”のコーディングに使用したデバッグツールが便利だったので紹介します。

# OGPについて
## 概要
”Open Graph protocol”の略で、SNSでURLリンクをシェアした際に”サムネイル画像”や”概要”をいい感じに表示させるための仕組みです。SNSで大きく画像とかが表示されるアレです。

### Twitter
[<img width="593" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/7661dd85-0c0a-e726-3daa-762e45d500f4.png">](https://dietplus.jp/s/app_dietplus.html)

### Facebook
[<img width="503" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/5e57089f-a7fd-8c73-2f72-583b19ddd930.png">](https://dietplus.jp/s/app_dietplus.html)

> ~~しれっと自社サービスを宣伝するスタイル~~

このOGPを最も活用している代表的な企業のひとつに『[質問箱](https://peing.net/ja/)』を開発・運営している[株式会社ジラフ](https://jiraffe.co.jp/)さんが挙げられます。質問箱サービスは、[大きなテーブルで10億レコードものデータが存在する](https://speakerdeck.com/umemotoryo/zhi-wen-xiang-falsefu-he-dui-ce)モンスターサービスですが、OGPを上手く活用して質問と回答を生成し、Twitter上でのコミュニケーションを可能にしています。

それくらいSNSでの表示の仕方がサービスの流入に与える影響が大きい、と言えると思います。

## どんな項目を記述したらいいの？
細々したことを調べるのは面倒くさいですよね。
私は、ざっくり以下の項目を参考にして実装しています。

[<img width="627" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/bcbf3834-eca7-562e-8a96-cd9a0fb26612.png">](https://ferret-plus.com/610)

# ツールの話
## OGPのテストめんどくさい（めんどくさい）
OGP開発の面倒なところは**開発中のテストがしづらい**ところです。

実際のOGPの設定やシェア時の表示を確認するため、各社がバリデーターを提供しています。

- Twitter：https://cards-dev.twitter.com/validator
- Facebook：https://developers.facebook.com/tools/debug/sharing/?locale=ja_JP

しかし、これらのバリデーターは、**提供各社のサーバーがURLにアクセスしスクレイピングを行ってテストする**ため、当然ローカル環境（localhost）でのOGPの実装をテストすることはできません。

また、stg環境であっても、企業によってはIP制限を掛けていたり認証機構を設けていたりするので、うまくバリデーターがサーバーにアクセスできないことがあります。

とはいえ、設定ミスを考慮すると本番にいきなり上げるのは非常に危険です。
OGPの開発は結構めんどくさいのですね。

## Localhost OGP チェッカー
話が少し長くなりましたが、↓の『**Localhost OGP チェッカー**』を使えば、ローカル環境のままでOGPの表示テストをすることができます。難しい初期設定やWebサーバーを立てたりする必要もないため、非常に簡単に使えます。

[<img width="627" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/5ba17114-5eff-00f6-259e-dc92b2cd8ab3.png">](https://chrome.google.com/webstore/detail/localhost-open-graph-chec/gcbnmkhkglonipggglncobhklaegphgn)

説明文や挙動を見てると「**一時的にlocalhostの <head>タグをFirebaseのアプリケーションにコピー→ホスティングしてOGPを埋め込みバリデーター用にURLを生成**」をやってくれるツールのようです。

# 使い方
普段お使いのChromeに拡張機能をインストールした後の説明を簡単に行います。
この解説記事が必要ないくらい簡単なので、ざっくりと紹介していきます。

## localhostを開いているタブで拡張機能をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/7b706a50-2862-3651-948a-6ac464788f4a.png)

localhostを開いているタブでChrome拡張のアイコンをクリックすると、拡張機能のページにもある上記の画面が表示されます。テキストボックスの中に、URLが自動生成されています。

## バリデーターに掛ける
さて、あとは生成されたURLをバリデーターに掛けてテストするだけです（~~なんということでしょう~~）。

### Twitter
[<img width="1679" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/e4201913-7e82-b6cd-3c54-780e4d734a37.png">](https://cards-dev.twitter.com/validator)

### Facebook
[<img width="1679" alt="image.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/110571/8fa82e39-ac6c-4833-9136-ccff3c068525.png">](https://developers.facebook.com/tools/debug/sharing/?locale=ja_JP)

生成されたURLおよびホスティングの状態はあくまで一時的なものなので、検証が終わったら「Erase This Page NOW」から削除しておきましょう。以上で操作は終わりです。