そらより

おもしろいと、かわいいと、おいしいと、うれしい。

WordPressでTwitterのシェアボタンを押しても画像が表示されない原因はまさかのアレだった

      2016/05/28

 

じつはここのところ困っていました。Twitterのシェアボタンを押すとタイトルやディスクリプション(説明)は共有できるのですが、画像だけ表示されないのです。たとえばこんな感じ。

Twitterシェア画像05

 

たしかアイキャッチ画像が表示されるように設定したはずです。本来ならば、こうなるはず。

Twitterシェア画像04

 

どうにも手掛かりがつかめずいろいろ探って約1週間。ようやく原因が特定できたので、ご報告します。それはrobots.txtの誤った記述でした。

お忙しい方のために解決方法を先に説明します。ここに至った詳しい経緯はその後で。

 

スポンサーリンク

 

原因:robots.txtでwp-contentすべてをブロックしていた

詳しい方ならまったく信じられないど素人の失策と笑ってしまうことでしょう。そらよりもWordPressを本格的に使い出しほぼ1年経った今、ようやくこのおマヌケぶりに気付きました。いや、まったくどうかしている。

見直してみたら、こんな設定でした。

Twitterシェア画像01

いったいどういうわけでwp-contentフォルダを丸ごとdisallow(不許可)にしていたのでしょうか。クロールのスピードアップを気にするあまり、先輩サイトのどこかの記述を早合点してしまったに違いありません。

画像をWordPressの管理画面からアップロードしている場合、/wp-content/内にイメージファイルが

出典:WP SEOブログ

 

アップロードしたアイキャッチ画像はwp-contentフォルダにあるのだそうです。それをブロックしていたのですから、Twitterがクロールし、画像を参照しようにもできるわけがありません。

正しくは、こうするべきなのだそうです。

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-includes/
Disallow: /wp-content/plugins
Disallow: /wp-content/cache
Disallow: /wp-content/themes
Allow: /wp-content/uploads

出典:WP SEOブログ

 

ちなみにwp-adminは管理画面のこと。robots.txtは比較的簡単に他者でも閲覧できるらしいので、管理画面の場所をほぼ公開状態にするのは好ましくないらしいです。対策はいろいろあるようですが、ここでは割愛します。

なおTwitterにより確実にクロールしてもらえるよう、上記に次の記述を加えました。

Twitterシェア画像02

「Twitterbotにimagesフォルダのクロールを許可する」という内容です。

「Twitterトラブルシューティングガイド」には次のような解説がありました。

robots.txtファイルを使用して、Twitterのアクセスを許可するようにウェブサーバーを構成。

User-agent: Twitterbot
Disallow:

出典:Twitterトラブルシューティングガイド

 

これを一歩進めて積極的に読み込ませようというわけです。この設定に変えてみたら早いものはrobots.txtファイルをアップロード直後に、遅いものでも翌日には、Twitter上での参照画像が過去に遡って表示されるようになりました。

Twitterを眺めると、同様に画像だけ抜けているシェア表示が散見されます。こんなミスは少ないとは思いますが、お困りの方は念のためぜひチェックしてみてください。

 

スポンサーリンク

 

Twitterでシェアするための三つの基本設定

Twitterのシェアボタンを押しても画像だけシェアできないという現象は、ほかにも原因があります。ネット上で広く共有されているのでご存じの方も多いでしょうが、WordPressを始めてまだ間もないという方のために、簡単に触れておきます。

Twitter Cardが正しく登録されていない

Twitterでシェアの結果を正しく表示してもらうためにはTwitter Cardの登録が必要です。こちらのオフィシャルサイトでできます。最下段に手順とリンクが表示されているのでとても簡単です。

そらよりはこれが正しく登録されているか、こちらのCard validatorのページでチェックしてみました。

Twitterシェア画像08

出典:Twitterカード

 

Card URLの下のボックスにブログのURLを打ち込みます。そらよりならhttp://sorayori.com。正しく登録されていれば左の赤枠で示したように緑の文字で「whitelisted」と表示されるはずです。ホワイトリスト、つまりTwitter Cardには正しく登録されているということです。

