Open Graph preview: see how your URL renders on social platforms.
Open Graph (og:) and Twitter Card (twitter:) meta tags control how your page appears when shared on social platforms. A missing or broken og:image is the single most common social-sharing failure. This tool generates a complete OG + Twitter Card meta tag set and previews how it will render on the major platforms.
Preview
Generated meta tags
About this tool.
Open Graph meta tags were introduced by Facebook in 2010 and have since been adopted by every major social platform. When a user shares your URL on Facebook, X (Twitter), LinkedIn, Slack, Discord, Reddit, WhatsApp, or iMessage, the platform fetches your page and reads the og: tags to decide how to render the preview card.
The og:image tag is the single most important. Missing or broken images produce ugly social cards that get clicked at 5 to 10 times lower rates than properly rendered cards. Image specifications matter: 1200x630 pixels is the universal recommendation, JPG or PNG, under 5MB, served over HTTPS, and the URL must be absolute (not relative).
Twitter Cards extend Open Graph with twitter:-prefixed tags. For most use cases, the twitter:card content should be set to summary_large_image which produces the modern large-image preview rather than the older thumbnail format. ThatDeveloperGuy uses summary_large_image as the default across all 130 plus client sites in our hosting substrate.
Title and description follow the same length conventions as SEO meta tags. Titles 50 to 60 characters render fully on every platform without truncation. Descriptions 155 to 200 characters render fully on Facebook and LinkedIn; X (Twitter) truncates earlier. Write for the shortest medium and verify the longer-form platforms still look good.
The og:type property defaults to website but can be more specific. Articles should use article with additional article:author and article:published_time tags. Products can use product with product:price:amount and product:price:currency. Each type unlocks additional rich preview behavior on platforms that support it.
ThatDeveloperGuy validates Open Graph implementation across every site we build using a combination of this tool, the Facebook Sharing Debugger, the Twitter Card Validator, and the LinkedIn Post Inspector. The validators are the source of truth — if they show the card correctly, the live share will too.
FAQ.
What size should my Open Graph image be?
1200x630 pixels, aspect ratio 1.91:1. This renders correctly on Facebook, X, LinkedIn, Slack, Discord, and iMessage. Twitter Cards summary_large_image accepts this exact size.
Why does my OG image not show when I share my URL?
Most common causes: (1) image URL is relative not absolute, (2) image is behind authentication, (3) image is too large (over 5MB), (4) wrong MIME type, (5) image domain has overly restrictive CORS. Always use absolute https:// URLs to a public image under 5MB.
Do I need separate og: and twitter: tags?
Twitter falls back to og: tags if twitter: tags are missing — most cases work fine with og: alone. Use twitter:card explicitly to control the format (summary vs summary_large_image).
How do I clear a cached OG image on Facebook?
Use the Facebook Sharing Debugger at developers.facebook.com/tools/debug. Paste your URL and click Scrape Again. Facebook caches OG data for 30 days; the debugger forces a re-fetch.
Can I have a different image per page?
Yes — and you should. The og:image should be specific to the content of each page. Generic homepage OG images on every URL look unprofessional and hurt CTR. ThatDeveloperGuy generates per-page OG images using server-side rendering for client sites that need it.
What about Apple iMessage rich previews?
iMessage reads OG tags. It prefers larger images and longer descriptions. The same tags above will produce a proper iMessage rich preview.
Built by Joseph W. Anady at ThatDeveloperGuy. Need professional help? Get a free 48-hour audit.