本文へスキップ
ToolMug

Open Graph とメタタグの確認

URL を入力すると、title、description、Open Graph、Twitter Card のタグを読み取り、検索結果、SNS の大きなカード、チャットのリンクプレビューを確認できます。共有画像の不足、長すぎるタイトル、canonical URL の欠落、意図しない noindex なども見つけられます。

サーバーで処理し、1 時間以内に削除します

使い方

  1. URL を入力します。スキームを省略すると https を使います。
  2. 「検索」をクリックして、3 種類のプレビューを確認します。
  3. 「チェック」に表示されたタグを修正し、もう一度検索して確認します。

オプションの説明

読み取る範囲
ページの <head> だけを最大 1 MB 読み取ります。UTF-8 や GBK などのエンコーディングは自動検出します。
長さの目安
タイトルは約 60 文字、説明は 50〜160 文字にします。検索エンジンはピクセル幅で省略するため、これは目安です。
アクセス制限
ポート 80、443、8080、8443 の公開アドレスだけにアクセスし、最大 5 回までリダイレクトを追跡します。

プレビューが使うタグ

3 つのプレビューは、それぞれのテキストを、次の順序で最初に見つかったタグから取ります。

プレビューの部分 取得元 (最初に見つかったもの)
タイトル og:title、次に twitter:title、次にページのタイトル
説明 og:description、次に twitter:description、次にメタディスクリプション
画像 og:image、次に twitter:image

「チェック結果」の一覧には、og:title、og:description、og:image、twitter:card の欠落、http または https の絶対 URL ではない og:image、長さの目安から外れたタイトルや説明が表示されます。これらをすべて満たす最小限のセットは、ページの head に次のように書きます。

<meta property="og:title" content="Page title">
<meta property="og:description" content="One or two sentences about the page.">
<meta property="og:image" content="https://example.com/share.png">
<meta property="og:url" content="https://example.com/page">
<meta name="twitter:card" content="summary_large_image">

Open Graph プロトコル (ogp.me) は、og:title、og:type、og:image、og:url を基本のプロパティとして定義しています。twitter:card の値は、summary (小さいカード) と summary_large_image (テキストの上に大きな画像) です。

よくある質問

タグを変更したのに SNS アプリが古いカードを表示するのはなぜですか?

プラットフォームはリンクプレビューを数時間から数日キャッシュします。Facebook、LinkedIn、X には新しく取得させる公式デバッガーがあります。

og:image はどのサイズがよいですか?

一般的には 1200×630 ピクセル(約 1.91:1)、5 MB 未満、絶対 URL の https が適しています。小さな正方形画像は切り抜かれたり小さいカードになったりします。

ブラウザでは表示されるのにタグが見つからないのはなぜですか?

多くの SNS クローラーと同様、このツールはサーバーが返す HTML を読み、JavaScript は実行しません。タグはサーバー側レンダリングや静的生成後の HTML に含める必要があります。

プライバシー

ファイルは HTTPS でアップロードして処理され、1 時間以内に自動的に削除されます。

関連ツール