こんにちは。
今回は少し思考を変えて、ブログをシェアする為に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に表示される画像のwebページの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を入力するとプレビューが表示されるので確認してみましょう。
これでかっこよくシェアできますよ~♪
長文でしたがありがとうございました<m(__)m>