Twitterカードについて【設定は簡単】
こんにちは！スズキです。
今回はTwitterカードについてお伝えします。
私も最近、初めて使ったのですが、簡単に設定できます。
自分のブログやサイトをTwitterで拡散したい方は、ぜひ設定しておきましょう。
記事の内容
- Twitterカードとは
- カードの種類
- 設定方法
スポンサードサーチ
Twitterカードとは
Twitterカードとは、ツイートに貼り付けられたURLの画像や紹介文を自動で表示する機能のことです。
このTwitterカードを設定しておくことで、リンク先の概要が一目で把握できるため、クリックされやすくなります。
せっかく作ったブログやサイトを多くの人に見てもらうために、ぜひ設定しておきましょう。
カードの種類
カードは4種類あります。
- Summary Card
- Summary Card with Large Image
- App Card
- Player Card
3と4はそれぞれアプリ配布用と動画サイト用です。
そのため、ブログやサイトには1か2を設定しましょう。
1と2の違いは、表示される画像の大きさです。
お好みでどちらかを設定しましょう。
スポンサードサーチ
設定方法
それでは、設定方法についてです。
設定箇所は6つです。
headタグ内に以下のコードを追加しましょう。
<meta name="twitter:card" content="カード種類" />
<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" />
1行目から解説していきます。
全てcontentの部分に記述します。
①カード種類を指定
上述したように、ブログやサイトの場合は、Summary CardかSummary Card with Large Imageを指定します。
②Twitterのユーザ名を指定
Twitterのユーザ名を指定します。
③記事のURLを指定
その記事のURLを指定します。
④記事のタイトル
⑤記事の要約
それぞれ記述します。ここで記述したものがツイートで表示されます。
⑥画像のURL
最後にツイート上で表示させたい画像のURLを指定します。
注意点として、絶対パスで指定するようにしましょう。
私は、最初に相対パスで指定してしまったのですが、これだと一切表示されません。
まとめ
いかがだったでしょうか。
６箇所追加するだけなので、特に難しいところはないと思います。
ただ、画像のURLに関しては注意してください。
絶対パスで指定するようにしましょう。
以上です。
コーディングを学ぶならデイトラ
動画でプログラミングを学ぶなら
オンラインスクールでプログラミングを学ぶなら