HOME → 3 WordPress → 04 運用とトラブル → 

【アイキャッチ画像 差替えで解決】AMP > 推奨サイズより大きい画像を指定してください

WordPress Twenty Seventeen
AMPに関する警告
「推奨サイズより大きい画像を指定してください」
解決方法
 
結論。
アイキャッチ画像を 差替えれば解消する
画像サイズの幅は【 1200 ピクセル 】以下でもOK
 
警告の出た 7件の内、テストの意味を含め 4件 だけを次の様な画像サイズに差し替えた
 
以下、この警告への対処結果を記録。
 

 

スポンサー リンク

 

 
 
1. Google Search Console より「新たな問題」メールが届く
 
「新たな問題」メール。
「新たな問題」メール
 
「新たな問題」の内容。
・推奨サイズより大きい画像を指定してください 
 
 
2. Google Search Console での調査
 
AMPメニューでの警告表示。警告あり 9件。
AMPメニューでの警告表示
 
従来から 2件の警告が残っていたが、突然 9件に増えた。
突然 9件に増えた
 
増えた 7件は、「推奨サイズより大きい画像を指定してください」という警告。
「推奨サイズより大きい画像を指定してください」という警告
 
警告の 7件をクリック。
警告の 7件をクリック
 
7件の、AMPバージョンのURL。
7件の、AMPバージョンのURL
 
先頭のURLをクリックしてみる。インスタンス にハイライトされている箇所はない。
ンスタンス にハイライトされている箇所はない
 
 
3. Google の Developer サイトを見てみる
 
「リファレンス」→「構造化データ」→「記事」とたどって、【Article オブジェクト】の項を見る。
【Article オブジェクト】の項を見る
 
【image】の欄に、「画像の幅は 1200 ピクセル以上にする必要があります。」という記述がある。
画像の幅は 1200 ピクセル以上にする必要があります
 
 
4. 警告が出ている記事ページの調査
 
警告が出ている記事ページの「AMP」画面を開いてみる。アイキャッチ画像は表示されていない。(?p=10939&amp)
警告が出ている記事ページの「AMP」画面
 
同じページの通常画面=「非AMP」画面を開いてみる。アイキャッチ画像が表示される。画像サイズは、「 600 x 321 」で 30KB。
「非AMP」画面
 
同じ様に警告が出ている記事ページの、他の「AMP」画面を開いてみる。この画面には、アイキャッチ画像が表示される。画像サイズは、「 450 x 337 」で 72KB。(?p=7559&amp)
アイキャッチ画像が表示される画面
 
同じページの通常画面=「非AMP」画面。
同じページの通常画面=「非AMP」画面
 
 
5. アイキャッチ画像を差替えてみる
 
(?p=10939&amp)のアイキャッチ画像を、「600 × 321」から「1116 × 646」に差替え、Search Console の【修正を検証】ボタンを押してみる。
Search Console の【修正を検証】ボタンを押してみる
 
「検証プロセスを続行できません」と表示されるも、アイキャッチ画像を差替えた記事ページ(?p=10939&amp)は、表示されなくなった。
アイキャッチ画像を差替えた記事ページ(?p=10939&amp)は、表示されなくなった
 
気付いたこと。
アイキャッチ画像を差替えれば、解決する。
画像サイズの幅は、【 1200 ピクセル 】以下でも問題ない。
 
警告の出た 7件の内、テストの意味を含め 4件 だけを次の様な画像サイズに差し替えた。
警告の出た 7件の内、テストの意味を含め 4件 だけを次の様な画像サイズに差し替えた
 
2件目の(?p=11357&amp)は、アイキャッチ画像を
元のサイズより小さいものに差し替えてみた。
 
また、4件目の(?p=7559&amp)は、アイキャッチ画像を大きくしたためか、表示されなくなった。
(?p=7559&amp)は、アイキャッチ画像が表示されなくなった
 
再度、Search Console の【修正を検証】ボタンを押すと、「検証:開始」となる。
Search Console の【修正を検証】ボタンを押すと、「検証:開始」となる
 
「AMP」の問題を検証しています・・・というメールも届く。
「AMP」の問題を検証しています・・・というメールも届く
 
 
6. 検証結果
 
3件 だけを修正せず残したので、「未修正がある」と言うメールが届く。
「未修正がある」と言うメールが届く
 
「問題の詳細を確認する」をクリックすると、「検証:失敗しました」で 3件 が表示される。
「検証:失敗しました」で 3件 が表示される
 
「未修正」の 3件 に一致。
「未修正」の 3件 に一致
 
 
結論:
アイキャッチ画像を差替えれば、解決する。
画像サイズの幅は【 ???ピクセル 】以上必要なのか分らない。
アイキャッチ画像を、元のサイズより小さい
 「600 × 525」に差し替えてもOKになった。
 
 
ーーー 2019.01.21 追記。ーーー
 
残りの 3件 を修正後、「サイト(https://arakan60.com/)に関する「AMP」の問題が修正されました」メールが届く。
「サイト(https://arakan60.com/)に関する「AMP」の問題が修正されました」メールが届く
 
詳細を確認すると、「検証:合格」になる。
詳細を確認すると、「検証:合格」になる
 
全てのページが合格になり、『保留』が【 0 】となる。
全てのページが合格になり、『保留』が【 0 】となる
 
「611 × 333」に差し替えてもOKになった。
・高さは「300」以上必要。
・幅は「600」以上必要。
で解決しているが、これで良いのか・・・?
 
 
7. AMP画面での アイキャッチ画像の表示 有無
 
AMP画面で、 アイキャッチ画像が表示されるかどうかは、下記のようになった。
AMP画面での アイキャッチ画像の表示 有無
 
アイキャッチ画像の幅が【 1000 ピクセル 】以上なら表示され、それ以下なら表示されないような結果になった。
しかし、表示されている「1116 × 646」を「900 × 512」にしても「800 × 463」と小さくしても、表示される。???
 
いずれにせよ邪魔なので、非表示にする。
amp/templates/single.phpを、子テーマにコピーして編集。
次の1行をコメントアウト。
<?php $this->load_parts( array( 'featured-image' ) ); ?>
 
 
以上。
(2019.01.18)
 

 

スポンサー リンク

 

             

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください