Set React Meta Data but Twitter Card will not be loaded

why

もともと電気屋のサイトにはmeta をちゃんと入れられてないし、 React だけでは meta の SEO はできないと思い込んでいた

しかし

Header が終わって

https://kaede0902.github.io/profile/ HP できた document.title に直書きはまずいどうやって素の React でタイトル付けようかな

とツイートすると

react helmetとかreact meta-tagsってやつを使うよ

と reply をいただいた。なので react-meta-tags を試してみる

www.npmjs.com

npm i react-meta-tags

Just Title

単純にタイトルを付けたいだけだと

import {ReactTitle} from 'react-meta-tags';

        <ReactTitle title='かえでのホームページ'></ReactTitle>

これで

f:id:kei_s_lifehack:20200826021851p:plain

document.title しなくても Title がつけられた

og img title

だがせっかく作れるなら og image とかも作りたい

そのためにはシンプルな ReactTitile じゃなくて、

MetaTags を import する必要がある

import React from 'react'
import MetaTags from 'react-meta-tags';

export default function Meta() {
  return (
    <>
          <MetaTags>
            <title>かえでのホームページ</title>
            <meta name="description" 
              content="kaede0902 Homepage" />
            <meta property="og:title" 
              content="かえでのホームページ" />
            <meta property="og:image" 
              content="https://unsplash.com/photos/MoDcnVRN5JU" />
          </MetaTags>
    </>
  )
}

これで desc, og:titile, og:image, が header の内部に入った

(どのみちSSR 出なくて client での再生だから react app の default title は見えてしまう)

Normal og data

通常の og desc, titile, image, にはこのデータを入れた。 placeholder.com から読み込んでくれるはず....

<meta name="og:description"                                
  content="kaede0902 Homepage" />                          
<meta property="og:title"                                  
  content="かえでのホームページ" />                        
<meta property="og:image"                                  
  content="https://via.placeholder.com/300/000/fff.png" />

hatena で試してみると読み込んでくれてない模様

f:id:kei_s_lifehack:20200828010252p:plain

Twitter og

Twitter でいっぱい見せたいしカードは出したい！！やってみる

moz.com

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary"/>                                          
<meta name="twitter:site" content="@publisher_handle"/>                                
<meta name="twitter:title" content="Page Title"/>                                      
<meta name="twitter:description" content="Page description less than 200 characters"/> 
<meta name="twitter:creator" content="@author_handle"/>                                
<meta name="twitter:image"                                                             
  content="https://via.placeholder.com/300/000/fff.png" />

エラーが出る

INFO:  Page fetched successfully
INFO:  5 metatags were found
ERROR: No card found (Card error)

これでは Card Validator で Card が見つからないとエラーが出る

Twitter 公式のサンプルはこれ

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />