Create Small and Large link preview

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>