Facebook在Netlify上无法识别某些Gatsby React头盔元标记 [英] Facebook not recognizing some Gatsby React Helmet Meta Tags on Netlify
问题描述
我的Gatsby React Helmet Meta Tag的一些但不是全部，似乎已被facebook迷失了.这是代码:
Some, but not all, of my Gatsby React Helmet Meta Tags seems to be getting lost by facebook. Here is the code:
<Helmet>
<title>Code Championship | Code is Sport</title>
<meta name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta name="keywords" content="code, championship, competition, minnesota" />
<meta property="og:url" content="https://www.codechampionship.com" />
<meta property="og:title" content="Code Championship | Code is Sport" />
<meta property="og:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta property="og:type" content="website" />
<meta property="fb:app_id" content="281289809224344" />
<meta property="og:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<meta property="og:image:width" content="1080" />
<meta property="og:image:height" content="608" />
<meta property="og:image:alt" content="Running Athlete with Code in Foreground" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@codechampionshp" />
<meta name="twitter:title" content="Code Championship | Code is Sport" />
<meta name="twitter:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta name="twitter:image" content="https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<link rel="icon" href={logo} />
<html lang="en" />
<script id="stripe-js" src="https://js.stripe.com/v3/" async />
</Helmet>
这是Facebook所说的:
Here is what Facebook says it is seeing:
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="generator" content="Gatsby 2.0.66" />
<meta name="theme-color" content="#ffe83d" />
<meta data-react-helmet="true" name="description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" name="keywords" content="code, championship, competition, minnesota" />
<meta data-react-helmet="true" property="og:title" content="Code Championship | Code is Sport" />
<meta data-react-helmet="true" property="og:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" property="og:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
<meta data-react-helmet="true" property="og:image:width" content="1080" />
<meta data-react-helmet="true" property="og:image:height" content="608" />
<meta data-react-helmet="true" name="twitter:card" content="summary" />
<meta data-react-helmet="true" name="twitter:site" content="@codechampionshp" />
<meta data-react-helmet="true" name="twitter:title" content="Code Championship | Code is Sport" />
<meta data-react-helmet="true" name="twitter:description" content="Code is Sport. Competitive coding competitions for elementary, middle, and high school students." />
<meta data-react-helmet="true" name="twitter:image" content="/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png" />
第一期Facebook列表是:
The first issue facebook lists is:
Provided og:image URL, /static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png was not a valid URL.
我知道这种情况正在发生，因为它需要像"https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png"这样的完整URL，但这就是我在meta标记中提供的.还有什么我需要做的吗?在URL完全不同的Netlify预览"站点上不会显示此错误.因此，这些图像对于预览"网站似乎效果更好.
I know this is happening because it requires a full URL like "https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png", but that's what I am providing in the meta tag. Is there something else I need to do? This error does not show on Netlify "preview" sites that have completely different urls. So the images appear to work better for the "preview" sites.
第二期Facebook列表是:
and the second issue facebook lists is:
The following required properties are missing: og:url, og:type, fb:app_id
这是有道理的，因为它似乎没有在刮这些.我的元标记中有什么地方做错了吗?
Which makes sense, because it doesn't seem to be scraping these. Is there something I am doing wrong in my meta tags?
我知道这与其他问题相似，因此我试图弄清楚这有何不同，并列出具体细节.我正在使用Netlify进行部署也可能是相关的.
I know this is similar to other questions, so I have tried to clarify where this is different and lay out the specifics. It may also be relevant that I am using Netlify to deploy.
推荐答案
这最终是一个缓存问题.我没有更改代码，睡着了，醒了，它开始起作用.我不确定是Netlify还是Facebook还是其他进行缓存的东西.
This ended up being a caching issue. I made no changes to the code, went to sleep, woke up, and it started working. I'm not sure if it was Netlify or Facebook or something else that was doing the caching.
有人建议我可以在最后使用查询字符串进行测试(高速缓存中断).如果遇到类似问题，可以尝试使用以下命令:www.example.com?foo=bar强制其进行搜索.从技术上讲，它是一个不同的url，但是查询字符串不会影响页面结果(除非您使用查询字符串来实现功能).
It was suggested to me that I could have used a query string at the end to test (cache breaking). If you're running into a similar issue, you might try something like: www.example.com?foo=bar to force it to search. It's technically a different url, but the query string shouldn't impact the page results (unless you are using the query string for functionality).
这篇关于Facebook在Netlify上无法识别某些Gatsby React头盔元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
