【Twitterカードの設定】ブログ記事をアイキャッチ画像付きでTwitterにシェアする方法

Twitterカード

こんにちは、nozomiです。

ブログの記事をTwitterでシェアしたいな、と思ったことはありませんか?

そのままTwitterにシェアすると、Twitterにはブログ記事のURLがリンクとして表示されますが、URLだとあまり目立たないんですよね~。

なので、こんな風にブログ記事をアイキャッチ画像付きで表示させてあげるんです。

Twitterカード

どうでしょうか?

画像があると、通常のリンクよりも見ている人の目を引き付けますよね。

今回は、WordPressのブログ記事をアイキャッチ画像付きでシェアできる方法、【Twitterカード】の設定方法をわかりやすく解説します。

設定は、『All in One SEO』のプラグインを使うと簡単にできますよ。

また、Cocoonのテーマを使っている場合はプラグインを使わなくても設定ができます。

Cocconでの設定方法も併せて解説しますね。

Twitterカードの設定手順

All in One SEOでの設定

今回ご紹介する方法では「All in One SEO」のプラグインを使います。

まだ「All in One SEO」をインストールしていない方は、先にインストールをしてくださいね。

「All in One SEO」のインストール方法はこちらのページで解説しています。

【2021年版】『All in One SEO (旧All in One SEO Pack)』のおすすめ設定方法

2018.09.27

また、テーマはハミングバードを使用していますので、他のテーマをお使いの場合は、画面の表示が若干異なるかもしれません。

 

それでは、手順を解説していきます。

① WordPressのダッシュボードにログインしておきます。
左側のメニューの「All in One SEO」にマウスのカーソルを合わせ、表示されたメニューの「ソーシャルネットワーク」をクリックします。

All in one SEO

 

【AIOSEO】【ソーシャルメディア】の画面が表示されるので、①「ピンタレスト」タブをクリックします。

②「TwitterURL」の欄に使っているツイッターのアカウントのURLをコピペし、最後に③「変更内容を保存」をクリックします。

 

③次に、「Twiter」タブをクリックし、【Twitterカード設定】をします。

All in one SEO

②「Twitterカード有効化」・・・有効にします。

③「カードタイプのデフォルト」・・・「要約」か「大きなカードで要約」のどちらか好みの方を選びます。

「要約」はアイキャッチ画像が小さく表示され、「要約の大きい画像」はアイキャッチ画像が大きく表示されます。

④「デフォルトの投稿画像ソース」・・・「アイキャッチ画像」を選ぶと、ツイッターであなたの記事がシェアされた時に記事のアイキャッチ画像が表示されます。

 

③次に【ホームページ設定】をします。

All in one SEO

①「カードのタイプ」・・・「要約」か「大きな画像で要約」のどちらかを選びます。

②「イメージをアップロード」をクリックします。

 

④【画像を選ぶ】の画面が表示されます。

All in one SEO

①ブログのイメージ画像をクリックして選択し、②「画像を選ぶ」をクリックします。

                

【ホームページのタイトル】を設定します。①の欄に「サイトのタイトル」を設定しておけばOKです。

All in one SEO

ここまで終わったら②「変更内容を保存」をクリックします。

以上で「All in One SEO」での設定は完了です♪

 

Cocoonのテーマを使っている場合の設定方法

Cocoonのテーマを使っている場合は、何も設定しなくてもTwitterカードが表示されるようになっています。

ですが、トップページの画像に関しては、設定をしないと下のようなCocoonの画像が表示されてしまうのです。

OGP

なので、忘れずに設定をしておきましょう!

 

①左側のメニューの「Cocoon設定」をクリックします。

Cocoon設定

 

②【Cocoon設定】の画面が表示されたら、「OGP」のタブをクリックします。

Cocoon OGP

 

③【OGP設定】の①「OGPタグの挿入」、②「Twitterカードタグの挿入」にチェックを入れます。

③「Twitterカードタイプ」「大きな画像のサマリー」を選ぶと、アイキャッチ画像を大きく表示させられます。

Cocoon OGP

 

④【ホームイメージ】の画像のアップロードの「選択」をクリックし、使いたい画像を選択します。

Cocoon OGP

設定し終わったら、「変更をまとめて保存」をクリックします。

以上で設定は完了です。

 

Twitterカードバリデータにブログ記事を登録する

続いて、Twitterにブログを登録していきます。

①下のリンクをクリックして、Twitterカードバリデータにアクセスします。

 ⇒ Twitterカードバリデータ

 

②【Twitterにログイン】の画面が表示されますので、「メールアドレス」「パスワード」を入力して「ログイン」をクリックします。

Twitterカード

 

③ログインできたら、Twitterにシェアしたいブログ記事の「URL」を入力し、「プレビューカード」をクリックします。

Twitterカード

         やじるし

右側の「カードプレビュー」にTwitterカードのプレビューが表示されればOKです。
この場合、まだ画像が表示されていませんね。

画像が表示されるまでは数時間かかることもあるようですが、しばらく待つと表示されるようになります。

Twitterカード

 

このように、画像が表示されていれば、Twitterにシェアしても画像が表示されます。

Twitterカード

記事をシェアするには?

 Twitterに記事をシェアするのは、ブログ記事の下の方にあるシェアボタンから行います。

①「ツイート」のボタンをクリックします。

 

②リンクの共有画面が表示されます。

ブログ記事のタイトルと記事のURLが表示されていますので、ツイートしたい文章も入力し、②「ツイート」をクリックするとツイートされます。

 

まとめ

Twitterにブログ記事をシェアした時に、アイキャッチ画像が表示されているとやっぱり目立ちますね♪

せっかくシェアするなら、たくさんの人に記事を読んでもらいたいですよね。

この方法なら「All in One SEO」のプラグインを使って簡単に設定できます。

一度設定をしておけば、次からはすぐに記事をアイキャッチ画像付きでシェアできるので、ぜひこの機能を利用してくださいね~。