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="A good example of the most common link preview use case.
Expanding our basic Open Graph definitions to include a preview image." />
<meta property="og:type" content="website" />
<!-- ... -->
<meta property="og:image" content="http://assets.gregle.dev/projects/metatags/gregle-dev-preview.jpg" />
<meta property="og:image:secure_url" content="https://assets.gregle.dev/projects/metatags/gregle-dev-preview.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 well. Recommended resolution is 2:1 ratio for large cards and 1:1 for small card 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 it's 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 still.