generateMetadata not creating on build | Next.js | Page 1

I'm having an issue getting my dynamic page metatags to be added to the HTML at build time. Instead it seems like the tags are being included in a body script. This is preventing me from displaying those metatags when linking the url on socials ect..

Is this the expected behavior of generateMetadata?

This is the code on my page. Instead of making an API request for the metadata I'm just accessing a JSON blob for that specific route slug. This method works fine on my static pages but is not working on the dynamic ones.

  params: {
    slug: string;
  }
}

export function generateStaticParams() {
  // return COURSES_ARR.map((course) => {
  //   slug: course.slug;
  // })
  return [{slug: "js"}, {slug: "ethereum"}, {slug:"solidity"}]
}

export function generateMetadata({ params: { slug }}: Params): Metadata{
  const metatags = PageMetatags(slug)
  return metatags;
}

// export const metadata = PageMetatags(params.slug)

export default function CoursePage({ params: { slug }}: Params) {
  const courseDetails = COURSES[slug];
  // if (!courseDetails) {
  //   redirect("/courses");
  // }
  const { showImageCarousel } = courseDetails;
  return (
    <div>
      <Hero courseDetails={courseDetails} />
      <About courseDetails={courseDetails} />
      <ShowImageCarousel show={showImageCarousel} />
      {/* <CourseStudentProjects courseDetails={courseDetails} /> */}
      <EarnCertificate courseDetails={courseDetails} />
      <CourseSpotlight courseDetails={courseDetails} />
      <RecommendCourse />
      <Syllabus courseDetails={courseDetails} />
    </div>
  );
}`

#generateMetadata not creating on build