Suzuki Blog Written by Yuki Suzuki

Twitterカードについて【設定は簡単】

Programming

こんにちは!スズキです。

今回はTwitterカードについてお伝えします。

私も最近、初めて使ったのですが、簡単に設定できます。

自分のブログやサイトをTwitterで拡散したい方は、ぜひ設定しておきましょう。

記事の内容

  • Twitterカードとは
  • カードの種類
  • 設定方法

スポンサードサーチ

Twitterカードとは

Twitterカードとは、ツイートに貼り付けられたURLの画像や紹介文を自動で表示する機能のことです。

このTwitterカードを設定しておくことで、リンク先の概要が一目で把握できるため、クリックされやすくなります。

せっかく作ったブログやサイトを多くの人に見てもらうために、ぜひ設定しておきましょう。

カードの種類

カードは4種類あります。

  1. Summary Card
  2. Summary Card with Large Image
  3. App Card
  4. 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を指定します。

注意点として、絶対パスで指定するようにしましょう。

私は、最初に相対パスで指定してしまったのですが、これだと一切表示されません。

まとめ

いかがだったでしょうか。

6箇所追加するだけなので、特に難しいところはないと思います。

ただ、画像のURLに関しては注意してください。

絶対パスで指定するようにしましょう。

以上です。

コーディングを学ぶならデイトラ

Web制作コース

動画でプログラミングを学ぶなら

Udemy

オンラインスクールでプログラミングを学ぶなら

Skill Hacks