DiffCheck

Open Graph プレビュー

X/Twitter、Facebook、LinkedIn でシェアした際のカード表示をプレビュー。og: と twitter: メタタグを即座に生成。

メタタグデータ

推奨：50〜60文字

推奨：120〜160文字

推奨：1200×630 px

カードプレビュー

example.com

My Awesome Page Title

A short description of the page content, shown in social media preview cards.

プレビューは近似表示です。実際の表示はプラットフォームにより異なる場合があります。

生成されたメタタグ

What Is the Open Graph Preview Tool?

The Open Graph Preview tool lets you fill in your page's OG meta tag values and instantly see how the social media card will look on X (Twitter), Facebook, and LinkedIn. No need to publish the page first — just enter your title, description, image URL, and site name, then switch between platform previews.

When you're happy with the preview, copy the ready-to-use <meta> tag HTML and paste it into your page's <head>.

How to Use the Open Graph Preview Tool

  1. Enter your page title — shown as the card heading on all platforms.
  2. Add a description (under 160 characters for best results).
  3. Paste an image URL pointing to a 1200×630px image.
  4. Fill in the canonical URL and optional site name.
  5. Switch between X/Twitter, Facebook, and LinkedIn tabs to see the platform-specific card.
  6. Click Copy to get the generated meta tag HTML for your page.

Features

  • Live preview for X/Twitter, Facebook, and LinkedIn
  • Supports summary and summary_large_image Twitter card types
  • Generates both og: and twitter: meta tags in one block
  • Real image loading — see exactly how your OG image renders
  • One-click copy of the complete meta tag HTML
  • Pre-filled sample data to get started immediately

FAQ

What are Open Graph meta tags?

Open Graph (OG) meta tags are HTML tags in the <head> that control how a page appears when shared on social media. They define the title, description, image, and URL shown in link preview cards on platforms like Facebook, Twitter, and LinkedIn.

What image size should I use for Open Graph?

The recommended OG image size is 1200×630 pixels (1.91:1 aspect ratio). This size renders well on all major platforms. Images smaller than 600×315 may not be used at all by some platforms.

What is the difference between twitter:card summary and summary_large_image?

summary shows a small square thumbnail beside the text. summary_large_image shows the image above the title and description in a large format. summary_large_image is recommended for most content-heavy pages.

Do I need both og: and twitter: tags?

Yes, for best coverage. Twitter reads og: tags as a fallback, but setting explicit twitter: tags gives you more control over how your card appears on X/Twitter. Facebook and LinkedIn use og: tags.