【惨敗からの成功！】ツイッターにurlを載せた時にサムネイルが表示されない時の対処法

小雪

こんにちは。上賀茂ブロガーの小雪(@kamigamolife)です。

本日はツイッターにurl(ドメインtop) を載せた時にサムネイルが表示されない場合の対処法を調べてみました。

2時間格闘しましたができませんでした。。惨敗記録です！

が！少しあとにやり方がわかりました😆

ドメイントップ(https://kamigamolife.com/)をツイッターからリンクすると、cocoonのサムネイルが表示されちゃう(˹ᆺ˺；)✿

なんか、cocoonのんになってるヽ(´o｀；
何を変えたらええんやろ💦
調べねば💦 pic.twitter.com/Biu40LIsQI
— 小雪@京都雑記ブロガー (@kamigamolife) 2018年8月13日

個別ページをツイッターからリンクすると、いい感じでツイッターに表示されます。

✿ブログ更新しました✿
【金閣寺の雪景色】息をのむ美しさ。ライブカメラで積雪チェック♪
猛暑の今日このごろ。金閣寺の雪景色をどうぞ😃少しでも涼をあなたに♪#金閣寺雪 https://t.co/Pbz6n3PyrX
— 小雪@京都雑記ブロガー (@kamigamolife) 2018年8月3日

上のように表示されるのは、ツイッタカードの設定でSummary Cardwith Large Imageを選んでいるからです。

個別ページはツイッター上で、しっかりとサムネイルが表示されるのでOKなんですが、ドメイントップが思ったサムネイルが表示されない。

いろいろ調べてみたところ、たぶん、ドメイントップのheadタグ内に以下のコードを追加すれば、出来そうな気がしたのでやってみました。

追加したメタタグはこちら。
メタタグを追加したファイル
結果は失敗。でも！！！！！
cocoonのフォーラムで「ツイッタカード」と検索してみた
ツイッタカードの画像サイズはいくつ？
ツイッターカードの表示を確認する方法

追加したメタタグはこちら。

①<meta name=”twitter:card” content=”summary” />
②<meta name=”twitter:site” content=”@kamigamolife” />
③<meta property=”og:url” content=”https://kamigamolife.com/” />
④<meta property=”og:title” content=”上賀茂life | 京都上賀茂からゆるい生活発信中” />
⑤<meta property=”og:description” content=”京都上賀茂の雑記観光ブログ。上賀茂life。「四季を楽しみ自然体で生きる」をテーマに「京都上賀茂・京都観光・C&A・ブログ運営・ゆるい生活」を中心に発信中。” />
⑥<meta property=”og:image” content=”https://kamigamolife.com/wp-content/uploads/2018/08/icon144×144.jpg” />

①<meta name="twitter:card" content="summaryかSummary_large_image" />
②<meta name="twitter:site" content="@ユーザー名" />
③<meta property="og:url" content="ブログurl" />
④<meta property="og:title" content="ブログタイトル" />
⑤<meta property="og:description" content="ブログの説明" />
⑥<meta property="og:image" content="ツイッタカードに表示したい画像のURL" />

①ツイッターカードの種類
②@ユーザー名
③ブログのURL
④ブログのタイトル
⑤スクリプション
⑥画像のURL