Web & 認証

OG メタタグプレビュー

公開前に Google、Facebook、X / Twitter、LinkedIn での見え方を確認します。

無料で利用 登録不要 ブラウザ内で実行

ツール操作エリア

Generated meta tags

<meta property="og:title" content="My Awesome Page">
<meta property="og:description" content="This is a great description of the page that will appear in search results and social media previews.">
<meta property="og:url" content="https://example.com/my-page">
<meta property="og:image" content="https://placehold.co/1200x630/3b82f6/white?text=OG+Image">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="My Awesome Page">
<meta name="twitter:description" content="This is a great description of the page that will appear in search results and social media previews.">
<meta name="twitter:image" content="https://placehold.co/1200x630/3b82f6/white?text=OG+Image">

Google Search Preview

example.com/my-page

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

Facebook / LinkedIn Preview

OG Image

example.com/my-page

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

Twitter Card Preview

Twitter Card

My Awesome Page

This is a great description of the page that will appear in search results and social media previews.

example.com/my-page

What is OG メタタグプレビュー?

OG メタタグプレビュー helps people convert, inspect, validate, or generate open graph, og, meta tag, preview, social, share directly in the browser. It is designed for everyday work, coding, debugging, documentation, quality checks, and data preparation where clear input, reliable output, and privacy-first local processing matter.

OG メタタグプレビューの使い方

  1. 1作りたい設定、ポリシー、リクエスト、メッセージの条件をフォームで入力します。
  2. 2必要なオプションを切り替えながら、出力内容が要件に合うよう調整します。
  3. 3生成された設定、コード、コマンド、プレビューを確認し、そのままコピーして再利用します。

Common OG メタタグプレビュー use cases

Developer debugging

Use OG メタタグプレビュー to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.

Review before reuse

Validate or transform open graph, og, meta tag, preview, social, share before adding the result to a project, document, form, message, or shared file.

Privacy-first browser processing

Run common open graph, og, meta tag, preview, social, share tasks locally in the browser without sending sensitive development data to a backend service.

よくある質問

生成結果をそのまま本番へ貼れますか?

たたき台づくりに向いたツールです。本番投入前には環境固有の値、セキュリティ設定、命名規則、レビュー手順を反映してください。

秘密情報や内部設定を入力するときの注意点はありますか?

実データを扱う前に、ブラウザの保存設定、組織ポリシー、利用環境のログ取得有無を確認してください。必要なら匿名化したサンプルで手順を確かめると安全です。