【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」のプラグインを使って簡単に設定できます。

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

 




スカウトされる、惚れられる秘密がわかる
メール講座
仕事や家事で
時間に追われる生活から抜け出して、
大切な人と好きなだけ
一緒に過ごせる未来を手に入れませんか?

毎日ブログを更新し続けたりメルマガを送り続けなくても、月3回の近況報告だけでお客さんの方から来てもらえるようになった、その秘密を公開しています。

【今だけ豪華プレゼント付き☆】




6 件のコメント

    • ヤスオさん、こんにちは!
      お役に立ててよかったです。
      アイキャッチ画像が表示されると、記事をアピールできていいですよね!
      こちらこそ、コメントありがとうございました。

    • ミツグさん、こんにちは。
      設定できたようでよかったです!
      コメントいただき、嬉しかったです。
      ありがとうございました。

  • コメント失礼いたします。2点ほどお聞きしたいのですが、コクーンでも記事毎のアイキャッチ画像を設定できるのでしょうか。カードプレビューまでは出来るのですが、ブログからツイッターにシェアすると記載されません。原因は何なのか分かりますか?素直にAll in One SEOをインストールすればいいでしょうか。

    • ハーブさん、こんにちは!
      コメントありがとうございます。
      Cocoonの場合は、何も設定しなくても記事のアイキャッチ画像が表示されるようになっていますが、トップページの画像だけはOGP設定が必要になります。

      Cocoonに限らずですが、設定をしていてもツイッターで画像が表示されないことが時々ありますが、しばらく時間が経つと表示されたりします。
      「これが原因」と断定することはできないのですが、ツイッターカードバリデータでのプレビュー画像は表示されてるのでしたら、WordPressのキャッシュが原因の可能性もありますね。
      「Cocoon設定」→「キャッシュ削除」→「ブログカードキャッシュの削除」で様子を見てはいかがでしょうか?
      All in One SEOはコクーンの設定と干渉してしまうかもしれないので、インストールはできればしない方がいいと思います。

  • コメントを残す

    メールアドレスが公開されることはありません。 が付いている欄は必須項目です

    CAPTCHA


    このサイトは reCAPTCHA によって保護されており、Google のプライバシーポリシー利用規約が適用されます。

    reCaptcha の認証期間が終了しました。ページを再読み込みしてください。