<meta property="og:title" content="og:title content">
<meta property="og:description" content="og:description content">
<meta property="og:image" content="https://beta.vero.site/preview-og-image.png">
<!-- optional: makes the image show up big and vertically stacked with text, instead of small and horizontally next to text (order depends on platform) -->
<meta name="twitter:card" content="summary_large_image">
<!-- on Discord, the left border will be this color: -->
<meta name="theme-color" content="#984a0b" />

<!-- slightly less common -->
<meta property="og:site_name" content="og:site_name content">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="article:author content">

These are just the ones I typically use to get previews. See htmlhead.dev for more.

From testing, a path without the site like /preview-og-image.png seems to work on, e.g., Discord, but not Twitter.

If you're not sure what size to make your og:image, https://iamturns.com/open-graph-image-size/ https://www.kapwing.com/resources/what-is-an-og-image-make-and-format-og-images-for-your-blog-or-webpage/ (among others) suggest 1200×630 (≈1.905:1).