サイト全体に「COLORS(ブルー)」スキン適用中。
シンプルなWordPressテーマ

Cocoonは、SEO・高速化・モバイルフレンドリーに最適化した無料テーマです。
見た目はシンプルですが、初めての方でも感覚的に使えるように
便利な機能を織り込んで作りました。
100%GPLテーマなので自由にご利用いただけます。

ダウンロードページはこちら。

ダウンロード

Twitterのアイキャッチが表示されない状態について | ブログ相談 | Cocoon フォーラム

書き込みの前に以下の3点をご確認ください。

  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示してください
  3. 該当部分のキャプチャ環境情報とともに書き込んでいただけると助かります

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. サポート対象外のケース
  3. 原因がわからない不具合が出た場合のトラブルシューティング
  4. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  5. 画面が真っ白になった際のエラーメッセージの確認方法 

フォーラムの内容は、CCライセンス(CC BY-ND 2.1)に準じていれば転載も自由です。

フォーラムのTwitterアカウント(@CocoonForum)はこちら

スポンサーリンク

[解決済] Twitterのアイキャッチが表示されない状態について  


okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月24日 12:57  

お世話になっております。cocoon利用中の者です。

SNSシェア時のアイキャッチの表示について質問があるのですが、よろしいでしょうか?

お忙しいところ恐縮ですが、お返事いただけますと幸いに存じます。

【本題】

記事にアイキャッチを設定し、Twitterにて投稿を試みたところ、下記のような状態で表示され、アイキャッチが表示されませんでした。

https://twitter.com/Okurablogt/status/1077030216734715904

そこで検証を行ったのですが、原因の特定と解決には至りませんでした。

【検証内容】

cocoon設定の見直し……変化なし ※画像参照、「大きな画像サマリー」でも検証済み

時間を置いて再度確認……変化なし

記事を変更した場合……変化なし

画像サイズを変更した場合……変化なし 重さは基準を満たしている。サイズは100px〜1000px以上、正方形や長方形など様々

検証に使用したツール:Card Validator | Twitter Developers

※上記のツールのプレビューでもアイキャッチは表示されませんが、Logではエラーは発見されませんでした。

headタグ内の設定コード……「twitter:site」以外は確認

Twitter側の設定の見直し……変化なし

参考:【2018年版】Twitterカードとは?使い方と設定方法まとめ

テスト環境での検証……ローカル環境ではシェアできなかった為、断念

プラグインの無効化……変化なし

function.phpカスタマイズの削除……変化なし

【環境】

----------------------------------------------
サイト名:Hey,Siri!「ニート 生き方 どうすれば」を教えて!
サイトURL: https://neetneed.net
ホームURL: https://neetneed.net
コンテンツURL:/wp-content
インクルードURL:/wp-includes/
テンプレートURL:/wp-content/themes/cocoon-master
スタイルシートURL:/wp-content/themes/cocoon-child-master
使用スキンURL:/wp-content/themes/cocoon-master/skins/skin-mixblue/style.css
Wordpressバージョン:5.0.2
PHPバージョン:7.2.11
ブラウザ:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
サーバーソフト:LiteSpeed
サーバープロトコル:HTTP/1.1
エンコーディング:gzip, deflate, br
言語:ja,en-US;q=0.9,en;q=0.8
----------------------------------------------
テーマ名:Cocoon
バージョン:1.4.8
カテゴリ数:18
タグ数:15
ユーザー数:1
----------------------------------------------
子テーマ名:Cocoon Child
バージョン:0.0.5
----------------------------------------------
利用中のプラグイン:
Akismet Anti-Spam 4.1
BackWPup 3.6.6
Broken Link Checker 1.11.5
Classic Editor 1.3
Compress JPEG & PNG images 3.1.0
Contact Form 7 5.1.1
Edit Author Slug 1.6.0
Google XML Sitemaps 4.1.0
Limit Login Attempts Reloaded 2.7.1
LiteSpeed Cache 2.8.1
PS Auto Sitemap 1.1.9
WP Multibyte Patch 2.8.2
----------------------------------------------


