Simplicity2.3.9公開。width・heightの無いIMGでも自動取得してAMP化する処理追加

Simplicityを2.3.9にバージョンアップしました。

主な変更点は以下。

  1. [AMP]AMP画像で幅(width)と高さ(height)のないものを自動取得して属性に追加(サーバー内画像のみ)
  2. [AMP]iframe用のplaceholderタグ追加(amp-iframeの呼び出し位置エラー対策。要はamp-iframeの位置によるエラーが出なくなるようにした) [AMP]Googleマップを表示できるようにした(詳細
  3. [AMP]FacebookとTED動画埋め込み表示に対策(詳細
  4. [AMP]Jetpackにより直接Facebook動画が埋め込み表示される場合に対応(詳細
  5. [AMP]Spotifyのプレイリストに対応(詳細
  6. [モバイル]ごく限られた条件でアドセンス広告などが画面内に2つ出てしまう不具合修正
  7. テキストウィジェット内のリストスタイルタイプを表示するように修正(詳細
  8. テーマカスタマイザー機能の補足説明の誤字修正
スポンサーリンク

画像のwidthとheightの自動指定

今回、画像によるAMPエラーを出にくくしました。

これまでの仕様では、widthやheightが設定されていない画像では、AMP化した場合、以下のようなエラーが出ていました。

The implied layout ‘CONTAINER’ is not supported by tag ‘amp-img’.

けれど、今回のバージョンアップで、同じサーバー内の画像なら画像ファイルから幅と高さを自動取得してwidthとheightに割り当てるようにしました。

これで、画像のサイズ指定が原因によるAMPエラーは、自動で改善されると思います。

AMPエラーが減るイメージ

基本的に、このAMP画像サイズの指定漏れがAMPエラーの原因として最も多い(僕の環境ではそうでした)ので、これで結構エラーは減らせると思います(他にもエラーの原因は多々ありますが)。

ただ、外部サーバーの場合は、「処理に時間がかかる」「サーバーの設定によっては取得できない」「相手サーバーへの負荷」の観点から、サイズの自動取得はしていないので、これまで通り自前でwidthとheightを修正する必要があります。

iframeにプレースホルダーを指定

以前の仕様では、ページの上の方でamp-iframe呼び出すとAMPの仕様から以下のようなエラーが出ていました。

amp-iframeのエラー

amp-iframe may not appear close to the top of the document (except for iframes that use placeholder as described below). They must be either 600px away from the top or not within the first 75% of the viewport when scrolled to the top – whichever is smaller.

今回はこのエラーを、amp-iframeにプレースホルダーを指定することで回避しました。

各種サービスの埋め込みに対応

今回は、フォーラムなどにいろいろ報告いただいて、以下の埋め込みサービスに対応させました。

  • Googleマップ
  • Facebook動画
  • Facebook動画(JetpackによるURL埋め込み)
  • TED動画
  • Spotifyのプレイリスト

その他にも、大抵のiframe埋め込みなら、今回の修正で対応できたのではないかと思います。

あとがき

今回も、AMPエラーの原因を結構潰せたのではないかと思います。

AMPエラーは、PHPで吸収できるものならば、出来る限り潰そうと思っています。ですので、「自分のサイトのAMP状況をGoogle Search Consoleで見たら、AMPエラーが出ていた」なんて場合は、フォーラム該当ページのURLとともに報告いただければ、なるべくすぐに修正したいと思います。

とりあえず自分のサイトは、AMPエラーが出なくなってしまったので、いろいろなエラーサンプルをご連絡いただければ、出来る限り対応したいと思います。

amp-iframeでhttpが読み込まれているとかは無理だけど。
スポンサーリンク
アドセンス(大)
アドセンス(大)

スポンサーリンク
アドセンス(大)

コメント

  1. みき より:

    2.3.9のリリースお疲れ様です!!
    AMPについてフォーラムで書きました
    https://wp-simplicity.com/suport/topic/ampについて-2/

    • わいひら わいひら より:

      管理者向けに機能としてつけるのも良いかも。

      • みき より:

        そうですね
        管理者も閲覧者もどちらもそこそこだと思います
        (使うか使わないかはわからない)
        ただ、Googleから検索したときにAMPページに行けると思いますけど
        あっ!これも見たいってなったときに簡単にAMPページに行きたいので
        (寝ログで良くそうなります 笑)
        サンプルとしてフォーラムに書きました!!
        実際に速度が速く感じる?なる?らしいです
        (ローカルなのでわからない
        サイト作成中の間のサーバー代がもったいないのである程度作ってから本番環境に移動させます)
        カスタマイズ次第では邪魔にならないところに小さく置いておけますからね

  2. 5時 より:

    オチカレサマ
    誤字の報告です

    [AMP]AMP画像で幅(width)と高さ括弧がことheightじのないものを自動取得し・・

    いろいろなエラーサンプルおいっじゃなければ、出来る限り対応したいと思います。

    • わいひら わいひら より:

      ご報告ありがとうございます!
      これまた、わけのわからない文章になってしまいました。
      いやー、やっぱり公開前に一度読み返さないといけませんね^^;
      修正しておきます。

  3. simpfan より:

    こんばんは。

    誤字を見つけたので報告しておきます。

    カスタマイザー画面の

    「外部ブログカードキャシュ保存日数」

    には「ッ」が抜けています。

    よろしくお願いします。

    • わいひら わいひら より:

      ご報告ありがとうございます!
      テーマカスタマイザーの誤字を確認したので修正しておきました。
      次のバージョンで修正したものをアップしようと思います。