サイト内検索
Cocoonフォーラム
書き込みの前に以下の3点をご確認ください。
何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。
不具合・カスタマイズ対象ページのURL:
相談内容:
不具合の発生手順:
解決のために試したこと:
※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。
環境情報の取得方法はこちら。
→ https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
→ https://wp-cocoon.com/theme-trouble/
フォーラム利用ガイドリンク
- フォーラムガイドライン
- よくある質問と答え(FAQ)
- サポート対象外のケース
- 原因不明の不具合用トラブルシューティング
- トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw)
- 真っ白画面でのエラーメッセージの確認方法
- ブラウザ環境チェックツール
- Cocoonカスタマイズ依頼
フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。
トピックスターター 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
----------------------------------------------
トピックスターター 2018年12月24日 15:29
ご意見ありがとうございます。
お伺いしたいのですが「画像のURLが403エラーになっている」とは、どうやって確認するのでしょうか?
アイキャッチに設定した画像のURLをブラウザで開いてみても、設定した画像が表示され、403エラーとは表示されませんでした。
2018年12月24日 22:57
haineonsさんの内容と画像を拝見した限りですが、サーバー側か.htaccessファイルで他ドメインで画像を表示させないように設定したなどありませんか?
画像の直リンクとかが嫌な人は他ドメインで403(閲覧禁止)に設定したり別途画像を準備して表示させるような事をやると思いますが。
その類ではないでしょうか?心当たりはないですか?
サーバー名 画像 403 とか直リンクとか閲覧拒否とかあたりで探せば情報はあるかと思います。おそらくですが。
わいひら reacted
トピックスターター 2018年12月25日 13:40
皆様、貴重なご意見をありがとうございます。
以下の方法を試してみましたが、変化はありませんでした。
- Cocoon設定の「OGP」タブにある「ホームイメージ」の画像変更
- 403エラーが発生する場合 – ColorfulBox(カラフルボックス) サポートサイト
また、画像の直リンク関連の設定についてですが、robots.txtや.htaccessファイルなどに関する情報が見つかりました。
これらの設定やファイルに関して、自分の方では心当たりが無いため、現在サーバー側での設定について問い合わせ中です。
トピックスターター 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]
※添付画像でも確認できます。
トピックスターター 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]
また、テスト環境にて表示に成功した時のキャプチャを添付致します。
トピックスターター 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カードで画像が表示されない | ニート生き方どうすれば
ご意見やご指摘を下さった皆様、誠にありがとうございました。
また、お騒がせしてしまい、大変申し訳ありませんでした。(正直、パニック起こしてました……)
わいひら reacted
問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。
また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。
(CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。
フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。
最近の書き込みはこちら。
詳細なカスタマイズ依頼をするならこちら。