Open Graph & Twitter Card Preview
Preview how your link will look on Facebook, Twitter, LinkedIn, and Slack.
Written by Anil Gautam · Updated
What do the four preview cards show?
All four cards are drawn from the five fields you fill in. The tool does not visit your page or read the tags already on it, so type the values you plan to publish. In the Facebook card, the domain appears in capitals above the title and description. On the X card the title and description sit under the picture with the domain last. The LinkedIn card shows only the title and domain under the picture, and the Slack card leads with the site name, then the title, the description and a shorter image.
For the domain line, the tool takes the host from the URL field and drops any leading www., so https://www.example.com/blog/chai appears as example.com. Include the https:// part, because without it the address cannot be parsed and the card prints whatever you typed. Titles and descriptions are printed in full here, while the real apps shorten long text to fit their layouts, so keep the important words near the start.
Why is my preview image cropped or missing?
On the Facebook, X and LinkedIn cards the picture sits in a frame 274 pixels tall and up to 524 pixels wide, scaled to fill it with the overflow trimmed. At full width that frame is 1.91 to 1, almost exactly the 1200×630 size the label recommends. A square 1080×1080 image fills the width, so only the middle 52% of its height, about 565 of its 1,080 rows, stays visible, and text near the top or bottom edge is cut off. The Slack card limits the picture to 200 pixels tall and trims it the same way.
Your browser loads the image straight from the URL you enter. A picture on localhost, on a password-protected staging site or in a private storage bucket can look fine here and still fail on the real platforms, whose crawlers cannot reach it. When the image URL fails to load, the picture is hidden on all four cards, and it comes back as soon as the field holds a URL that loads.
What should I do once the cards look right?
Copy the same values into the Meta Tag Generator, which writes the og: and twitter: tags for your page head. If you still need a 1200×630 image, the Bulk Image Resizer can set exact pixel dimensions; start from a picture of roughly that shape so nothing gets stretched.