サイトのURLをツイートしたときにTwitterカードが表示されるようにする方法

会社のサイトのURLをツイートしたときにTwitterカードが表示されるように、OGPの設定をしました。

 

どうもです!Web担当の石田です。
せっかくなので、やり方をまとめました!
Facebookは以下の内容とはまたべつに細かい設定があるみたいなのですが、今回はTwitterについてだけです。

1,まずはheadにコードを書く。

headの<>の中をいじったことがなかったので抵抗がありました。

以下の内容にします。

<head prefix=”og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#”>

 

 

2,メタタグを加える

<meta property="og:title" content="表示させたいページのタイトル" />
<meta property="og:type" content="website" /> 
<meta property="og:url" content="表示させたいサイトのURL" />
<meta property="og:image" content="表示させたい画像のURL" />
<meta property="og:site_name" content="サイトのタイトル" />
<meta property="og:description" content="ページの簡単な説明" />
<meta name="twitter:card" content="summary_large_image">

一番下にかいてある<meta name="twitter:card" content="summary_large_image">
これが、Twitterカードのサイズを指定するためのメタタグ
小さめのsummaryか大きめのsummary_large_imageを選べる
最近良く見るのはsummary_large_imageのほう

ポイント1

<meta property="og:type" content="website" /> の部分について!
ブログの場合は、websiteの部分を"blog"にします
トップページ以外は"article"にします

ポイント2

表示させたいサイトのURLの部分が一番困りました

./image/IMG_0001.jpg

では、画像が表示されないです!

http://www.ikedaexp.jp/image/IMG_0001.jpg

というふうに、書くとうまくいきます!!

 

 

3,確認

「Card validator」でプレビューして確認します
Card Validator | Twitter Developers

 

以上です!