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

【惨敗からの成功!】cocoon限定^^; ツイッターにurlを載せた時に サムネイルが表示されない時の対処法 wpカスタマイズ
小雪
小雪

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

 

 

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

 

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

 

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

 

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

 

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

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

 

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

 

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

スポンサーリンク

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

①<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

メタタグを追加したファイル

編集するテーマを選択:cocoontmp-userhead-insert.php

結果は失敗。でも!!!!!

惨敗(・_・;)(・_・;)(・_・;)

小雪
小雪

2時間格闘しましたが、わかりまちぇんでした(・_・;)

どなたか優しいお方、教えてくださいm(_ _)m

cocoonのフォーラムで「ツイッタカード」と検索してみた

なんだ。。。簡単やった!!

cocoonの設定でちょちょいのちょいで出来ますやん♪
WP無料テーマcocoon限定ですが・・・

 

では、その設定方法です。

cocoon設定→OGP→ホームイメージ→画像のアップロードを行うだけでした・・・

それまではやはりcocoonのサムネイルが指定してありました。

 

はぁ、できてよかった。

cocoonでツイッターカードで悩んだはる方の参考になれば嬉しいです♡

 

※最初にメタタグを追加したファイル「cocoontmp-userhead-insert.php」からメタタグは削除しておいてくださいね♪

ツイッタカードの画像サイズはいくつ?

Summary(小):144×144 以上の1対1

Summary_large_image(大):600×314 以上の1.91対1

ツイッターカードの表示を確認する方法

こちらで確認できます♪

小雪
小雪

では、またね。see ya٩( ᐛ )و

 

コメント

error:Content is protected !!