UPDATE - Adding OG Image in Layout for Blog Post Page

When recording originally, one update was missed after integrating the Astro Image component. The OG image passed into the Layout component for a blog post page should use the URL produced from frontmatter image data.

import { Image, getImage } from "astro:assets";

// existing code ...

const coverImageSource = (await getImage({ src: post.data.image })).src;

Then pass that value into the Layout component:

<Layout title={post.data.title} image={coverImageSource}>

To confirm, navigate to a blog post page and inspect the HTML for the og:image property.

View full code in the GitHub repository: https://github.com/jamesqquick/astro-course-demo/blob/ssg/src/pages/blog/%5Bslug%5D.astro