Meta Images, React, and Prismic

Meta Images, React, and Prismic

Code Land

I'm stuck in what I think is a cache black hole with my SEO metadata images. Some work and some don't. Some are coming from localhost. Some crawl requests return 502s and 418s. Facebook Sharing Debugger and LinkedIn Post Inspector are confused.

The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.

Yes. Yes, you keep saying that, FB. And I did use my quote Prismic slice because I'm tired of your sass. But guess what?

Rendered HTML from the page source
<head>
  <title>Maiko.dev | Home</title>
  <meta 
    property="og:image"
    content="https://maiko.dev/assets/images/og-fallback-img.png"
  />
  <meta property="og:image:width" content="1200"/>
  <meta property="og:image:height" content="630"/>
  <!-- ... and all the rest -->
</head>
html

I've tried hardcoding the meta data in /app/page.tsx and /app/layout.tsx (although I really don't wanna do the latter)

A React component for rendering metadata from Prismic
import { Metadata } from 'next'
export const metadata: Metadata = {
   // title, description, etc
    images: [
      {
        url: 'https://maiko.dev/assets/images/og-fallback-img.png',
        width: 1200,
        height: 630,
        alt: 'Maiko.dev | Home',
      },
    ],
  },
// ...
ts

Which did not work. Because of course it didn't.

Something ridiculous is that it is pulling in the metadata from Prismic, but not the image. It could be a CDN issue, but I have a fallback image that's self-hosted.

I guess I just have to wait some unknown amount of time while rage-clicking "scrape again." At least Google Search Console is doing its thing.