Gatsby製のサイトでOGP画像が表示されない

前提

Gatsby,Contentful,NetlifyでWEbサイトを作成している
https://haru-haru0.com/

###実現したい事
GatsbyJSで作成したWebサイトでtwitter cardを表示したい

発生している問題・エラーメッセージ

Twitter Card validatorで「ERROR: No card found (Card error)」と表示されます。

詳細

1.SEOコンポーネントと、shareButtonLinkコンポーネントを["src/components"]配下に作成しました。
2.SEOに引数を渡して、親要素(template/post.js)で値を入力しています。
3.shareButtonLinkに引数を渡して、親要素(template/post.js)で値を入力しています。

####SEOコンポーネント(src/components/seo.js)

react
1import React from "react"
2import { Helmet } from "react-helmet"
3
4
5const Seo = ({ title, description,image }) => {
6    return (
7        <Helmet
8            htmlAttributes={{ lang: "ja-jp" }}
9            title={title}
10            titleTemplate={`%s`}
11            meta={[
12                {
13                    name: `description`,
14                    content: description,
15                },
16                {
17                    property: `og:title`,
18                    content: title,
19                },
20                {
21                    property: `og:description`,
22                    content: description,
23                },
24                {
25                    property: `og:type`,
26                    content: `website`,
27                },
28                {
29                    property: `og:image`,
30                    content: image,
31                },
32                {
33                    property: `og:site_name`,
34                    content: `Dev Blog`,
35                },
36                {
37                    property: `og:locale`,
38                    content: `ja_JP`,
39                },
40                {
41                    name: `twitter:card`,
42                    content: `summary`,
43                },
44                {
45                    name: `twitter:image`,
46                    content: image,
47                },
48                {
49                    name: `twitter:title`,
50                    content: title,
51                },
52                {
53                    name: `twitter:description`,
54                    content: description,
55                },
56                {
57                    name: `twitter:site`,
58                    content: `@haruharu_0622x`,
59                },
60            ]}
61        />
62    )
63}
64
65export default Seo

####postコンポーネント(src/templates/post.js)

react
1import React from "react"
2import "../styles/post.css"
3import Layout from "../components/layout";
4import ShareButtonList from "../components/shareButtonList";
5import Seo from "../components/seo";
6
7export default function Post({ pageContext }) {
8    const { title,description, slug,updatedAt, image } = pageContext.post;
9    const body = pageContext.post.body.childMarkdownRemark.html;
10
11    return (
12        <Layout>
13            <Seo title={title} description={description} image={`https:${image.file.url}`} />
14            <div className="post-header">
15                <h1 className="post-header-title">{title}</h1>
16                <p className="post-date">{updatedAt}</p>
17            </div>
18            <ShareButtonList title={title}  url={`https://haru-haru0.com/post/${slug}`} description={description} />
19            <img src={image.file.url} className="post-image" alt="post-cover"></img>
20            <div dangerouslySetInnerHTML={{__html: body }} className="post-body" />
21        </Layout>
22    )
23}

####shareButtonLink(src/components/shareButtonLInk.js)

react
1import {
2    FacebookIcon,
3    FacebookShareButton,
4    LineIcon,
5    LineShareButton,
6    TwitterIcon,
7    TwitterShareButton
8  } from 'react-share'
9
10  import React from 'react'
11  import "../styles/ShareButton.css"
12
13  const ShareButtonList = ({title,url,}) => {
14      return(
15        <div className="share-button">
16
17          <FacebookShareButton className="facebook" title={title} url={url} >
18            <FacebookIcon size={27} />
19          </FacebookShareButton>
20
21          <LineShareButton className="line" title={title} url={url} >
22            <LineIcon size={27}  />
23          </LineShareButton>
24
25          <TwitterShareButton className="twitter" title={title} url={url} >
26            <TwitterIcon size={27}  />
27          </TwitterShareButton>
28
29        </div>
30      )
31  }
32  export default ShareButtonList