Некоторые, но не все, из моих мета-тегов Gatsby React Helmet, похоже, теряются на Facebook.Вот код:
<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 говорит, что видит:
<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:
Provided og:image URL, /static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png was not a valid URL.
Я знаю, что это происходит, потому что для этого требуется полный URL-адрес, такой как "https://www.codechampionship.com/static/running-with-tagline-b034f5627c117830a13bb19345ebb2b0.png", но это то, что я предоставляю в метатеге.Есть ли что-то еще, что мне нужно сделать?Эта ошибка не отображается на сайтах предварительного просмотра Netlify с совершенно разными URL-адресами.Таким образом, изображения, кажется, работают лучше для сайтов предварительного просмотра.
, а списки Facebook второго выпуска:
The following required properties are missing: og:url, og:type, fb:app_id
Что имеет смысл, потому что это неКажется, не царапает эти.Есть ли что-то, что я делаю неправильно в моих метатегах?
Я знаю, что это похоже на другие вопросы, поэтому я попытался уточнить, где это отличается, и изложить особенности.Также может иметь значение, что я использую Netlify для развертывания.