株主優待💰と趣味の呟き😊: 初心者でも頑張る❓❕　twitter cardを使ってみよう❕

2020年7月16日木曜日

初心者でも頑張る❓❕　twitter cardを使ってみよう❕

こんにちは。

今回は少し思考を変えて、ブログをシェアする為にtwitter　cardを利用してみました。
そもそもtwitter　cardは後から知ったのですがね。

twitterにてwebページをシェアするとこのような表示されることが多いかと思います。

説明を追加

画像付きのリンクページはよく目立つのでついつい押してしまうのではないでしょうか？

私もこのブログに表示したいと思い、ネットで検索しました。twitter　ブログリンクや様々なワードで調べたところ、上記のtwitter　cardということが分かったのです。

どうやらこのtwitter　cardはブログのHTMLにmetaタグたるものを加えなければいけないことに・・・Google AdSenceでも苦戦したのにまたか、、と少しがっかりしつつも挑戦してみました☆

私はこのwebサイトを参考にmetaタグを追加しました。
https://www.howtonote.jp/twitter/helpful/index5.html#section4

上記のwebサイトをもとに入力して完成したHTMLがこちらです。

6個のmetaタグを入力したのですが、twitter　cardに表示される画像のｗebページのURLが少しうまくいかなかったので違った感じになったいます。このmetaタグは上記のWebサイトに記載されていたのでそれを使用しました。今見ると記載されていないのでこちらを参考にしてみてはいかがでしょうか。ちなみに各ブログによっても違ってくると思うのでこれはBloggerの場合なので悪しからず💦それとブログのテーマでもかわってくるのこと。私はほぼデフォルトのはずです　笑　そして下記のHTMLが私が入力して反映されたmetaタグたるものです。

<meta content='summary_large_image' name='twitter:card'/>
<meta content='@wsGqsaqZ9lsiHhy' name='twitter:site'/>
<meta content='Funny_everyday_Futamasa-kun' property='og:title'/>
<meta content='blog' property='og:description'/>
<b:if cond='!data:view.featuredImage'>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkVQDDW7WARphKMecSBi0utXqSFZfeOfBcrY7P54fUxmpJ6Q1eBetLHGHa7bJ_qjAvkuCq3tHaykrEs6bIJ01y-01TLgtdOaC1c4Xi0RUCYCzOVPDRNiXHtQNLkiYbFib46TqKWyjvktQ5/s80/582100F9-7B4A-4E89-A7DF-7F708A4953AB.jpeg' property='og:image'/>
</b:if>
<meta content='https://www.xn--y8jl3a6f0b4h.com/' property='og:url'/>

後は一旦この成果？を確認してみないといけません。実際にtwitterにシェアするとわかりますが、twitter　DevloperのCard　validatorというwebサイトに自身のURLを入力するとプレビューが表示されるので確認してみましょう。