2019/4/8 4.4を追記しました。
2019/1/27 解決方法を追記しました。詳細は記事の通りですが、はてなフォトライフで1200pxに指定してからアップロードした画像を使えば回避できます。
先週、Search Consoleでこのような警告が表示されました。
どうやらGoogleによるAMPアルゴリズムの変更が原因のようです。すでに多数の記事で話題になっていますが、はてなブログで解決するかを調べてみることにしました。
なお、この記事の初版作成時点(1/21)ではまだ解決していません。新しいことがわかり次第追記予定です。
- 1. AMPの新しいアルゴリズムでは1200px以上の画像が必要
- 2. はてなブログでの画像サイズ調整方法
- 2.1 cssでmax-widthを1200pxにする
- 2.2 はてなフォトライフから1200pxに指定してアップロードする
- 3. 検証したこと
- 4. 検証結果 （2019/1/27追記）
- 5. (補足)WordPressの解決策
- 6. おわりに
1. AMPの新しいアルゴリズムでは1200px以上の画像が必要
GoogleのAMPに関するページでは、このような記述があります。
画像の幅は 1200 ピクセル以上にする必要があります。
すべてのページに画像を少なくとも 1 つ含める必要があります（マークアップを含めるかどうかは問わない）。Google は、アスペクト比と解像度に基づいて、検索結果に表示する最適な画像を選択します。
適切な画像が選択されるようにするために、アスペクト比が 16x9、4x3、1x1 の高解像度画像（800,000 ピクセル以上の画像）を複数指定してください。
引用元：Article | Search | Google Developers
2. はてなブログでの画像サイズ調整方法
2.1 cssでmax-widthを1200pxにする
(2019/1/26 この方法は不要とわかりましたが、参考のため残しておきます) はてなブログに限らず、サイトレイアウトによって発生する可能性がありますが、少なくとも私の環境では1200pxの画像を入れてもレイアウトに沿ったサイズに調整されました。
比率を保ったまま1200pxにするには、デザインCSSで以下を追加します。
|css| element.style { } .entry-content img { max-width: 1200px; } ||<
この表記により、1200px以上の画像があれば1200pxで表示します。また、それ以下の画像はそのままになります。
2.2 はてなフォトライフから1200pxに指定してアップロードする
はてなブログの記事を書く中にある「写真を投稿」からアップロードすると、オリジナルサイズにならないようです。
たとえば、先ほど使った画像のサイズは1241×1141です。
しかし、これを「写真を投稿」と「はてなフォトライフ」からアップロードすると、サイズが変わります。
「写真を投稿」からアップロードした場合
はてなフォトライフからアップロードした場合
ここでのintrinsicとは「潜在的な」という意味です。AMP対応方法がわかっていないので、この方法が有効かはまだわかりませんが、少なくとも画像のアップロードははてなフォトライフからとした方がよさそうです。
幅を1200に指定するには、はてなフォトライフのアップロード画面で下記を1200にします。
ちなみに、私の環境ではデフォルト値が800になっていました。
3. 検証したこと
3.1 記事の中にある画像を全て削除する
AMP対応している記事の中に画像が１つだけ、という記事があったので、その画像を消してみました。すると、しばらくしたら警告件数が5から4件に減りました。
しかし、数時間後にまた5件に戻ってしまいました。 （冒頭の画像で棒グラフの一部が少ないのはそのためです）
そのため、画像を消すことが有効なのか無効なのか、現時点ではわかりません。
3.2 アイキャッチ画像を非表示にする
今回の警告がアイキャッチ画像にある可能性を考慮して、はてなブログのデザイン設定でアイキャッチ画像を非表示にしてみました。しかし、今のところ警告が解消されていないので、関係あるかが不明です。
3.3 検証を妨げる記事を下書きに戻す
今回の警告を解消するには、Search Consoleの画面にある「検証」ボタンをクリックして、Search Consoleが再検証して合格する必要があります。しかし、私の場合、5件のAMP対応記事のうち、先頭３つが常にエラーを表示して検証が開始されませんでした。
１つめの記事は手付かず、２つめの記事はCSSで無理やり幅1200pxの画像に変更済み(見づらいので今は戻してます)、3つめの記事は画像を削除していました。
なんとなく、1つめの記事が未対応なことで、その時点でエラーが出ているように見えます。１つめの記事の画像修正はかなり時間がかかるので、いったん前２つの記事を下書きに戻したところ、検証が開始しました。
３つめの記事だけでも警告解消されるかを調べたかったのですが、３日経っても解消されないので、現時点では下書きに戻した記事を再度公開しています。
4. 検証結果 （2019/1/27追記）
4.1 Search Consoleによる「検証」で１件だけ合格した
この記事だけ合格で、あとは不合格という結果になりました。
グアムでの親族結婚式に備えて子どものパスポートを申請したときの手順、注意事項まとめ - CrossLife
4.2 合格した記事では、はてなフォトライフで幅1200pxに指定した画像を使っていた
2.2の方法で1200pxでアップロードした画像を使いました。上記の記事では１つだけ画像を使っていますが、Chrome Developer Toolsで見てわかるとおり、本文中での画像サイズは1200ではありません。
4.3 他に幅1200pxにした記事は不合格のまま（画像が多いと合格難しい？）
たとえば、下記の記事もはてなフォトライフで幅1200pxにした画像を使っていますが、今回は不合格になりました。
北海道森町のふるさと納税返礼品を使って、海鮮焼きそばを作りました - CrossLife
何か別の要因があるのか、再検証すれば合格になるかはまだわかっていません。
4.4 はてなフォトライフで1200px指定でアップロードした画像を使って書いた記事は、エラーなくAMP登録される
(2019/4/8追記) 下記の通りです。ここ最近書いた記事は、はてなフォトライフで1200px指定してアップロードした画像しか使っていませんが、それ以外何もしなくてもAMPとして登録されています。
5. (補足)WordPressの解決策
こちらで詳しく解説されています。
Google AMPの「推奨サイズより大きい画像を指定してください」というエラーを解決出来るアイキャッチ画像設定方法を解説 | ネトゲ依存体験記
英語ですが、こちらの記事でも方法が書いてあります。
6. おわりに
1/27の更新により、はてなフォトライフで幅1200pxにした画像を使えば回避できる場合があることがわかりました。しかし、それでも回避できない記事もあるので、また何かわかったら追記します。