しかし左の赤枠をご覧ください。画像の部分だけ抜けています。Twitter Cardを初めて登録する場合ならこれでかまいません。しかし次の項で説明する設定が済んでいるそらよりは本来ならば、こうなっていなくてはなりません。

 

Twitterシェア画像09

 

ということはTwitter Cardの登録以外で何か不備があるということです。

 

メタタグが正しく記入されていない

Twitter Cardを登録したら、WordPressのテーマにメタタグを記入しなくてはなりません。phpファイルに変更を加えるのですが、そらよりはその作業を代行してくれるAll in One SEO Packプラグインを使用しています。

じつは今回の不具合が引き起こったのはこのプラグインを更新してからでした。最初は大いに疑ったのですが、何度見直しても設定に間違いはありませんでした。今から思えば更新したことでより厳密に機能することになり、robots.txtの不具合に敏感に反応するようになったということらしいです。自己判断ですが、たぶんきっとそうでしょう。

All in One SEO Packの設定1

ダッシュボードからAll in One SEO Pack>「ソーシャルメディア」を開きます。最下段に「Twitter設定」の項目があります。ここでTwitterのアカウントを登録しておきます。注意したいのは赤い枠で囲んだ「デフォルトTwitterカード」の部分です。ここはTwitter Cardで選択したものと同じでなければなりません。そらよりは文字の左側に小さな画像が表示される「要約」タイプを設定しているので、こちらのAll in One SEO Packも同じく「要約」を選んでいます。

Twitterシェア画像06

 

All in One SEO Packの設定2

上記と同じページに「画像設定」の項目があります。ここでは表示させる基本画像を設定します。そらよりは基本的にはアイキャッチ画像を表示させ、もしもそのアイキャッチ「画像が見つからない場合はデフォルトを使用」することにしています。デフォルトの画像はトップページをシェアしたときと同じものをアップロードしています。

Twitterシェア画像07

 

投稿の編集画面「ソーシャル設定」が正しくない

Twitterのシェアで画像が正しく表示されるためには各投稿記事の「ソーシャル設定」も正しく行われていなくてはなりません。編集画面を下の方にスクロールしていくとAll in One SEO Packの項目があります。通常は「メイン設定」タブの画面ですが、これを①の「ソーシャル設定」タブに変え、次の画面を表示させます。

ここで表示させる画像が選べます。上記の画像設定で「アイキャッチ画像」を設定していますが、ページごとに選択することができます。ここでの設定がどれだけ影響するのか未確認ですが、念のため②のように使いたい画像のラジオボタンにチェックを入れておきます。

また③のタイトルやディスクリプションも入力しておくとよいかもしれません。赤枠で示した部分は当初「0」になっています。「メイン設定」で入力しておけば、時間の経過によって反映されると思われますが、万全でもないようです。Twitter側で不備と認識されないように、そらよりは入力しています。

 

Twitterシェア画像03

 

以上、Twitterのシェアボタンを押しても画像が表示されない場合の意外な解決方法と基本的なチェックポイントでした。

 

 

スポンサーリンク

 

 

クリックしていただけると幸いです
にほんブログ村 ライフスタイルブログ 暮らしを楽しむへ

おススメ記事

歳の差婚250 1
「年の差婚(交際)」の最適年齢を割り出す法則が海外にあった!

数年前から「年の差婚」がブームです。人気キャスターや人気女優、人気歌手が、歳の離 ...

補色01 2
赤い点を30秒間じっと見つめてください。天井を見上げると不思議なことが!

  夏休みの想い出に友達と撮った記念写真。でも、後ろをふと眺めると壁や ...

パーティ開け11 3
「パーティ開け」不要!スナック菓子はもっとスマートにシェアできる!!

ポテチの袋、いつもどうやって開けてますか? 友達やパートナーとシェアして食べると ...

 - WordPress, デジタル

Copy Protected by Chetan's WP-Copyprotect.