どうも、ばやし(@bayashism)です。
Twitterで自分のサイトのURLを貼ってみると
「あれ?TOPページのリンクを貼るとアイキャッチ画像が表示されていない」
ということに気が付きました。
しかし、ブログを開設して間もない方は特に設定をしていない方が多いのではないでしょうか?
私が使っているブログテーマ「THE THOR」では簡単にTwitterカード(OGP)の設定ができアイキャッチ画像を表示させることができます!
今回の記事では設定の仕方をご紹介していきます。
Twitterカード(OGP)とは何か?目的は?
Twitterカードとは、ツイッターのツイート内に貼られた記事へのリンクを目立たせる機能のことです。
具体的にはリンクを貼り付けたツイートの中に記事の「アイキャッチ画像」や「記事タイトル」などが表示されるようにする機能のことです。
TwitterカードはOGPとも呼ばれ、OGPは「Open Graph protocol」の略称です。
自分のブログはTwitterでどう見えているか?
Twitterカードがどうなっているか、実際に見てみましょう。
自分のURLを入力することで、Twitterカードの設定がどうなっているか確認ができるサイトがあります。
こちらは、Twitterの公式サービスですので安心してお使いください!
使い方はいたって簡単でです。
Card URLのところに自分のブログのアドレスを入力するだけ!
すると、自分のサイトのリンクをTwitterに貼った際にどのように表示されているかを確認することができます。
現時点ではNo imageと表示されており、これではブログのイメージはよくわからず、夜に行ってみようと思う人は少ないんじゃないかなと思います。
自分以外の人がブログを紹介するためにリンクを貼ってくれた際にも目立つように Twitter カードの設定はしておきたいところですね。
【THE THOR】でのTwitterカード(OGP)の設定方法
The THOR ではカスタマイズ画面から簡単に Twitter カードの設定をすることができます。
とても簡単なので ブログを目立たせるためにも、すぐに設定しておきましょう
Twitter カードに表示させたい画像を選択する
まず「外観」⇒カスタマイズ画面に移動します。
カスタマイズ画面から SNS を選択します。
次に SNS 設定から OGP 設定を選択します 。
ここで Twitter カードに表示させたい画像を選択します。
これで Twitter カードにアイキャッチ画像を表示させる設定は完了です。
この際に選択する画像のサイズは「縦630px 横1200px」 の画像サイズにすることを推奨します。
サイズであれば Twitter Facebook のどちらにも対応しています。
横長の画像にしておかないときれいに表示させることができません。
その他の項目は入力不要です
Twitter に表示させるレイアウトを選択する
Twitter カードには表示させるレイアウトは2種類あります
1つめ「Summary Card」
こちらのレイアウトの設定だと Twitter に表示された時画像の両端が切り取られてしまいます。
中央部分が正方形になるように画像を表示されるのでデザインによってはアイキャッチ画像の内容がよく見えずクリック率に影響してくるでしょう.
設定するアイキャッチ画像のサイズに注意が必要です。
2つ目「Summary Card with Large Image」
こちらの設定では画像が全て表示されます。
当ブログはアイキャッチ画像を正確に表示させるためこちらの設定を採用しています。
Twitter カード画像の選択した際の注意点
Twitter カードの画像選択が簡単にできてしまいます
表示がどうなっているのかこちらのサイトですぐに確認したくなりますが少し待ってください
画像やレイアウトの変更が1~2分待たなければ反映されません。
少し時間を置きながら調整して確認してみてください。
まとめ これでブログ注目度UPは間違いなし!
これで Twitter カードの設定をできました。
紹介していただいても自分のブログが注目度 up すること間違いなしです
あと自分のブログの魅力度をアップさせるのみ!
より注目してもらえるように地道にブログを頑張っていきましょう。