haineons
(@haineons)
Eminent Memberサイト
参加: 9か月 前
投稿: 39
haineons - Twitter
2018年12月24日 13:24  

指定画像のURLが403エラーになってるのが原因じゃないでしょうか?


わいひら 件のいいね!
okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月24日 15:29  

ご意見ありがとうございます。

お伺いしたいのですが「画像のURLが403エラーになっている」とは、どうやって確認するのでしょうか?

アイキャッチに設定した画像のURLをブラウザで開いてみても、設定した画像が表示され、403エラーとは表示されませんでした。


haineons
(@haineons)
Eminent Memberサイト
参加: 9か月 前
投稿: 39
haineons - Twitter
2018年12月24日 16:55  

ソースにある指定画像URLを選択してそのURLへ移動とすると403がかえってきます

なので外部からアクセスできない状態となっていて画像の取得が出来ないんだと思います

URLをコピペして開くと見れるんですけどね…


わいひら 件のいいね!
okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月24日 18:47  

ご教示いただきありがとうございます。

教えていただいた内容を参考に、添付画像の手順にて確認を行ったのですが、自分の環境ではエラーを確認することができませんでした。

ですが、仮にエラーを確認できたものとして話をさせていただきたいのですが、原因や対処法について何か心当たりはございますでしょうか?

Twitterカードで画像が表示されない関連の不具合について調べているのですが、403エラーや類似の現象に関する情報が見つからず、途方に暮れております。

厚かましいようで心苦しいのですが、何かお気付きの点などがあれば、ご教示いただけないでしょうか?


わいひら
(@yhira)
メンバーサイト Admin
参加: 12か月 前
投稿: 3287
わいひら - Facebookわいひら - Twitterわいひら - Google+
2018年12月24日 22:52  

とりあえず、トップページの以下の画像は403になっているようですね。
ttps://neetneed.net/wp-content/uploads/2018/11/be99d671e0e69177e92ac3a34351ead5.jpg

上記画像に何か心当たりはありますか?

ない場合は、Cocoon設定の「OGP」タブにある「ホームイメージ」の画像を変更してみてください。


かうたっく
(@kautakku)
メンバーサイト Moderator
参加: 10か月 前
投稿: 1614
かうたっく - Facebookかうたっく - Twitterかうたっく - Google+
2018年12月24日 22:57  

haineonsさんの内容と画像を拝見した限りですが、サーバー側か.htaccessファイルで他ドメインで画像を表示させないように設定したなどありませんか?

画像の直リンクとかが嫌な人は他ドメインで403(閲覧禁止)に設定したり別途画像を準備して表示させるような事をやると思いますが。

その類ではないでしょうか?心当たりはないですか?

サーバー名 画像 403 とか直リンクとか閲覧拒否とかあたりで探せば情報はあるかと思います。おそらくですが。


わいひら 件のいいね!
okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月25日 13:40  

皆様、貴重なご意見をありがとうございます。

以下の方法を試してみましたが、変化はありませんでした。

また、画像の直リンク関連の設定についてですが、robots.txtや.htaccessファイルなどに関する情報が見つかりました。

これらの設定やファイルに関して、自分の方では心当たりが無いため、現在サーバー側での設定について問い合わせ中です。


okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月26日 13:43  

今回の問題に関して、いくつか試したので報告したいと思います。

試したこと

  • サーバー側への問い合わせ

「こちらでは問題を再現できません」とのこと。

  • テスト環境構築(新しいドメインでの再現)

新しく無料のドメインを登録して、そこにワードプレスをインストール、テスト環境を構築。
テスト環境ではアイキャッチが正常に表示された。
「コクーン設定」の「バックアップ」や、「ツール」「インポート」「ワードプレス」の「インポーターを実行」を行っても、エラーは再現されなかった。

  • htaccessファイルを編集

