WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

WordPressのブログ記事をシェアしてTwitterに画像付きで表示させる時に、自分の好きな画像を指定する方法をまとめた記事です。

Twitterに画像付きで記事を表示するには「Twitterカード」とよばるものに表示したい画像を指定しないといけないのですが、ではその画像を選ぶにはどうすれば良いのか?

今回は、どちらかと言うとWordPressを始めたばかりの初心者さん向けの記事になりますが、以下で自分が表示したいと思っている画像をTwitterカードに指定する方法について解説していきますので、ぜひ参考にしてもらえればと思います★

Twitterに画像付きでシェアする時に好きな画像を指定する方法(WPの場合)

WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

方法は大きく2つあって、プラグインを使わない方法と使う方法とに分かれます。

プラグインを使わない方法

プラグインを使わない方法としては、例えばWordPressの記事編集画面にある「アイキャッチ」をTwitterカードとして指定するというやり方です。

ただ、これは(使っているテーマにもよりますが)テーマファイルのheader.phpなどを編集しないといけないなど、カスタマイズが必要です。そのためHTMLやPHPの知識がなければ難しいので、ちょっと初心者さんにはハードルが高いかもしれません。。。

プラグインを使う方法

そこで本記事ではプラグインを使う方法を中心に紹介させていただこうと思いますが、この手のソーシャルメディア系のプラグインはいくつもある中で、今回オススメするのがAll in One SEO Packです。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

ベタなプラグインですみませんw

でも、SEO周りの設定はこれ1個でほぼ完結するので管理が楽ですし、All in One SEO Packにはソーシャルメディア連携に関するオプション機能が入っていて、しかも無料で使うことができるので「使わないと損!」ってなわけなんです。

All in One SEO Packのソーシャルメディア設定の機能説明と使い方のまとめ【2019年版】

2019年2月27日

STORKと合わせて入れておきたいWordPressプラグイン10個【2019年版】

2018年11月29日

・・・

ではここからAll in One SEO Packを使ったTwitterカードの画像指定方法について、詳しく解説していきますね★

All in One SEO PackによるTwitterカードの画像指定

All in One SEO Packプラグインのインストール方法などについて、過去のSEOの設定と合わせてまとめた以下の関連記事がありますので、そちらを参考にしてもらえればと思います。

で、WordPress管理画面のAll in One SEO Packのページへ進むと、メニューの中に「機能管理」があるのでクリックします。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

機能管理ページの中に「ソーシャルメディア」がありますので、「Active」ボタンをクリックします。これでソーシャルメディア機能を使うことができるようになりました。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

続いて記事の編集画面に進むと、All in One SEO Packの設定ブロックの中に「ソーシャル設定」というタブメニューが追加されていますので、
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

ソーシャルメディア連携に必要な細かい設定をすることができるようになります。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

All in One SEO Packのソーシャル設定

All in One SEO Packのソーシャルメディア連携で行う設定は以下の通りです。

タイトル
説明
画像
カスタム画像
画像の幅を指定
画像の高さを指定
カスタム動画
Facebook オブジェクトタイプ
Facebook デバッグ
この投稿をデバッグ
Twitter カードタイプ
カスタムTwitter画像

今回はTwitterへの画像付き記事の連携になるので、そのために最低限必要な設定が以下の2点です。

画像
Twitter カードタイプ

ちなみに、All in One SEO Packのソーシャル設定を有効にした段階で、ソースの<head>内に以下のTwitterカードの設定が自動で追加されます。

All in One SEO PackによるTwitterカード初期設定
<meta name=”twitter:card” content=”summary”>(Twitter カードタイプ)
<meta name=”twitter:title” content=”記事タイトル | ブログタイトル”>(タイトル)
<meta name=”twitter:description” content=”記事本文のテキストの最初から200文字くらいまでを自動表示”>(説明)
<meta name=”twitter:image” content=”ドメイン名/wp-content/plugins/all-in-one-seo-pack/images/default-user-image.png”>(画像)
※()内の表記は、各メタタグに該当するソーシャル設定の項目名です。

このtwitter:imageの部分が、Twitterでシェアしたに記事で表示される画像に当たります。All in One SEO Packのソーシャル設定を使うとことで、ここをメディアからアップロードされた画像の中から好きなものへと変更できるという訳です。

All in One SEO Packでの画像差し替え

ソーシャル設定の画像の項目にところに、この記事でアップロードされた画像が一覧で表示されると思います。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

で、その中から、Twitterのサムネイル画像で使いたい画像を選んでチェックするだけです。

Twitter カードタイプをお好みで変更する

あとは設定ページ下部のTwitter カードタイプですが、これも記事ごとに「要約」と「要約の大きい画像」の中からどちらかを選ぶことができます。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

違いは以下のとおりです。

Twitter カードタイプ「要約」
メタタグ<meta name=”twitter:card” content=”summary“>
画像表示WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法
Twitter カードタイプ「要約の大きい画像」
メタタグ<meta name=”twitter:card” content=”summary_large_image“>
画像表示WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

メタタグのtwitter:cardが異なりますが、見た目の違いとしては画像の大きさです。なので、記事によって画像を大きく見せたいような場合は「要約の大きい画像」を選んでみると良いんじゃないかと思います。

補足

以上、ブログ記事をTwitterにシェアする時に好きな画像を指定する方法の解説はここまでですが、いくつか補足を入れておきますね。

タイトルや説明文は入れなくて良いの?

タイトルや説明文(description)は自動でメタタグの中に入ってくるので、入力必須ではありません。

でも、ソーシャルメディア用に表記、表現を変えて見せたいという場合は変更すると効果的かもしれません。

カスタム画像とカスタムTwitter画像の違い

All in One SEO Packのソーシャル設定には、「画像」「カスタム画像」「カスタムTwitter画像」など画像設定に関する項目が複数あります。

ちなみに「画像」についてはメディアからアップロードされたものがあれば自動で表示されますが、画像がなければ「カスタム画像」を使ってSNSシェア用の画像を別途アップロードすることができます。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

また、「カスタム画像」でアップされた画像は、metaタグ上では<meta property=”og:image“>の方に反映され、以下の「カスタムTwitter画像」からアップロードされた画像<meta property=”twitter:image“>へ反映されます。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

なので、FacebookとTwitterとで表示させる画像を明確に分けたい場合などに、これらの画像フイールドを使い分けると良いかと思います。

Twitterカードがうまく表示されない時は?

最後に、Twitter上にうまくブログの記事が表示されないときや、Twitterにシェアする前にどんな感じに表示されるのかを見ておきたいという場合は、以下のCard validatorを使ってプレビューを確認することができます。

Card URLの部分に記事のURLを入れ、
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

「Preview card」ボタンをクリックすると、プレビューを確認することができます。
WordPressの記事をTwitterにシェアする時に好きな画像を指定する方法

最後までご覧いただき、ありがとうございました★

関連記事

コメントを残す