OG 画像プレビュー

Google・Twitter・Facebook・LinkedIn・Slack でのページ表示をプレビューします。メタタグも生成できます。

Title (0/60)

サイト名

Description (0/160)

URL

画像URL

Google Search

example.com

Page Title

A description of the page content will appear here.

Twitter / X

No image

Page Title

A description of the page content will appear here.

example.com

Facebook / Meta

No image

example.com

Page Title

A description of the page content will appear here.

No image

Page Title

example.com

Slack

example.com

Page Title

A description of the page content will appear here.

生成されたメタタグ

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />

<!-- Twitter -->
<meta property="twitter:card" content="summary" />

Preview is approximate. Actual rendering may vary by platform and screen size.

Open Graphタグをプレビューする方法

The IT Hustle の無料OGプレビューツールで、公開前にページがソーシャルメディアでどう表示されるか確認しましょう。

1
ページ情報を入力するページのタイトル、説明文、URL、画像URLを入力します。
2
プラットフォーム別のプレビューを確認するGoogle、Twitter/X、Facebook、LinkedIn、Slackでページがどのように表示されるかを一度に確認できます。
3
文字数制限をチェックする60文字を超えるタイトルや160文字を超える説明文には警告が表示されます。
4
メタタグをコピーする「メタタグをコピー」をクリックすると、ページのhead要素に貼り付けられるHTMLマークアップが得られます。

Open Graph（OG）タグは、ソーシャルメディアで共有された際のページの表示を制御するHTMLメタタグです。プラットフォームがプレビューカードに表示するタイトル、説明文、画像、URLを定義します。

ほとんどのプラットフォームで推奨されるサイズは1200x630ピクセルです。Twitterは大きなサマリーカード用に1200x675にも対応しています。画像は5MB未満に抑え、PNGまたはJPEG形式を使用してください。

TwitterはOGタグに加えて独自のtwitter:cardタグを使用します。他のほとんどのプラットフォーム（Facebook、LinkedIn、Slack）はOGタグを直接読み取ります。コピー機能はOGタグとTwitterタグの両方を生成します。