Facebook 为部署在 Vercel 上的 NextJS 项目获取不正确的 OG 标签答案

【问题标题】：Facebook fetching incorrect OG tags for NextJS project deployed on VercelFacebook 为部署在 Vercel 上的 NextJS 项目获取不正确的 OG 标签
【发布时间】：2021-02-08 10:06:41
【问题描述】：

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

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

这是我浏览器的截图：

【问题讨论】：

两者的规范 URL 不同，第一个设置为相同的 URL，第二个设置为项目的 base URL然而。（也就是说，根据您的屏幕截图。实际上，两个版本似乎现在都将og:url 设置为https://www.esourcing.in，如果您想分享/uneefy 页面的实际内容。）
@CBroe 在我的代码中，我设置了正确的规范网址。它在浏览器中运行良好。然而，规范 url 看起来不同，因为 Vercel 导致 Facebook 爬虫获取不正确的数据。它是同一个项目（两个 URL 都指向同一个项目）。所以爬虫应该在两个域上看到相同的/uneefy URL 数据。我已将浏览器中的屏幕截图添加到我的问题中。
再看一遍@CBroe 是对的。由于我的代码中的错误，当爬虫获取页面时，规范 URL 不正确。详情请参阅我的回答。

标签： facebook-graph-api next.js facebook-opengraph server-side-rendering vercel

【解决方案1】：

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

错误

我正在使用 Wrapper 组件来包装我的所有页面。我在componentDidMount 之后设置了og_url。我正在使用功能组件，因此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 标签。

【讨论】：