我已经设置了NextJs OG图像，一切都运行良好。只有图片不能被Facebook推断出来。错误/警告为The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.当我提供页面的url到Facebook的url没有被检测到。Head中的代码看起来像
<meta property="og:url" content={
`${
process.env.NEXT_PUBLIC_VERCEL_URL ? 'https://' + process.env.NEXT_PUBLIC_VERCEL_URL : 'http://localhost:3000'
}/${user.Name}`
}/>
<meta property="og:type" content="website"/>
<meta property="og:title" content={`${user.Name}`}/>
<meta property="og:description" content="undefined"/>
<meta
property="og:image"
name="og:image"
content={
`${
process.env.NEXT_PUBLIC_VERCEL_URL ? 'https://' + process.env.NEXT_PUBLIC_VERCEL_URL : 'http://localhost:3000'
}/api/og-image?title=Nameofuser&description=A description`
}
/>
根据来源Facebook only checks for og:image in the first 50Kbs of the page source. If you are using inline CSS, the og:image will not be seen by Facebook，这意味着Facebook将找不到图像。还是我把这个设置错了
编辑:我还将NextJS文档中的代码复制粘贴到我的页面上，图像仍然没有显示。简单代码是
<Head>
<title>Cool Title</title>
<meta name="description" content="Checkout our cool page" key="desc" />
<meta property="og:title" content="Social Title for Cool Page" />
<meta
property="og:description"
content="And a social description for our cool page"
/>
<meta
property="og:image"
content="https://example.com/images/cool-page.jpg"
/>
</Head>
从文档链接。这是一个已知的错误在NextJS，我不知道
最终我解决了这个问题。我的整个应用都被firebase封装在一个AuthProvider中。出于某种原因，有了它，facebook调试器就不用等待身份验证状态之类的了。我将延迟加载AuthComponent，我的第一次加载大小将从182Kb左右增加到80Kb左右，但facebook调试器仍然不会加载我的日志图像。这是我的解决方案
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
const AuthContextProvider = dynamic(() => import('../auth/AuthProvider'), {
ssr: typeof window==="undefined"
})
function MyApp({ Component, pageProps }) {
// mock state to make sure we are running in browser
const [inBrowser, setInBrowser] = useState(false)
useEffect(() => setInBrowser(true), [])
return (
<>
{inBrowser ? (
// running in browser load Auth
<AuthContextProvider>
<Component {...pageProps} />
</AuthContextProvider>
) : (
// building or running in pipeline
<Component {...pageProps} />
)}
</>
);
}
export default MyApp;
当构建运行时，执行第二块代码，这是facebook所做的(不是在浏览器环境中)，当普通用户加载页面时，运行第一块代码。
如果有安全权衡(我不认为有)，可以指出来。但这就是解决办法。
之后我还是在第3行中引入了延迟加载AuthContext组件，老实说，为什么不呢