特典機能について

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

サイト内検索
運営者(わいひら)は、骨の手術明けのためしばらく体調を優先して運営させていただきます。ですので、フォーラム負担軽減のため登録者のみ書き込めるようを制限をさせていただきます。フォーラム未登録の方はこちらの手順で登録を行ってください。予定としては12月前半まで実施させていただきます。
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

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

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法 
  7. ブラウザ環境チェックツール

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

また、問題の解決に至った場合には、トピック冒頭の「解決済み」リンクをクリックしていただけますと幸いです。

wpForoの解決済みリンク

また、有用な返信があった場合は「いいね!」リンクもご活用ください。返信者の励みになります。

wpForoのいいねリンク

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

スポンサーリンク
Twitterのアイキャッチが表示され...
 
共有:
通知
すべてクリア

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


okura
(@okura)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

お世話になっております。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)
Trusted Memberサイト
結合: 4年前
投稿: 73
haineons - Twitter
 

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


わいひら 件のいいね!
okura
(@okura)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

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

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

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


haineons
(@haineons)
Trusted Memberサイト
結合: 4年前
投稿: 73
haineons - Twitter
 

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

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

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


わいひら 件のいいね!
okura
(@okura)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

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

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

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

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

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


わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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

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

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


かうたっく
(@kautakku)
メンバーサイト Moderator
結合: 4年前
投稿: 4764
かうたっく - Facebook
 

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

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

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

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


わいひら 件のいいね!
okura
(@okura)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

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

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

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

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


okura
(@okura)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

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

試したこと

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

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

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

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

  • 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)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

【追記】

.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)
Trusted Memberサイト
結合: 3年前
投稿: 53
okura - Twitter
Topic starter  

解決できました!

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

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

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

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

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

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

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

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

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

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


わいひら 件のいいね!
わいひら
(@yhira)
メンバーサイト Admin
結合: 4年前
投稿: 12918
わいひら - Facebookわいひら - Twitter
 

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


okura 件のいいね!
共有:
スポンサーリンク
SWELLと業務提携しています
WordPressテーマSWELL
わいひらをフォローする
おすすめサーバー(コスパ・バックアップ重視型)

性能も兼ね備えながら安くブログ運営を開始できる点においてのNo.1。
それでいてブログ成長後は、十分すぎるほどのスペックアップ余力も担保されている。

◎安く始められる
◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎東京・大阪でリージョン選択が可能
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:3年

1年以上の契約をする場合は、クーポンコード入力でさらに50%割引キャンペーン中!
※BOX2 ~ BOX8プラン契約の場合

クーポンコード:PK4JK4RJ

クーポンの使用方法はこちら

とにかく速い。サイトに表示スピードを求めるならココ。
管理画面がシンプルで使いやすい。

◎nginxを用いた高速サーバー(完全SSD)
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎ディスク容量が多い
◎転送量が多い
○http/2(高速化プロトコル)に対応
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
◎ファイルも14日以内なら無料自動復旧可能
◎サーバ引っ越しツールあり(無料)
○サーバ引っ越し依頼が可能(有料)
◎ドメインとサーバー代のチャージ払いが可能

サービス運営期間:3年

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

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

サービス運営期間:18年

常に新しいことに挑戦しているフロンティア精神あふるるレンタルサーバーです。
LiteSpeedやHTTP/2を日本で初めて導入したサーバー。

◎LiteSpeedを用いた高速サーバー(完全SSD)
◎http/3(高速化プロトコル)に対応
◎プランのアップ・ダウングレードが自由自在
◎同サービス内でドメイン管理が可能
◎転送量が多い
◎ディスク容量が多い
◎毎日無料バックアップ(14日分)
◎DBは14日以内なら無料自動復旧可能
○ファイルは14日以内なら無料復旧可能(※手動)
◎アダルト・出会い系サイト可
◎ドメインとサーバー代のチャージ払いが可能
○サーバ引っ越し依頼が可能(有料)

サービス運営期間:5年

格安な値段で始められる高機能サーバーです。
性能も備えつつ最安ならここ。
ただし少し機能は弱い。

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

サービス運営期間:5年

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