[WordPress]AMP (Accelerated Mobile Pages)プラグインによる不具合
SEOに効果的とされるAMP。AMPの用語解説は wikipedia を見て頂くとして、ここでは管理人が見つけた、ワードプレスで使用した場合の不具合事例を書きます。
なお、AMPにはメリット・デメリットの両方があり、すでにネットの諸先輩方が書かれているので、検索してみて下さい。内容を参考にされるのは幸いですが、何かしらのトラブルが発生した場合の責任について管理人は負いかねます。
■発生現象、症状
記事に画像を挿入していた場合、Google Map(グーグルマップ)やyoutube(ユーチューブ)を挿入（埋め込みタイプ）した場合、ブラウザによってはまともに表示されない
■発生条件
WordPressを使用し、Googleが推奨するAMPプラグインを有効化した場合
■発生したブラウザ
Internet Explorer 11（IE11）※Windows10およびWindows7で確認
*IE自体は「2022/6/16」でサポートが終了しています。
■発生しないブラウザ
Google Chrome、FireFox、Safari(iPhone)、MS-Edgeなど
■発生個所
「<img src=”https://byte.sakura.ne.jp/…」といった<IMG>タグ、また「<iframe width=”320″ height=”180″…」や「<iframe style=”border: 0;” src=”https://www.google.com…」といった、<iframe>タグ（インラインフレームタグ）で発生。
■考えられる原因
AMPプラグインによって<img>タグ→<amp-img>タグへ、<iframe>タグ→<amp-iframe>タグへと自動で変更されます。Internet Explorer 11ではそのタグや変更処理に対応していないのではないかと推測されます。
■対処法、解決方法、回避方法
・その１：AMPプラグインを有効化しない（オフにする）、最初からインストールしない
※AMPプラグインの削除でも解決できますが、AMPの設定によってはプラグインの削除によって記事のURLが変更される可能性があるのでご注意下さい。詳しくはネットで「AMPプラグインの削除」で検索して下さい。
・その２：iframeタグを使わない直接リンクのURLに変更することで回避する。
■懸念事項
Internet Explorer 11以前の古いブラウザだと同じ不具合になる可能性があります。
■備考
「画像、記事にyoutubeやGoogle Mapを使用していない」「古いブラウザではまともに表示されなくても良い」という場合は全く気にする必要はありません。
■実際の症状
・画像が縮小される事例
例
★AMPプラグインを使っていない（オフ）
ソースの一部
<p>■よろしければお気に入り(ブックマーク)に追加して下さい。</p>
<figure class=”wp-block-image”><img src=”https://it.in-jpn.com/wp-con/uploads/2019/05/bookmark-w280.jpg” alt=”” class=”wp-image-7182″/></figure>
↓↓↓
★AMPプラグインを有効化
ソースの一部
<p>■よろしければお気に入り(ブックマーク)に追加して下さい。</p>
<figure class=”wp-block-image”><amp-img src=”https://it.in-jpn.com/wp-con/uploads/2019/05/bookmark-w280.jpg” alt=”” class=”wp-image-7182 amp-wp-enforced-sizes” width=”280″ height=”79″ layout=”intrinsic”><noscript><img src=”https://it.in-jpn.com/wp-con/uploads/2019/05/bookmark-w280.jpg” alt=”” class=”wp-image-7182″ width=”280″ height=”79″></noscript></amp-img></figure>
・youtubeの動画埋め込みタイプが正常に表示されず、再生ボタンのみとなる事例
例
★AMPプラグインを使っていない（オフ）
↓↓↓
★AMPプラグインを有効化
・Google Mapの埋め込みタイプ（地図を埋め込む）が正常に表示されないため、地図が消える事例
例
★AMPプラグインを使っていない（オフ）
ソースの一部
<p>この情報・地図は 2019年4月 時点のものです。</p>
<p><iframe style=”border: 0;” src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3266.3585167991664!2d134.10687025051533!3d35.047774671962244!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35544a1a486f32a7%3A0x5d77ddcd1996e010!2z44CSNzA5LTQzMjEg5bKh5bGx55yM5Yud55Sw6YOh5Yud5aSu55S65aSq5bmz5Y-w77yT77yS4oiS77yR!5e0!3m2!1sja!2sjp!4v1556084801026!5m2!1sja!2sjp” width=”300″ height=”300″ frameborder=”0″ allowfullscreen=”allowfullscreen”></iframe></p>
<p>施設によっては閉鎖・移転している可能性があります。あらかじめご了承下さい。</p>
↓↓↓
★AMPプラグインを有効化
ソースの一部
14<p>この情報・地図は 2019年4月 時点のものです。</p>
<p><amp-iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3266.3585167991664!2d134.10687025051533!3d35.047774671962244!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35544a1a486f32a7%3A0x5d77ddcd1996e010!2z44CSNzA5LTQzMjEg5bKh5bGx55yM5Yud55Sw6YOh5Yud5aSu55S65aSq5bmz5Y-w77yT77yS4oiS77yR!5e0!3m2!1sja!2sjp!4v1556084801026!5m2!1sja!2sjp” width=”300″ height=”300″ frameborder=”0″ allowfullscreen=”” sandbox=”allow-scripts allow-same-origin” layout=”intrinsic” class=”amp-wp-enforced-sizes amp-wp-f885e11″><span placeholder=”” class=”amp-wp-iframe-placeholder”></span><noscript><iframe src=”https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3266.3585167991664!2d134.10687025051533!3d35.047774671962244!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x35544a1a486f32a7%3A0x5d77ddcd1996e010!2z44CSNzA5LTQzMjEg5bKh5bGx55yM5Yud55Sw6YOh5Yud5aSu55S65aSq5bmz5Y-w77yT77yS4oiS77yR!5e0!3m2!1sja!2sjp!4v1556084801026!5m2!1sja!2sjp” width=”300″ height=”300″ frameborder=”0″ class=”amp-wp-f885e11″></iframe></noscript></amp-iframe></p>
<p>施設によっては閉鎖・移転している可能性があります。あらかじめご了承下さい。</p>
