


今回はブログ初心者の僕が実際に僕がつまづいたTwitterカードの設定方法について丁寧に解説していきます。

しかし、ブログ初心者の僕にとってTwitterカードがぜんぜんつくれず2日間悩まされた問題だったので
同じく初心者ブロガーの方につまづいてほしくないので6枚の画像付きでブログ初心者のために分かりやすくつまづかないように紹介していきます!
そもそもTwitterカードって?



引用という形で設定してなくても画像を表示できますが
比較のために、これから僕がいままでやってたTwitterカードを設定してないブログ紹介のtweetとTwitterカードを設定した後のtweetを見せていきます!
前者がTwitterカードを設定する前のツイートで

後者がTwitterカードを設定した後のツイートです!



前者のリンクは、文章が設定できていないので、不格好になっていました。
やはりよりブログのリンクを押したくなるのはスタイリッシュな後者です。では次からTwitterカードの設定方法を解説していきます。
Twitterカードの設定方法

多くのブロガーの方は「summary_large_image」という大きな画像と短い紹介文が紹介されるバリエーションを使っているのでそちらの方を紹介していきます。そして今回はWordPress版の設定方法です。
「ダッシュボード」から→「外観」→「テーマエディター」を選択します。

「テーマヘッダー」(header.php)→「headタグ」の下に
↓こちらの7~9の「metaタグ」をコピー&ペーストします
<meta name="twitter:card" context="summary_large_image">
<meta name="twitter:card" context="@">

@以降は自分のTwitterアカウントを入力してください。


次はTwitterにちゃんと表示されるか確認するために「Card validator」にアクセスします!
CardURLに自分のtweetしたいURLを貼ります!

「Preview card」を押して実際に表示されるか確認します。「CardPreview」の下に緑の表示が出れば表示できてます!というサインです。しかし、赤の表示が出れば問題があるというサインなのでやり直しましょう。

何も問題がなければそのままtweetしましょう!
Twitterカード設定:まとめ

いかがだったでしょうか。この手順を順番通りに踏めばできるようになります。実際に僕も2日間悩んでた問題が一瞬で解決しました。

1、「ダッシュボード」→外観→テーマエディターを選択
2、「テーマヘッダー」(header.php)→「headタグ」の下に「metaタグ」をコピー&ペースト
3、「Card validator」にアクセスして確認
4、実際にTwitterに投稿!
Twitterカードを設定すればより読まれるブログになります!
この記事が参考になったら嬉しいです。