如何使用 Gatsby 以編程方式在反應頭盔中顯示圖像？

Question

我正在將 Gatbsy 用於我的首頁，並且我正在嘗試使用 react-helmet 以編程方式添加一些元數據。

我有一個 SEO 組件，如下所示：

const SEO = ({title, description, location, image_url}) => {
    const capitalize = string => {
        if (string !== undefined){
            return string.charAt(0).toUpperCase() + string.slice(1);
        }

        return string

    };

    const MAIN_TITLE = settings.META_TITLE;
    return (
        <Helmet>
            <title>{`${MAIN_TITLE} | ${capitalize(title)}`}</title>
            <meta name="description" content={description}/>
            <meta property="og:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="og:description" content={description}/>
            <meta property="og:image" itemProp="image" content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="og:type" content="website"/>
            <meta property="og:url" content={location.href}/>
            <meta property="twitter:title" content={`${MAIN_TITLE} | ${capitalize(title)}`}/>
            <meta property="twitter:description" content={description}/>
            <meta property="twitter:image" itemProp="image"  content={image_url !== undefined ? image_url : `${settings.ROOT_URL}/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg`}/>
            <meta property="twitter:card" content="summary_large_image"/>
        </Helmet>
    )
};

export default SEO

我在 Gatsby 的其中一頁中使用它，如下所示：

<div className="flex flex-col overflow-x-hidden min-h-screen">
     {loading && !hasError && <LoadingIndicator/>}
     {!loading && hasError && <div className="container my-12"><ErrorIndicator/></div>}
     {!loading && !hasError && <React.Fragment>
             <SEO title={`${vehicle.make} ${vehicle.model} ${vehicle.type}`}
                  description={`${vehicle.make} ${vehicle.model} wacht op u.`}
                  location={location}
                  image_url={vehicle.images instanceof Array ? vehicle.images[0].uri : vehicle.images.uri}/>
              .... // Rest of the code
      <React.Fragment>}
</div>

當我在本地主機或服務器上的標簽中簽入控制台時，我看到了我應該看到的內容：

但在 Facebook 上，我看到了別的東西。 對於圖像，例如我看到：

og:image    http://my-site/static/image-cover-1e01617fb26211f1cd8e3dd24977070d.jpg

Facebook 在<meta property="og:image" ..../>標簽中使用else語句，但image_url不是未定義的，在控制台中我看到了正確的 url。

任何的想法？

Answer 1

OG 文檔沒有將 item prop 顯示為屬性，但我認為不是這樣。

https://ogp.me/

我認為您的代碼以編程方式添加了元數據，因此在第一次加載時它不存在並且 Facebook 的機器人沒有捕捉到它？ 嘗試將該元標記硬編碼到 HTML 中，看看 Facebook 是否接受，這至少會讓您知道這是否是問題所在。

編輯：抱歉，這並沒有真正回答根本問題。 如果上述結果是問題，我建議盡可能在服務器端以編程方式添加它。 你可以嘗試用 EJS 之類的東西來模板化它。 從本質上講，我認為您只需要確保它在 DOM 中足夠早地出現在 Facebook 的機器人中。

編輯：Facebook 根本不支持（不再）自定義共享。 它是 OG 或什么都沒有，他們在您的 JS 有機會更改它之前從您的原始 html 中獲取 OG。 它只是不適合 SPA。 您可以為 SPA 使用 Google OG，有些人已經提出了黑客代理，但它們對您的 SEO 不利。

對不起 ：/