Why 1200×630
That size (a 1.91:1 ratio) is the dimension Facebook, LinkedIn, and most other platforms expect for an Open Graph preview image, and it renders cleanly without being cropped further by most link-card layouts. This crops your image to that exact size using a center-crop, then shows it inside a mockup of how it would actually look embedded in a Facebook post and an X card, alongside your title and domain.
Why this uses a center-crop rather than simply stretching your image to fit
Stretching an image to a different aspect ratio distorts it - faces and objects end up visibly warped. A center-crop instead scales your image up or down just enough to fully cover the target 1200×630 frame, then trims the overflow evenly from the edges, keeping everything in the middle of your original image intact and undistorted.
Why this shows two separate platform previews instead of just the cropped image alone
A cropped image alone doesn't reveal how a platform actually displays it alongside your title and domain in a real card layout - seeing a close approximation of both the Facebook and X card styles side by side makes it much easier to judge whether your title and image combination reads well together before you publish, rather than guessing.
Why the two platform previews are laid out slightly differently from each other
Facebook's link-card convention places the domain above the title, while X's card convention places the title above the domain - mirroring each platform's actual layout order, rather than reusing one generic template for both, is what makes each preview a meaningfully accurate approximation of what visitors will actually see.