画像のサイズは？

1200 × 630 ピクセル（1.91:1）が安全なデフォルト — Facebook、LinkedIn、Slack、Twitter の `summary_large_image` カードを満たす。Twitter のプレーン `summary` カードは 1:1 を使うが、ほとんどのサイトは両方に同じ画像を使う。

`summary` と `summary_large_image` の違いは？

`summary` はタイトル・説明の横に小さな正方形のサムネイル。`summary_large_image` はタイトルの上に幅いっぱいのバナー画像。コンテンツ重視の投稿には大きい方、画像が補助的な場合は小さい方。

正規リンクは重要？

はい。クローラーがそれを使って URL のバリアント（`?utm_source=…`、末尾スラッシュ）を重複排除し、ソーシャルエンゲージメント（いいね、コメント）を単一の正規 URL にルーティングします。

Open Graph & Twitter Card ジェネレータ

開発

ユーザーが URL を共有したときに、すべてのソーシャルプラットフォーム・チャットアプリが探す標準のプレビューカードメタデータブロックを生成。タイトル・説明・画像・タイプ・Twitter 固有のカードバリアントすべて設定可能。小さなプレビューでソーシャルフィードでの見え方を大まかに表示。結果をページの `<head>` にそのままコピー。

—

基本タイトル説明正規 URL画像 URL画像の代替テキスト

Open Graph

サイト名og:typeog:locale

Twitter Card

twitter:cardtwitter:site (@)twitter:creator (@)

<meta> ブロック

<title>Site Title — Page Title</title>
<meta name="description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph -->
<meta property="og:title" content="Site Title — Page Title" />
<meta property="og:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/og-image.png" />
<meta property="og:image:alt" content="Cover image describing the page" />
<meta property="og:site_name" content="Example Site" />
<meta property="og:type" content="website" />
<meta property="og:locale" content="en_US" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Site Title — Page Title" />
<meta name="twitter:description" content="A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card." />
<meta name="twitter:image" content="https://example.com/og-image.png" />
<meta name="twitter:image:alt" content="Cover image describing the page" />
<meta name="twitter:site" content="@example" />
<meta name="twitter:creator" content="@author" />

プレビュー

Example Site

Site Title — Page Title

A one-sentence summary used by Google, Twitter, Slack, LinkedIn, and other crawlers when they show a preview card.

デプロイ後、Facebook の Sharing Debugger や Twitter の Card Validator で検証してください。

使い方

タイトル・説明・正規 URL・1200×630 のカバー画像 URL を入力。
OG `og:type`（article、website、…）と Twitter カードスタイル（summary、summary_large_image、…）を選択。
生成されたブロックをページの `<head>` にコピー — HTML、Astro、Next.js などで動作。

よくある質問

画像のサイズは？: 1200 × 630 ピクセル（1.91:1）が安全なデフォルト — Facebook、LinkedIn、Slack、Twitter の `summary_large_image` カードを満たす。Twitter のプレーン `summary` カードは 1:1 を使うが、ほとんどのサイトは両方に同じ画像を使う。
`summary` と `summary_large_image` の違いは？: `summary` はタイトル・説明の横に小さな正方形のサムネイル。`summary_large_image` はタイトルの上に幅いっぱいのバナー画像。コンテンツ重視の投稿には大きい方、画像が補助的な場合は小さい方。
正規リンクは重要？: はい。クローラーがそれを使って URL のバリアント（`?utm_source=…`、末尾スラッシュ）を重複排除し、ソーシャルエンゲージメント（いいね、コメント）を単一の正規 URL にルーティングします。

Open Graph & Twitter Card ジェネレータ

Site Title — Page Title

使い方

よくある質問

関連ツール

JWT デコーダー

UUID ジェネレーター

ハッシュ生成 (SHA)

URL エンコーダー / デコーダー

Base64 エンコーダー / デコーダー

JSON フォーマッター & バリデーター