Fatal编程技术网
  • facebook-graph-api/
  • Facebook graph api Facebook为部署在Vercel上的NextJS项目获取不正确的OG标记

Facebook graph api Facebook为部署在Vercel上的NextJS项目获取不正确的OG标记

facebook-graph-api next.js

Facebook graph api Facebook为部署在Vercel上的NextJS项目获取不正确的OG标记,facebook-graph-api,next.js,facebook-opengraph,server-side-rendering,vercel,Facebook Graph Api,Next.js,Facebook Opengraph,Server Side Rendering,Vercel,我已经使用NextJS构建了我的项目，并将其部署在Vercel上。我的项目的Vercel URL是https://my-project.vercel.app。我的域（添加到Vercel dashboard中的项目设置）是www.example.com 当我使用检查特定url上的元标记时，在使用my project.vercel.app域而不是我的实际域www.example.com时，元标记被正确拾取。项目在浏览器中正确加载，包括两个域的元标记 例如，对于我的网站上的url/foo，og标记被正

我已经使用NextJS构建了我的项目，并将其部署在Vercel上。我的项目的Vercel URL是
https://my-project.vercel.app
。我的域（添加到Vercel dashboard中的项目设置）是
www.example.com

当我使用检查特定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

以下是我的浏览器的屏幕截图：

回答我自己的问题。我的代码中有一个bug

虫子 我正在使用包装器组件包装我的所有页面。我在
componentDidMount
之后设置
og\u url
。我正在使用一个功能组件，因此
useffect
钩子在组件装载后执行。在此之前，我将
og_url
设置为
https://example.com

但是，当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}
        </>
    )

从“下一个/Head”导入Head；
从“react”导入{useEffect}
常量包装器=（道具）=>{
const[og_url，setog_url]=useState（“”）
useffect（（）=>{
setog_url（window.location.href）
}, [])
返回(
…其他元标记。。。
{props.children}
)
修理 
og:url
基本上是告诉Facebook忘记此页面上的og标签，使用url设置为
og:url
值的页面上的og标签。我将
og:url
设置为
“”
现在，共享调试器选择了正确的OG标记。

规范URL在两者之间不同，第一个设置为相同的URL，第二个设置为项目的基本URL。（也就是说，根据您的屏幕截图。实际上，两个版本似乎都将
og:url
设置为
https://www.esourcing.in
现在，如果您想共享
/uneefy
页面的实际内容，那么从这开始就错了。）@CBroe在我的代码中，我已设置了正确的规范url。它在浏览器中运行良好。但是规范url看起来不同，因为Vercel正在导致Facebook爬虫获取不正确的数据。它是同一个项目（两个url指向同一个项目）。因此爬虫程序在这两个域上应该可以看到
/uneefy
URL的相同数据。我已在我的问题中添加了一个来自浏览器的屏幕截图。再次查看@CBroe是正确的。由于我的代码中存在错误，爬虫程序获取页面时，规范URL不正确。有关详细信息，请参阅我的答案。