WordPressとTwitterカード
今、利用しているWordPressのテーマ「Emanon」の場合は、Twitterカードの設定が組み込まれている為、簡単に設定可能なのですが、久々に友人に提供しているWordPressサイトはデフォルトのテーマだったので、改めて手動で設定する方法をメモしておきます。
Twitterカードとは？
TwitterなどにURLを投稿した時にそのページのタイトル・URL・概要・アイキャッチ画像（サムネイル）が表示されるアレです。
これをOGP（Open Graph protocol）タグといいます。
Twitterカードの設定箇所とタグはこちら！
外観→テーマファイルエディター→テーマヘッダー（header.php）を開き、<title>のすぐ上に以下のタグをコピペしてください。
これは、このサイトのソースになりますので、コピペしたら赤文字箇所をご自身の情報に合わせて書き換えてください。
このままでは私のサイトを宣伝することになります！笑
Twitterカードが表示されるか確認できるサイト「Card validator」
ちゃんと表示されるかどうか確認できるサイトをTwitterが提供しています。
Card validator https://cards-dev.twitter.com/validator
Card URL のところにご自身のサイトURLを入力し、Preview card をクリックしてください。正しく設定できていれば表示されます。
【応用編】Twitterカードの大きさ
カードのサイズは大小2種類あり、好みで設定することができます。
上記タグの「summary_large_image」を「summary」に書き換えるだけで小さい方になります。
大小では画像の比率が変わりますので、それに合わせて画像を用意しましょう。
| 小（summary） | 大（summary_large_image） |
| 正方形画像（1:1） | 長方形画像（1.91:1） |
| H144px × W144px 〜 H4,096px × W4,096px | H300px × W157px 〜 H4,096px × W2,144px |
【応用編】Twitterカードのタグ一覧
| タグ | 説明 | 設定例（本サイト） |
| Twitter:card | Twitterカードの大きさ 大：summary_large_image 小：summary | summary_large_image |
| Twitter:site | TwitterのID | @KNTRamml |
| og:url | サイトのURL | https://azm.biz/kntr/ |
| og:title | サイトのタイトル | KNTR -SNS収益化- |
| og:description | サイトの概要 | Twitter・Instagram・TikTokなどのSNSを横断して収益化を目指しています |
| og:image | 表示させる画像のURL | httpからURLを入力 |
最後に
そこまで時間も手間もかからず簡単に設定できます。
ツイートにURLだけ表示させるより、Twitterカードを適切に表示させたほうがクリック率が上がりますし、見ている方にも安心感を与えられると思います。
細かいチューニングをしてWordPressサイトの完成度を高めましょう！
コメント