【SWELL用】Twitterでブログのアイキャッチ画像を表示する方法

Twitterカードの作り方アイキャッチ画像

パソコンが苦手な方でもちょっとおしゃれなブログが楽しめるようなテクニックをわかりやすく解説しています。

ママ

Twitterにブログのアイキャッチ画像とタイトルをのせたリンクを載せたい。どうしたらできるんだろう?

Twitterカード
アイキャッチ画像があるリンクだとかわいいですね。

Twitterにでる画像をTwitterカードといいます。

表示させるにはワードプレス側で設定が必要です。

Twitterカード とは

ツイートに貼られたリンクURLの画像やページタイトルが表示される機能です。

この記事でわかること

SWELLを使用している方が、Twitterの投稿にTwitterカードを表示させる方法がわかります。

この記事の内容

Twitterカードの表示の仕方

① プラグイン SEO SIMPLE PACKをインストールする

SWELLで推奨されているプラグイン SEO SIMPLE PACKインストール・有効化します。

プラグイン SEO SIMPKE PACK とは

SWELL推奨。必要最低限な機能だけが搭載されているシンプルなプラグイン。

できること

✔︎ SEO対策に必須のmetaタグインデックスの有無が記事ごとに簡単に設定できる
✔︎ アナリティクスサーチコンソールの設定が簡単
✔︎ OGP設定ができる Facebook Twitter
✔︎ 設定画面は全て日本語対応

①ダッシュボードの中の プラグインを選択
②新規追加を選択

③右上のキーワードにSEO SIMPLE PACKをいれる
④いますぐインストールを押し、有効化する。

② SEO SIMPLE PACKのOGP設定をする

OGP設定 とは

Open Graph Protocol

記事がSNSでシェアされたときに、適切なぺージのタイトルやアイキャッチ画像、説明文を表示させるための設定

インストール、有効化するとダッシュボードにSEO PACKのメニューが出てきます。

⑤SEO PACKを選択
⑥OGP設定を選択
⑦Twitterを選ぶ
⑧Twitterアカウント名(@はいらない)     
⑨カードデザインを選ぶ
⑩設定を保存

⑨ カードデザインは2種類

summary
summary_large_image

アイキャッチ画像を見せたいのであれば、summary_large_imageが良さそうですね。

OGPの推奨サイズは1200×630pxです。

アイキャッチ画像とは違う画像にしたい場合には、OG用に画像設定することもできます。

TwitterカードOGPの画像設定

以上で設定は終わりです。

Twitterの投稿画面に、のせたい記事のURLをコピーし、貼り付けると自動ででてきます。

貼り付ける時の注意点

リンクの貼り付けは、文章の最後にしましょう。文の途中や最初に貼り付けると、ブログカードだけではなくURLも出てしまうので、少しカッコ悪いので注意です。

私は 最初失敗しました。笑

設定をしてもTwitterにアイキャッチ画像が出てこない場合

Twitterのキャッシュをクリアする

キャッシュをクリアとは?

【キャッシュ】・・ブラウザーなどが、表示したWEBページのデータを一時的にコンピュータに保存しておく機能。同じページにアクセスした時に、すばやく表示させるために保存データを参照する。

→保存された古いデータのせいで、表示が崩れたり、古い画像が表示され、正しく表示できなくなることがある。

正しい表示をさせるために、キャッシュをクリアすることで、不具合を解消させます。

Twitter画面をひらきます。

twitterキャッシュをクリアすゆ方法
twitterキャッシュをクリアする方法

この設定をした後、再度twitterの投稿画面にURLのコピーを入れてください。

まとめ

できましたでしょうか?

ちょっとめんどうなのですが、1回の設定でOKです。

ママ

Twitterでたくさんの方にアイキャッチ画像を見てもらえますね。

かわいいアイキャッチ画像を作ってブログを楽しみましょう♪

  • URLをコピーしました!
  • URLをコピーしました!
この記事の内容
閉じる