When viewing the opengraph image (domain/opengraph-image?nextjs-generated-id) in a new browser tab, it returns an image (headers “Content-Type”: “image/jpeg”).
But when changing the network conditions to mimic a scraper (User Agent: googlebot in this case), the returned header is “Content-Type”: “text/html”
Here’s my app/opengraph-image.js:
import OpengraphIllustrationV1_3 from '@/components/opengraph/OpengraphIllustrationV1_3'
import { ImageResponse } from 'next/og'
// Route segment config
export const runtime = 'edge'
// Image metadata
export const alt = 'Domdog : Page Security & Privacy Platform'
export const size = {
width: 1200,
height: 630,
}
// Image generation
export default async function Image() {
// Font=
async function loadGoogleFont (font, weight) {
const url = `https://fonts.googleapis.com/css2?family=${font}:wght@${weight}`
const css = await (await fetch(url)).text()
console.log('font api response fetched')
const resource = css.match(/src: url\((.+)\) format\('(opentype|truetype)'\)/)
console.log('loading google font')
if (resource) {
const response = await fetch(resource[1])
console.log('font resource was requested')
if (response.status == 200) {
console.log('google font fetched successfully for opengraph image at /')
return await response.arrayBuffer()
}
}
throw new Error('failed to load font data')
}
return new ImageResponse(
(
// ImageResponse JSX element
<div
style={{
width: '100%',
height: '100%',
display: 'flex',
flexDirection: 'column',
background: 'linear-gradient(to bottom left, #475569, #0F1023)',
justifyContent: 'space-between',
position: 'relative',
}}
>
<p
style={{
fontSize: 72,
color: '#EEE',
padding: '48px 48px 0'
}}
>
Opengraph Image Microcopy
</p>
<OpengraphIllustrationV1_3 style={{ position: "absolute", top: 0, left: 0 }} />
</div>
),
// ImageResponse options
{
// For convenience, we can re-use the exported opengraph-image
// size config to also set the ImageResponse's width and height.
...size,
fonts: [
{
name: 'Hanken Grotesk',
data: await loadGoogleFont('Hanken+Grotesk', 700),
style: 'normal',
},
],
headers: {
"Content-Type": "image/jpeg"
}
}
)
}