Twitterカードを設定してみました
Twitterカードの設定をするとURLをツイートした時に画像付きの見栄えする表示ができるようになります。ということで、自分のホームページにもTwitterカードを設定してみました。
WordPressとかのCMSだけでなく、ホームページビルダーやテキストエディタで作ったHTMLサイトでも簡単に導入できますので、Twitter使っている人はチャレンジしてみてください。
設定方法
TwitterカードはHTMLの<head>〜</head>の間に以下の記述を追加することで表示できるようになります。
最低限必要な事項は以下の通り。
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="タイトル">
<meta name="twitter:description" content="サマリー、内容説明">
<meta name="twitter:image" content="http://example.com/path-to-image.jpg">これを追加するだけなので、特別なプラグインとか登録とかをしなくても簡単に設定できます。
項目の意味は以下のような感じです。
| twitter:card | 小さな正方形画像を表示する場合は「summary」、大きな横長画像を表示したい場合は「summary_large_image」 |
|---|---|
| twitter:title | コンテンツのタイトル |
| twitter:description | コンテンツの説明 |
| twitter:image 注 | 画像へのURL |
確認
正しく設定できているかの確認はCard Validator | Twitter Developersからできます。ツイート前にチェックしてみてください。
リンク
About Twitter Cards − Twitter Developers
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards
Getting started with cards − Twitter Developers
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started
Summary with large image − Twitter Developers
https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/summary-card-with-large-image
注 画像表示が不要な場合は省略可能です。
」を利用しています。
この記事へのコメント