📱 SNS Card Preview

You can enter OGP meta tags and preview how they will appear on each social networking platform in real time. Automatic generation and copying of meta tag HTML is also available.

Enter OGP information

Title displayed when shared on social media
Description displayed when shared (70-120 characters recommended)
Recommended size: 1200×630px (aspect ratio 1.91:1)

preview

🖼

Generated meta tags

Usage and Application Examples

  • Real-time preview of display on each social networking service by entering OGP title, description, image URL, etc.
  • Support for four platforms: Twitter/X, Facebook, LINE, and Discord
  • Copy and paste the generated meta tag HTML into your site with one click
  • Used to check OGP before publishing blog posts or landing pages

What is Social Card Preview?

Social Card Preview is a real-time visualization tool that shows you exactly how your content will appear when shared on major social media platforms including Twitter/X, Facebook, LINE, and Discord. By entering Open Graph (OGP) meta tags, you can instantly preview how your website, article, or product link will display across different platforms. This eliminates guesswork from social media optimization, ensuring your shared content looks professional and engaging wherever it's posted.

How to Use

Navigate to the tool and you'll see input fields for OGP meta tags such as og:title, og:description, og:image, and og:url. Enter or paste your OGP tags into the appropriate fields—you can manually type them or paste the entire meta tag section from your HTML source code. The tool includes an auto-detect feature that can extract OGP tags from a website URL if you provide it. As you input or modify each field, the preview panes update in real-time to show how your content will render on Twitter/X, Facebook, LINE, and Discord. Use these previews to fine-tune your titles, descriptions, and image selections before publishing.

Use Cases

• Content creators and bloggers optimizing sharing performance: Writers can preview how article titles and descriptions appear in social feeds, adjusting for readability and click-through appeal.
• E-commerce product pages: Merchants can ensure product images, prices, and descriptions display attractively when customers share links in messaging apps and social feeds.
• Marketing campaigns launching across multiple platforms: Teams can verify consistent branding and messaging by previewing how promotional materials appear on each social network.
• Website owners debugging social shares: Developers can troubleshoot why shared links display incorrectly by checking OGP tag rendering across different platforms simultaneously.

Tips & Insights

Different platforms have varying image dimensions and text truncation points, which is why previewing is crucial. Twitter/X crops images at 16:9, while Facebook prefers 1.91:1, and Discord defaults to square images. Keep titles under 60 characters and descriptions under 160 characters for optimal display across platforms. Image file size and format matter too—use compressed JPG or PNG for faster loading. Always test links on actual platforms after implementation to ensure consistency with the preview tool.

Frequently Asked Questions

What is OGP?

OGP (Open Graph Protocol) is a meta tag specification for specifying the title, description, images, etc. that are displayed when a web page is shared on a social networking service. It is currently used by many platforms such as Twitter/X, LINE, Discord, etc.

Why is the display different on each social networking site?

Each social networking platform has a different way of interpreting OGP tags and a different card design and aspect ratio. For example, Twitter/X displays a 1.91:1 landscape image, while LINE displays a near-square image. This tool allows you to preview in each platform-specific style.

What is the recommended size of og:image?

Generally, 1200 x 630 pixels (aspect ratio 1.91:1) is recommended. This size is ideal for Twitter/X summary_large_image and Facebook share images, which display nicely on most platforms.

Where do I put the generated meta tags?

Paste the generated meta tag into the <head> tag of the HTML file. If you have an existing OGP tag, replace it; if you are using a CMS such as WordPress, you can enter it from the SEO plugin's settings screen.

Image URL does not appear in preview when entered

If images are not displayed, please check that the image URL is correct, that the images are delivered over HTTPS, and that there are no CORS restrictions. Since this tool loads the image URL as it is in the img tag, it may not be possible to display the image depending on the external server settings.

What is the difference between Twitter Card and OGP?

OGP is a generic meta tag specification developed by Facebook, while Twitter Card is Twitter/X's own meta tag. twitter/X prefers dedicated tags such as twitter:card and twitter:title, but will fall back to OGP tags if not set. fallback. This tool generates both tags.

Does it work with custom domains and HTTPS URLs?

Yes, the tool supports both HTTP and HTTPS URLs from any domain. OGP meta tags work the same way regardless of domain or protocol.

How do I know my meta tags are correct before publishing?

This tool lets you preview exactly how your page will appear on each platform before posting. Copy your OGP meta tags here, adjust them, and see the preview update in real-time.

What should I do if my image URL appears broken in the preview?

Check that the URL is publicly accessible and directly points to an image file. Images behind authentication, blocked by CORS, or through redirects may not load in the preview.

How do I optimize OGP cards to look good on all platforms?

Use square images (1200x1200px minimum), keep og:title under 55 characters, write compelling descriptions of 125 characters, and test each platform's preview for consistency.

Can I preview video content with OGP meta tags?

This tool primarily previews image-based cards, but you can enter og:video meta tags to see platform interpretations. Most platforms require specific video format and URL meta tags for optimal display.

Can I test my OGP without actually posting to social media?

Yes, this tool lets you test all variations safely before publication. You can also use native social media preview tools like Twitter's Card Validator or Facebook's Sharing Debugger.