为部署在Vercel上的NextJS项目获取不正确的OG标记
我使用NextJS构建了我的项目，并将其部署在Vercel上。我的项目的Vercel是https://my-project.vercel.app。我的域(添加到Vercel仪表板中的项目设置)是www.example.com。
当我使用Facebook共享调试器检查特定url上的元标记时，当使用my-project.vercel.app域而不是实际域www.example.com时，元标记将被正确地拾取。项目在浏览器中正确加载，包括两个域的元标记。
例如，对于我网站上的url /foo，og标记对于https://my-project.vercel.app/foo是正确的，而对于https://www.example.com/foo则是不正确的。
看看这些截图。注意，屏幕截图(esourcing.in)中显示的域被添加到Vercel仪表板中的项目esourcing-frontend.vercel.app中。
下面是我浏览器的截图：
回答 1
Stack Overflow用户
发布于 2020-10-27 14:04:51
回答我自己的问题。我的代码里有个错误
臭虫
我正在使用包装组件包装我的所有页面。我把og_url设置在componentDidMount之后。我使用的是一个功能组件，所以useEffect钩子在组件挂载后执行。在此之前，我将og_url设置为https://example.com。
然而，当页面被Facebook爬行时，这个组件挂载就不会发生了。因此，您可以想象，当Facebook爬虫抓取这些页面时，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标记。
https://stackoverflow.com/questions/64532234
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号