Twitter 卡片元標簽在 index.html 中工作，而不是在 React Helmet 中

Question

我在 App.js 中使用了下面的 React Helmet 代碼來渲染 Twitter 卡片元數據。

          <Helmet>
              <meta charSet="utf-8" />
              <title>
                {`xxxxx`}
              </title>
              <meta
                name="description"
                content={`xxxxx.`}
              />
              <meta name="twitter:card" content="summary_large_image" />
              <meta
                name="twitter:title"
                content="xxxxx"
              />
              <meta
                name="twitter:description"
                content="xxxx."
              />
              <meta name="twitter:site" content="@xxxx" />
              <meta
                name="twitter:image"
                content="https:xxxx"
              />
              <meta name="twitter:creator" content="@xxxx" />
            </Helmet>

當我進行瀏覽器檢查時，元標記確實出現了。 但是在 twitter 卡驗證器（ https://cards-dev.twitter.com/validator ）中，我收到錯誤：找不到卡（卡錯誤）。

如果我在 index.html 中添加相同的元標記，它會起作用。 但是，我希望 Twitter 卡在 Helmet 中工作，以便我可以動態更改它。 沒有服務器端渲染有可能嗎？

Answer 1

臉書/推特/等。 爬蟲不呈現 JavaScript，因此除非您在服務器上呈現 Helmet 內容或在 index.html 文件中包含卡片元標記，否則它們永遠不會獲取您的客戶端更新。

Answer 2

Twitter 現在似乎在為元標記抓取網頁時呈現 JavaScript！ 至少就 React Helmet 而言。

我們在我們的 React 網站上通過 Helmet 使用 Twitter 的summary_large_image和twitter:image ，並確認它在Twitter Card Validator和實時 Twitter 帖子中工作！

請注意，Twitter 需要 URL 協議 (https://) 才能使用我們的twitter:image元標記中指定的twitter:image 。 我們最初在沒有 URL 協議的情況下構建了這些元標記，並且 Twitter 沒有將圖像拉入與推文一起顯示。