👀

OGPの設定をしたローカル環境で、Twitter共有時のプレビューを確認する方法

2023/07/27に公開

React

問題

Twitterのシェアボタンを追加してみたけどそれがうまいこと機能しているかlocalhostからテストしたい！

OGPってなんだという方は以下サイトから（そんな人はここにたどり着かないとも思うが）

https://ferret-plus.com/610

現状

現在RemixでWebアプリを開発中。
react-shareを使ってシェアボタンを作ってOGPも設定してみたものの、localhostからシェアしようとすると以下のようになってしまう。

本当はOGPに設定した画像を表示してほしい。

解決してみようとした（失敗）

Chrome拡張（Localhost OGP チェッカー）

「localhost OGP」とかでググると以下の記事が見つかる。
Chrome拡張を入れるとlocalhostのタグ情報を一時的にFirebaseのアプリケーションにコピーして、OGPを埋め込んだWebURLを作成してくれるっぽい。

Twitter公式のCardをプレビューしてくれるサイト（https://cards-dev.twitter.com/validator）にこのURLを入れてみるが、プレビュー機能はなくなったよ！ と言われる

プレビューはされないまでも「successfully」と書いてあるしmetaタグは認識してるっぽい。

解決！ by ngrok

そういや普通にTwitterでツイートする時にURL貼ったらプレビューされるんだし、なんらかの形でWeb上にアップ出来ればプレビューできるかどうかは確認できるのでは？と思いngrokを試してみる。

結論この方法で良かった。

使い方

まずはngrokコマンドを使えるようにする。

$ brew install ngrok
$ ngrok --version

次に、 https://ngrok.com/ からログインして https://dashboard.ngrok.com/get-started/setup にアクセスする

ここに書いてある手順に従い以下コマンドを実行する。

$ ngrok config add-authtoken HOGEhogeHogehoge

# localhostでは3000番を使用している
$ ngrok http 3000 
...
Forwarding    https://    <- このURLにアクセス

プレビュー

これを最近Xとかいう名前になったTwitterに貼って...無事プレビューされることが確認できた🎉

ちょっとした注意点だけど、公開されてからすぐにURLを取得してTwitterに貼り付けても画像がうまいこと表示されない。1分くらい待ったらうまくいく。

コード

Remixではmetaタグを以下のように定義した。
og:imageではなくtwitter:imageを使うことでプレビュー画像が表示された。

export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
  if (data && data.article) {
    return [
      { title: data.article.title },
      { property: "og:title", content: data.article.title },
      // ❌ og:imageはTwitterのプレビューでは表示されない
      { property: "og:image", content: "https://placehold.jp/300x300.png" },
      
      { name: "twitter:card", content: "summary_large_image" },
      { name: "twitter:description", content: "これは詳細メッセージです" },
      // ✅ こっちの画像が表示される
      { name: "twitter:image", content: "https://placehold.jp/300x300.png" },
    ];
  } else {
    return [{ title: "記事が見つかりません" }];
  }
};