I recently added some code for a link preview for my domain (in the index.html file). On Facebook it shows it in a 16:9 format for posts, however in comments it crops that 16:9 photo into a square.
Is there a way to tell Facebook to use a different image for the square preview rather than cropping the large one? I’m guessing there’s a separate tag for it, like og:small-image or something? Thanks in advance.
<!DOCTYPE html>
<html>
<title>Ryder Cragie</title>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="Ryder Cragie" />
<meta property="og:description" content="Welcome to the official website of Ryder Cragie." />
<meta property="og:image" content="https://rydercragie.com/Assets/Banner.jpeg" />
<meta property="og:image:width" content="1920px" />
<meta property="og:image:height" content="1080px" />
<meta property="twitter:card" content="summary_large_image" />
</head>
<body style="background-color:white;"></body>
<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "https://mobile.rydercragie.com";
}
//-->
</script>
<script type="text/javascript">
<!--
if (screen.width >= 699) {
document.location = "https://desktop.rydercragie.com";
}
//-->
</script>
</html>