Facebook为部署在Vercel上的NextJS项目获取错误的OG标签 [英] Facebook fetching incorrect OG tags for NextJS project deployed on Vercel
问题描述
我使用NextJS构建了我的项目，并将其部署在Vercel上。我的项目的Vercel URL是https://my-project.vercel.app。我的域(已添加到Vercel仪表板中的项目设置)为www.example.com
当我使用Facebook Sharing Debugger检查特定URL上的元标签时，当使用my-project.vercel.app域而不是我的实际域www.example.com时，元标签被正确提取。项目在浏览器中正确加载，包括两个域的meta标记。
例如，对于我的网站上的url/foo，https://my-project.vercel.app/foo的og标签被正确提取，但https://www.example.com/foo的og标签被正确提取。
看看这些屏幕截图。请注意，屏幕截图中显示的域(esourcing.in)已添加到Vercel仪表板中的项目esourcing-frontend.vercel.app中。
这是我的浏览器截图：
推荐答案
回答我自己的问题。我的代码中存在错误
错误
我正在使用包装组件来包装我的所有页面。我将og_url设置在componentDidMount之后。我使用的是功能组件，因此useEffect钩子在组件挂载后执行。在此之前，我将og_url设置为https://example.com。
但是，当Facebook对页面进行爬网时，不会发生此组件装载。因此，您可以想象，当Facebook Crawler抓取所有页面时，这些页面的og:url属性设置为https://example.com。
import Head from "next/head";
import { useEffect } from 'react'
const Wrapper = (props) => {
const [og_url, setog_url] = useState("")
useEffect(() => {
setog_url(window.location.href)
}, [])
return (
<>
<Head>
... other meta tags ...
<meta property="og:url" content={og_url ? og_url : "https://example.com"} />
</Head>
{props.children}
</>
)
修复
og:url本质上是告诉Facebook，忘掉这个页面上的OG标签，使用URL设置为og:url值的页面上的OG标签。我将og:url设置为""，现在共享调试器获得正确的OG标记。
这篇关于Facebook为部署在Vercel上的NextJS项目获取错误的OG标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
