こんにちは。上賀茂ブロガーの小雪(@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タグ内に以下のコードを追加すれば、出来そうな気がしたのでやってみました。
追加したメタタグはこちら。
①<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
メタタグを追加したファイル
編集するテーマを選択：cocoon→tmp-user→head-insert.php
結果は失敗。でも！！！！！
惨敗(・_・;)(・_・;)(・_・;)
2時間格闘しましたが、わかりまちぇんでした(・_・;)
どなたか優しいお方、教えてくださいm(_ _)m
cocoonのフォーラムで「ツイッタカード」と検索してみた
なんだ。。。簡単やった！！
cocoonの設定でちょちょいのちょいで出来ますやん♪
WP無料テーマcocoon限定ですが・・・
では、その設定方法です。
cocoon設定→OGP→ホームイメージ→画像のアップロードを行うだけでした・・・
それまではやはりcocoonのサムネイルが指定してありました。
はぁ、できてよかった。
cocoonでツイッターカードで悩んだはる方の参考になれば嬉しいです♡
※最初にメタタグを追加したファイル「cocoon→tmp-user→head-insert.php」からメタタグは削除しておいてくださいね♪
ツイッタカードの画像サイズはいくつ？
Summary(小)：144×144 以上の1対1
Summary_large_image(大)：600×314 以上の1.91対1
ツイッターカードの表示を確認する方法
こちらで確認できます♪
では、またね。see ya٩( ᐛ )و
コメント