如何解决Facebook为Vercel上部署的NextJS项目获取不正确的OG标签
我已经使用NextJS构建了我的项目,并将其部署在Vercel上。我项目的Vercel URL为https://my-project.vercel.app
。我的域(添加到Vercel仪表板的项目设置中)是www.example.com
当我使用this document检查特定URL上的meta标签时,使用my-project.vercel.app
域而不是我的实际域www.example.com
时,正确拾取了meta标签。该项目在两个域中都可以正确地在浏览器中加载,包括元标记。
例如,对于我的网站上的网址/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抓取时,所有页面的og:url
属性都设置为https://example.com
。 Facebook搜寻器抓取了这些页面。
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标签。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。