[AMP]LION MEDIAにて「amp-iframe」のエラー原因と対処法

[AMP]LION MEDIAにて「amp-iframe」のエラー原因と対処法

amp_iframe_error_top

AMP対応を行ったが「amp-iframe」エラー発生

3週間ほど前に当サイトにてAMP対応を行いました。いくつかのページの動作確認を行い「問題ない」と考えていましたが、最近になって「amp-iframe」に関するエラーが発生。問題の改善に思いの外手間取ったので、エラー原因の調査方法と対処法を手順をご紹介します。

Advertisement

エラー原因の調査

まずは Google Search Console の AMP 項目のエラー内容を確認してみます。エラーと警告の内容は全て「amp-iframe」に関するエラーですね。
amp_iframe_error1

エラー種別 概要
エラー 許可されていない属性が HTML タグ「amp-iframe」にあります
エラー タグ「amp-iframe」には拡張機能 JavaScript の「amp-iframe」が含まれている必要があります。
警告 タグ「amp-iframe」に属性「sandbox」が複数含まれています。

 

次にエラーと判定されているページにて、amp-iframe を使用している箇所を確認してみました。Wordpress の記事埋め込み機能「Embed」の表示部分が怪しいそうです。
amp_iframe_error2

 

該当箇所のHTMLを確認したところ、やはり amp-iframe が見つかったので原因は、Wordpress の記事埋め込み機能「Embed」で合っていそうです。
amp_iframe_error3

 

エラーの対処法

LION MEDIA のサイトにて AMP 対応を行うときの注意点を確認してみたところ、
AMP 対応を行うページ内で記事を埋め込むときは、編集画面の下[AMP用Script設定]内にある

  • Twitter
  • Instagram
  • YouTube
  • iframe

にて対応する項目のチェックが必要との記載を確認。自分のサイト内の記事を埋め込んでいるページなので「iframe」にチェックを行いました。
amp_iframe_error4

 

エラーの数は減ったものの無くならない。
Googleにて検索してみましたが、結果は見当たらず。八方ふさがりになったため、自力でプログラム自体を回収してみることにしました。
現時点で出ているエラーは、amp-iframe 内では、

  • marginwidth
  • marginheight
  • security

のパラメータは使用できないとのエラー。力技で該当パラメータの削除する処理を追記しました。
プログラムの改修に慣れていない方は、必ずバックアップを取っておくことをおすすめします。

修正するファイル

wp-content\themes\lionmedia\functions.php

追記するプログラム

追記する行数
amp_iframe_error5

 

「functions.php」の6730行目にプログラムを追記して、サイトが正常に見えることを確認。サイトに問題がないかを確認してみたところ、エラーが消えました。
amp_iframe_error6

 

さいごに

スマートフォンやタブレットのアクセス数を増やしたい!とAMP対応を行いましたが、想像以上に細やかな対応が必要となるため大変ですね。まだまだエラーが全ページで無くなったかが不安なため注視していきます。

他のAMPエラーが確認されたときは記事を追記していきます。

Advertisement

SEO対策カテゴリの最新記事