Open Graph - Image
<head>
<meta charset="utf-8" />
<title>OG:Image</title>
<meta name="description" content="A good example of the most common preview use case." />
<meta property="og:title" content="OG:Image - A common use case" />
<meta property="og:description" content="Expanding our basic Open Graph definitions to include a preview image. Fun fact, you can make the image anything you want!" />
<meta property="og:type" content="website" />
<!-- ... -->
<meta property="og:image" content="http://assets.gregle.dev/projects/metatags/cool-zuck.jpg" />
<meta property="og:image:secure_url" content="https://assets.gregle.dev/projects/metatags/cool-zuck.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:image:alt" content="A preview screenshot of my personal portfolio" />
</head>One of the most common OG tags you'll see is the preview image. This gives a potential user some idea of what to expect when they click. Some good strategies are either a screenshot of the page or a logo/image that represents the content. The recommended resolution is a 2:1 ratio for large cards and 1:1 for small cards with a minimum dimension of 300x157. You can also explicitly define additional structured data like height and width with an extra ':'. Put structured content immediately after its root tag, both for better organization and because most parsers will consider it done as soon as the next root element is encountered. Some platforms even provide support for GIFs as preview images! Though not all of them, so make sure that first frame is meaningful, as that will likely be the fallback image.