>_devtools-hub

OG Tag Preview

URLを入力してSNSシェア時のOGPプレビューを確認

開発者向けSEOSNS

URLを入力するとそのページの og:title / og:description / og:image などの OGP メタタグをサーバーサイドで取得し、Twitter Card・Facebook・Slack の3種類のカードUIでプレビュー表示します。SNSシェア前にサムネイルやタイトルが正しく設定されているかを即確認できます。

広告

OG Tag Preview

URL

Twitter / X

summary_large_image カード

Facebook

og:image + タイトル + 説明

Slack

アンフール + サムネイル

URLを入力して「取得」を押すと3プラットフォームのプレビューが表示されます

Features

  • URL入力でOGPメタタグをサーバーサイド取得(CORS回避)
  • Twitter Card / Facebook / Slack の3種プレビュー表示
  • og:title・og:description・og:image・og:type・og:url を表示
  • twitter:card・twitter:title・twitter:description・twitter:image を表示
  • 取得した全metaタグの一覧テーブル+ワンクリックコピー

Desktop Only

有料版のみ

デスクトップ版(BOOTH)でのみ使える機能

  • 複数URL一括チェック(CSVリスト入力)
  • チェック結果をCSVファイルにエクスポート

Desktop App

デスクトップ版を入手する

Web版にはない機能をデスクトップ版で追加しています。

  • 複数URL一括チェック(CSVリスト入力)
  • チェック結果をCSVファイルにエクスポート
BOOTH で見る

この作業の手順ガイド


OGP(Open Graph Protocol)とは — SNSシェアの見た目を制御する仕組み

OGP(Open Graph Protocol)はFacebookが策定したメタデータの仕様で、WebページをSNSでシェアしたときにタイトル・説明文・サムネイル画像をどう表示するかをHTML内のmetaタグで指定します。og:title / og:description / og:image の3つが最低限必要で、これらが未設定だとSNS側が自動推定した内容が表示されます。

og:image のサイズと形式

og:imageは1200×630px(横長)が最も安全なサイズです。正方形(1:1)はInstagramやWhatsAppで有利ですが、Twitter/Facebookでは横長が推奨されます。形式はJPEG・PNG・GIF・WebPが使えますが、JPEGが最も互換性が高いです。ファイルサイズは8MB未満、最低200×200px以上が必要です。

twitter:card の種類と使い分け

twitter:cardには4種類あります。summary(正方形サムネイル+テキスト)、summary_large_image(横長大画像)、app(アプリカード)、player(動画/音声)。通常のWebページにはsummary_large_imageを使うと視認性が高くなります。twitter:cardが未設定の場合はsummaryにフォールバックします。og:titleやog:imageはtwitterのフォールバックとしても機能します。

og:urlとog:site_nameの役割

og:urlはそのページの正規URLを指定します。リダイレクトやクエリパラメータが付いたURLでシェアされた場合でも、SNS側のカウントやキャッシュを正しいURLに統一できます。og:site_nameはWebサイト全体の名称で、Slackなどのプレビューでタイトルの上に表示されます。

OGPキャッシュのリセット方法

FacebookはURLのOGP情報を一定期間キャッシュします。修正後に反映させるにはFacebook Sharing Debuggerでキャッシュをクリアします。Twitterは現在(2024年以降)OGPのキャッシュクリアツールを廃止しており、しばらく待つかURLにクエリパラメータを付けてシェアするのが現実的な対処法です。

広告

Related Tools

Lockfile Diff

package-lock.json の更新前後を比較 — 版の動きをメジャー/マイナー/パッチで分類

npmバージョン管理開発者向け

使ってみる →

Text Encoding Checker

文字コードを判定して UTF-8 に変換 — 化けた文字列の復元も

テキストエンコード開発者向け

使ってみる →

Line Ending Inspector

改行コードを検査 — CRLF / LF / CR の内訳と混在、BOMの有無

テキストエンコード開発者向け

使ってみる →

このツールを共有する