以下のサイトを参考に、htaccessを編集

Twitterカード用の設定は正しいのに画像が表示されない件が解決した │ 脳無しの呟き《土鍋と麦酒と炬燵猫》

手順:CPanelのファイルマネージャーから「public_html/.htaccess」に、以下の記述を追加

# Twitter のクローラを許可
SetEnvIf User-Agent "^Twitterbot.*$" tw_crawler
Allow from env=tw_crawler

結果:変化なし

  • サーチコンソールでrobots.txtを編集

上記のサイトを参考に、robots.txtを編集

しかし、サーチコンソール上で編集が反映されず、結果を確認することができない。

robots.txtの編集手順は、以下の通り

1,サーチコンソールの「robots.txt テスター」画面で、以下をコピペ

User-agent: *
Disallow: /wp-admin/
Disallow: /wp-content/
Disallow: /wp-includes/
Disallow: /*.php$

User-agent: Twitterbot
User-agent: Googlebot
Allow: /wp-content/

User-agent: Googlebot-Image
Disallow: /wp-content/

Sitemap: https://neetneed.net/sitemap.xml

2.「送信」から「ダウンロード」

3.ダウンロードしたrobots.txtをCPanelのファイルマネージャーからpublic_htmlにアップロード

4.サーチコンソールで「アップロードされたバージョンを確認」

↑ここで変更が反映されていない

5.「Googleに更新をリクエスト」で「送信」

結果:変化なし

【新しく浮上した問題】

何故robots.txtの変更が反映されないのか?

【補足】

当初のrobots.txtの内容は以下の通り

User-agent: *
Disallow: /wp-admin/
Allow: /wp-admin/admin-ajax.php

Sitemap: https://neetneed.net/sitemap.xml

当初のhtaccessファイルの内容は以下の通り

RewriteEngine on

# php -- BEGIN cPanel-generated handler, do not edit
# “ea-php56” パッケージを既定の “PHP” プログラミング言語として設定します。

# php -- END cPanel-generated handler, do not edit

RewriteCond %{HTTP_REFERER} !^ http://neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://neetneed.neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://neetneed.neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://neetneed.net/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://neetneed.net$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://www.neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://www.neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://www.neetneed.neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://www.neetneed.neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://www.neetneed.net/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ http://www.neetneed.net$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://neetneed.neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://neetneed.neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://neetneed.net/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://neetneed.net$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://www.neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://www.neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://www.neetneed.neetneed.cfbx.jp/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://www.neetneed.neetneed.cfbx.jp$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://www.neetneed.net/.*$       [NC]
RewriteCond %{HTTP_REFERER} !^ https://www.neetneed.net$       [NC]
RewriteRule .*\.(jpg|jpeg|gif|png|bmp)$ - [F,NC]

※添付画像でも確認できます。


okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月26日 15:03  

【追記】

.htaccessで直リン禁止でもFacebook,Twitter,feedlyは許可する場… - 人力検索はてな

上記のサイトを参考に、以下2つの記述を試してみましたが、駄目でした。

パス:/home/ユーザー名/public_html/neetneed.net/wp-content/uploads/.htaccess

<Files ~ "\.(gif|png|jpg|jpeg)$">
SetEnvIf Referer "^ https://neetneed.ne t" ref_ok
SetEnvIf Referer "^ https://twitter\.co m" ref_ok
SetEnvIf Referer "^ https://www\.facebook\.co m" ref_ok
SetEnvIf Referer "^ https://feedly\.com /" ref_ok
order deny,allow
deny from all
allow from env=ref_ok
</Files>

 

# URL 書き換え処理を ON にする
RewriteEngine on
# 画像へのリンクを許可するサイトを記載
# 複数ある場合は行を分けて書く
RewriteCond %{HTTP_REFERER} !^http(s)?://neetneed.net [NC]
RewriteCond %{HTTP_REFERER} !google\. [NC]
RewriteCond %{HTTP_REFERER} !yahoo\. [NC]
RewriteCond %{HTTP_REFERER} !bing\. [NC]
RewriteCond %{HTTP_REFERER} !search\?q=cache [NC]
# SNS からの画像参照を許可
RewriteCond %{HTTP_USER_AGENT} !(twitter|facebookexternalhit|google) [NC]
# bot のアクセスを許可
RewriteCond %{HTTP_USER_AGENT} !(|googlebot|yahoo|bingbot) [NC]
# 直リンク禁止ファイルアクセス時にエラーを返す
RewriteRule \.(jpg|png|gif)$ - [F]

 

また、テスト環境にて表示に成功した時のキャプチャを添付致します。


okura
(@okura)
Eminent Memberサイト
参加: 3か月 前
投稿: 34
okura - Twitter
2018年12月26日 15:43  

解決できました!

結局の原因や、何が功を奏したのかなど、自分でも分かっていない部分が多いのですが、一先ず報告させていただきます。

修正にあたり、こちらのページを参考にしました。

WordPress初心者に贈る!robots.txtの書き方と設定方法全手順

上の投稿で「robots.txtの変更がサーチコンソールに反映されない」との問題がありましたが、上記のリンクを確認して、アップロード先の階層を間違えていることに気づきました。

そこで、「~/public_html/robots.txt」から「~/public_html/ドメイン名/robots.txt」に移動したところ、サーチコンソールでrobots.txtの変更が反映されるようになりました。

その後、改めてCard Validator | Twitter Developersにて確認したところ、アイキャッチが表示されるようになりました。

今は自分でも整理できていないので、詳しい手順に関しては、後日こちらのページにてまとめようかと思います。

【WordPressトラブル】Twitterカードで画像が表示されない | ニート生き方どうすれば

ご意見やご指摘を下さった皆様、誠にありがとうございました。

また、お騒がせしてしまい、大変申し訳ありませんでした。(正直、パニック起こしてました……)


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
参加: 12か月 前
投稿: 3287
わいひら - Facebookわいひら - Twitterわいひら - Google+
2018年12月26日 20:29  

自己解決報告ありがとうございます!
書かれたレポートは、同様の問題が起きた方の助けになると思います。


okura 件のいいね!
Share:
この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
スポンサーリンク
わいひらをフォローする
おすすめサーバ
mixhost

プラン変更で負荷対策が行えるので、ブログ向きのレンタルサーバーです。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
〇アダルト・出会い系サイト可
△安定性にやや欠ける

安定感抜群のサーバーです。あまり急激なアクセス変動がないアフィリエイトサイトに向いています。

◎nginxを用いた高速サーバー(完全SSD)
◎老舗サーバーなので安定感抜群
◎ディスク容量が多い
◎転送量が多い
◎同サービス内でドメイン管理が可能
○http/2(高速化プロトコル)に対応
○毎日無料バックアップ(14日分)
△DBは7日分だけ無料復旧可能(ファイルは有料)
×プラン変更でCPUのスペックアップができない
×プラン変更しても即時反映されない
×アダルト・出会い系サイト不可

性能も兼ね備えながら安くブログ運営を開始したいのであればここ1択。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/2・QUIC(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎復元ポイントを指定して復旧可能(無料)
○サーバ引っ越しオプションあり(有料)
△アダルト・出会い系サイト可(条件あり)
△開始したてなので運営能力は未知数(対応良)

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
サイトを続けるうちにアクセスが増えれば、プランのアップグレートで対応可能です。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎激安プランが用意してある
◎値段あたりのスペックが高い(コスパ良し)
◎サーバ引っ越しオプションあり(無料)
○http/2(高速化プロトコル)に対応
〇アダルト・出会い系サイト可
△プランのアップは可能だがダウンは不可
△毎日自動バックアップ(1日分)
△前日のバックアップからのみ復元できる(無料)

Cocoon
  
動作中

ログイン または 登録 してください

タイトルとURLをコピーしました