Are these previews 100% accurate?

These mockups are structurally identical to how the platforms render them, utilizing the exact bounding boxes and CSS truncation rules. However, platforms occasionally tweak their internal fonts or margins.

What is the best image ratio for social cards?

The industry standard for OG images is 1.91:1, usually represented in pixels as 1200x630px. This ratio looks perfect across almost all platforms.

My site is deployed, but the preview on actual Twitter isn't updating?

Twitter caches your OG images. If you update the image on your live server, you'll need to use Twitter's official Card Validator to clear the cache for that specific URL.

ByteBox / Tools / Social Card Preview

Social Card (OG) Previewer

See exactly how your web pages will appear when shared on X, Facebook, and LinkedIn.

Last updated: Mar 15, 2026

Meta Tag Data

og:title

og:description

og:image (URL)

Website Domain (og:url)

X (Twitter) Preview

Facebook Preview

LinkedIn Preview

What are OpenGraph (OG) Tags?

OpenGraph tags are meta tags added to the <head> of your website's HTML document. These tags tell social media platforms like Facebook, Twitter, and LinkedIn what image, title, and description they should use when someone shares your URL.

Why is this important?

A well-optimized social card drastically increases click-through rates (CTR). Using this preview tool, you can see if your title truncates awkwardly, if your description is too long, or if your image is framed correctly before deploying your site.