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

Twitterカード

 こんにちは、nozomiです。

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

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

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

Twitterカード

どうでしょうか?

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

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

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

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

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

Twitterカードの設定手順

All in One SEOでの設定

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

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

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

『All in One SEO Pack』でSEO対策を!

2018.09.27

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

 

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

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

Twitterカード

 

【機能管理】の画面に切り替わったら、【ソーシャルメディア】の「Activate」をクリックします。

Twitterカード

 

③ソーシャルメディアが有効化され、画面左側のメニューに表示されますので、「ソーシャルメディア」をクリックします。

Twitterカード

 

【ソーシャルメディア】の画面に切り替わりますので、設定をしていきます。

Twitterカード

「AIOSEOのTitleとDescriptionを使用する」の□をクリックしてチェックを入れます。

②サイト名・・・あなたのサイト名を入力します。

③ホーム画像・・・「画像をアップロード」をクリックします。

 

⑤【Coose Image】の画面が表示されます。

Twitterカード

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

                

URLが表示され、ホーム画像に画像がアップロードされました。

Twitterカード

 

⑥画面を下にスクロールし、次に【画像設定】をします。

「OG:Imageソースを選択」①「Defalt Image」「▼」をクリックし、表示された項目の②「アイキャッチ画像」をクリックします。

Twitterカード

 

⑦さらに画面を下にスクロールしていき、【Twitter設定】をします。

Twitterカード

①デフォルトTwitterカード・・・「▼」をクリックし「要約」か「要約の大きい画像」のどちらかをクリックして選択します。
「要約」はアイキャッチ画像が小さく表示され、「要約の大きい画像」はアイキャッチ画像が大きく表示されます。
nozomiは「要約」にしました。  

②「Twitterサイト」・・・TwitterのIDを入力します。

③「Twitter投稿者を表示」・・・□をクリックしてチェックを入れます。

④「Twitterドメイン」・・・Twitterアカウントのユーザー名から、@以外の部分を入力します。

 

⑧画面を一番下までスクロールし、「設定を更新」をクリックします。

Twitterカード

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

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