ビジネス・仕事効率化

メタタグプレビュー

OGPメタタグの配置イメージを比較。Google検索結果・Xカード・Facebookシェアの概略プレビュー、入力検証、HTML生成に対応。

登録不要

入力フォーム

14 / 300文字・上限内

タイトルを使用できます（14文字）

39 / 1000文字・上限内

説明文を使用できます（39文字）

ページURLは有効なHTTP(S) URLです

サイト名を使用できます（4文字）

OG画像URLは有効なHTTP(S) URLです

12 / 300文字・上限内

OG画像の代替テキストを使用できます（12文字）

Xカード形式

OGP localeの形式は有効です

プレビュー

配置の概略イメージです。実際の表示・省略・採用文は各サービス、端末、検索内容で変わります。画像URLへのアクセスは行いません。

ページタイトル | サイト名
example.com/page
ここにページの説明文を入力します。検索結果や共有カードの候補文として使います。

バリデーション結果

生成を妨げるエラーはありません。警告は任意項目の案内です。

  • 正常: タイトルを使用できます（14文字）
  • 正常: 説明文を使用できます（39文字）
  • 正常: ページURLは有効なHTTP(S) URLです
  • 正常: サイト名を使用できます（4文字）
  • 正常: OG画像URLは有効なHTTP(S) URLです
  • 正常: OG画像の代替テキストを使用できます（12文字）
  • 正常: Xカード形式は有効です
  • 正常: OGP localeの形式は有効です

HTMLコード出力

エラーがある間は、不正なコードの貼り付けを防ぐためコピーできません。

<title>ページタイトル | サイト名</title>
<meta name="description" content="ここにページの説明文を入力します。検索結果や共有カードの候補文として使います。" />
<meta property="og:title" content="ページタイトル | サイト名" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:alt" content="ページ内容を表すOG画像" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:description" content="ここにページの説明文を入力します。検索結果や共有カードの候補文として使います。" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="ページタイトル | サイト名" />
<meta name="twitter:description" content="ここにページの説明文を入力します。検索結果や共有カードの候補文として使います。" />
<meta name="twitter:image" content="https://example.com/og-image.jpg" />
<meta name="twitter:image:alt" content="ページ内容を表すOG画像" />
このツールについて問い合わせる →

メタタグプレビューについて

メタタグとOGPの役割

メタタグはHTMLの<head>内で、ページについての候補情報を検索サービスや共有先へ伝えます。実際に採用される表示は、各サービスの解析結果や端末によって変わります。

  • title：ページ題名。ブラウザのタブや検索結果のタイトル候補になります
  • meta description：ページ説明。Googleはページ本文などからスニペットを自動生成し、状況によりこの値を使うことがあります
  • Open Graph Protocol（OGP）：共有先がタイトル・URL・画像などを解釈するための構造化メタデータです
  • X Cardメタデータ：Xでのカード形式や候補内容を指定します

本ツールは入力内容から一般的なHTMLを生成します。公開後は各サービスの公式デバッガーや実際の共有結果でも確認してください。

必須項目と任意項目

Open Graph Protocolが基本メタデータとして必須にしているのは、og:title、og:type、og:image、og:urlの4項目です。本ツールはこれらに必要なタイトル・ページURL・画像URLが不正な間、貼り付け用コードを生成しません。

og:description、og:site_name、og:localeは任意です。OGP仕様では画像を指定する場合、内容を説明するog:image:altも指定するよう案内されています。本ツールは同じ代替テキストをtwitter:image:altにも出力します。

プレビューの見方

Google検索結果、Xカード、Facebookシェアの3種類を切り替えられます。これは入力値の配置を比較するための概略イメージであり、各サービスの画面を完全再現するものではありません。画像URLへアクセスせず、URL文字列をプレースホルダーとして表示します。

Googleはtitle要素や説明文に固定の文字数上限を設けておらず、端末幅や検索内容に応じてタイトルリンクやスニペットを省略・生成します。そのため、本ツールの文字数は入力上限と編集の目安として表示し、特定文字数での掲載を保証しません。

安全に使うための確認手順

  1. ページ内容を端的に表すタイトルと説明文を入力します
  2. 公開予定の絶対HTTP(S) URLと、外部から取得できる画像URLを入力します
  3. 画像が見えない利用者にも内容が伝わる代替テキストを入力します
  4. エラーが0件であることを確認してHTMLをコピーし、ページの<head>へ組み込みます
  5. 公開後に実ページのHTML、クロール可否、各共有先の取得結果を確認します

本ツールはURL先へ接続しないため、画像の存在、HTTP応答、実際の寸法、クロール制限、キャッシュ状態までは検証しません。

よくある質問

Q. 入力したメタタグ情報はNanTooの処理サーバーへ送られますか？
本ツールの入力値の検証・プレビュー・HTML生成はブラウザ内で行い、その処理のために入力値をNanTooのサーバーへ送信しません。ページ表示、アクセス解析、広告など通常のサイト通信は別に発生し得るため、サイト全体の通信がないという意味ではありません。
Q. OGPを設定したのに共有プレビューへ反映されません
まず公開ページのheadに正しいタグがあること、ページと画像のURLを外部からHTTP(S)で取得できること、robots設定や認証で遮断していないことを確認してください。共有先の再取得やキャッシュ更新方法は変わるため、Facebook Sharing Debuggerなど各サービスの現行公式手順で確認してください。
Q. titleとog:titleは同じ内容でよいですか？
同じ内容から始められます。ただし検索サービスも共有先も表示を独自に生成・省略する場合があります。ページ内容と一致する簡潔な文にし、検索向けと共有向けで変更する場合も誤解を招く表現にしないでください。
Q. summaryとsummary_large_imageの違いは何ですか？
本ツールではsummaryを小型画像付き、summary_large_imageを横長の大型画像付きという概略配置で表示します。実際のカード形状や画像の切り抜きはX側の仕様・端末・取得結果で変わるため、公開後の実表示も確認してください。
Q. og:localeは必須ですか？
Open Graph Protocolでは任意項目です。指定する場合はlanguage_TERRITORY形式を使い、日本語（日本）ならja_JPと入力します。未指定なら空のタグは出力しません。
このツールを評価
—(0件)