めんどこちょい

仮想通貨を中心とした雑記ブログ。

ワードプレスのサイトをTwitterでシェアした時、リンクで画像を表示させる方法 【2018年最新版】

ワードプレスのテーマ、「Stork」を使っています。

このテーマ、さすが有料テーマだけあって基本的にはいう事なしのとても使いやすいテーマ(しかも、カスタマイズの方法も、公式ページやブロガーさんがいろいろ上げてくださってる)

 

が!しかし!

ツイッターで記事がシェアされた時に、デフォルトでは画像が表示されないんですよ。

かなりつまづいたので、初心者の私が解決した方法を紹介します。

 

ツイッターに画像を表示させるには、「ツイッターカード」

 

まず、ツイッターで記事がシェアされた際に画像を表示させるには、ホームページやブログ側でそのように設定されている事が大事です。(わざわざ個人が設定しなくても、ブログサービスや使用しているテーマで設定されている場合もあるかと思います)

 

※シェアする人ではなく、元の記事側での設定が必要です。

 

ツイッターカードについては、こちらのサイトで分かりやすく説明されています

saruwakakun.com

 

 

「このサイト記事のアドレスがツイッターに張り付けられたら、画像と一緒に表示してね」という解釈で良いかと思います。

 

 

ワードプレス側→Twitter側の2段階で設定が必要

何やら設定しないと自動では画像は表示されない、という事を理解されたなら、いざ設定です。プロセスとしては、2段階になります。

 

1、ワードプレス側で設定する

 

2、ワードプレス側で設定が完了したら、ツイッターにそれを申請する

 

順番に説明していきますね。

 

 

1、ワードプレス側の設定方法

まず、大きく分けて2つの方法があります。

 

A、使用しているテーマ(例えばstork)のテーマ側を自分でいじる方法。

ワードプレスの、「ヘッダー」どと呼ばれる部分に新しい命令をかけることになります。

 

B、プラグインを使う

 

A、使用しているテーマ(例えばstork)のテーマ側を自分でいじる方法。

はじめに、ここまで読んで「ヘッダー?」となっている方には、この方法はオススメしません。

テーマを変更する際は子テーマを作ってから子テーマの方をを変更する、とか、そういうのが分からない人は、ヘッダーをいじると、変な事になってしまう恐れがあります。

私もそんな1人です。 そういう人は次に紹介するm「プラグインを使う」方法でやりましょう。

 

ヘッダーさわっても大丈夫!という方は、こちらの記事をどうぞ。

10分で終わるらしいので、分かる人には簡単なのかと。

webshufu.com

 

 

B、プラグインを使う

ヘッダーを触るのが怖い、もしくは、テーマを時々変更するような方はこちらが良いと思います。

使用するテーマに関係なく、ワードプレスプラグインを入れて命令をかける、という事です。

 

ツイッターカードの設定をできるプラグイン」にもいくつかあります。

今回は、多くの人に使われていて信頼できる、初心者である私でも設定できた、という事から、「All one SEO pack」というプラグインを紹介します。

 

「All one SEO pack」の設定の仕方は、こちらのサイトに分かりやすくまとめられています。

itbenricho.com

 

こちらも分かりやすかった

hashimon.wpblog.jp

 

 

 

2、ワードプレス側で設定ができたら、Twitterサイドで、Twitterカードの確認・申請

 

上記のどちらか方法でサイト側の設定が完了したら、今度はツイッターそれに申請します。

 

「うちのサイト、シェアされたら画像も表示されたいねん。 ツイッターさんもそこんとこよろしく」 ってことです。

 

これは、「Twitterカードの申請ページ(Card validator)」にアクセスして、そこで行います。

 

先程と重複になりますが、この方法もこちらの記事が分かりやすかったですね。

itbenricho.com

 

 

ほとんどの部分はこれで大丈夫なのですが、つまづきそうな箇所を補足しておきますね。

 

 

注意1:アイキャッチ画像は「Featured image」

 

All in One SEO>ソーシャルメディア>画像設定>OG:Image ソースを選択

の項目で「記事がシェアされた時にはどの画像を表示させるか」を選択するのですが、

だいたいの記事に「アイキャッチ画像がおすすめです」と書かれています。

 

で、私もアイキャッチ画像にしてるんですが、「アイキャッチ画像」って言葉はどこにも書いてなかったんですね。選択肢が英語だったんですよ。。。

 

他の方が記事を書かれた時点では日本語だったようですが。バージョンの違いかな。

 

アイキャッチ画像を選択したい人は、

All in One SEO>ソーシャルメディア>画像設定>OG:Image ソースを選択

のところで、「Featured image」を選んでください。

 

f:id:mendoko:20180415014420p:plain

 

 

注意2:「要約の大きい画像(Summary Large Image)」を試してほしい

 

問題なさそうなのに、いざやってみても画像が表示されない! という事があります。

 

まず、先程の「Twitterカードの申請ページ(Card validator)」 で、「ERROR: No card found (Card error)が表示される時は、ワードプレス側の設定がきちんとできてない時です。

 

*.あなたのサイトアドレス is whitelisted for summary card」が表示されていればツイッターカードの作成は成功したということになります。

 

が、それでも反映されない。

 

そんな時は、

All in One SEO>ソーシャルメディアTwitter設定>デフォルトTwitterカード

の項目を確認してください。

 

「要約」と「要約の大きい画像」を選ぶところで、「要約の大きい画像」を選択すると、解消されると思います。(英語だと、SummaryとSummary Large Image)

 

 

f:id:mendoko:20180415015904p:plain

 

 

※色んなサイトで、「基本はSummaryでOK」と書いてあったので、「要約」を選んでいたのですが、記事で使用した画像の大きさと関係しているのでしょうか?

自分は「要約の大きな画像」にした瞬間にきちんと表示されました。

 

 

以上です!!

Twitterでサイトに興味を持ってもらうには、画像は大事ですから、設定しておいて損はないでしょう!!

最後までお読み頂きありがとうございました!!