目次
前提
- WordPressの有料テーマ The Thor(ザ・トール)を使用している
- AMP(Accelerated Mobile Pages)対応したい
- AMPロゴが設定できない
概要
AMPはGoogleが推進しているモバイル向けのWebページを高速に表示させるための手法で、メディア側はAMP対応されたページを用意することでGoogleのサーバにcacheされ、コンテンツの読み込みを高速にさせることを実現しています。その結果、モバイルフレンドリーなサイトを実現することでGoogleに評価されSEO的にも効果が期待できると言われています(AMPの詳細や仕組みに関しては公式ページを参照してください) 上記の理由からAMP対応を行いたいわけですが、AMP用のページはAMPのルールに沿ったHTMLを用意する必要があり、対応には手間がかかります。
WordPressでサイトを運営している場合は、利用しているテーマによってはAMP対応用のプログラム(PHPやJavascript、CSS)が用意されており、それを活用することで簡単にAMP対応することができます。
テーマで対応していない場合はAMPのコミュニティが開発したプラグインを利用するのが一般的だそうです。 自分が利用しているWordpressのテーマはThe Thorなので、The Thorを利用している人向けに自分がAMP対応をする上で躓いた点を記載します。
結論
- 画像のAMP対応はAMP変換用のプログラムに追記し、一気に対応した
- AMPロゴ画像が反映されなかったので、プログラムに直接記載した
The ThorでのAMP対応方法
- AMP機能をONにする
- 画像をAMP対応する
- AMP用のロゴを設定する
- 広告を表示する場合は、AMP対応用の広告スクリプトを追加する
AMP機能をONにする
- WordPressの「外観」 → 「カスタマイズ」 → 「AMP設定[THE]」 → 「AMP機能設定」を選択
- 「AMPページを表示するか」 を 表示に設定

画像をAMP対応する
AMP画像(<amp-img>)はwidth, height(幅、高さ)の設定が必須であり、対応しないと下記のようなエラーがGoogle Search Consoleにて検出されます。AMPエラー:必須属性「width」がタグ「amp-img」にありませんAMPエラー:必須属性「height」がタグ「amp-img」にありませんGoogle Search Consoleこの問題に対応するには、下記2点があります
- WordPressにて画像を設定する際に画像のブロックで幅、高さを手動で設定する
- AMP画像変換プログラムを編集し、width, heightを插入する
2に関しましては、プログラムにてwidth, heightを插入するため手間は最初だけで済みますが、テーマのプログラムを編集するため不具合が起きないように注意が必要です。 この問題への対応はこちらの記事が詳細に記載されていましたので、こちらを参照して対応しました。 自分は参照記事同様、2でプログラムにより自動插入するようにしました。 具体的には下記手順です。
- WordPressのメニューから「外観」→「テーマエディター」を開く
- 右上の「編集するテーマを選択」から「THE THOR」を選択する
- テーマファイルから「inc」→「amp」→「convert.php」を選択する
- プログラムが表示されるため「//画像タグをAMP用に置換」のコメントを探し、その直前に下記のプログラムを挿入する
//imgタグにwidthとheightを追加 ここから先を追記
$img_pattern = '/<img [^>]*?src="(https?:\/\/[^"]+?)"[^>]*?>/iu';
preg_match_all($img_pattern, $the_content, $rep_imgs);
foreach ( $rep_imgs[0] as $i => $rep_img ) {
if ( false !== strpos( $rep_img, 'width=' ) && false !== strpos( $rep_img, 'height=' ) ) {
continue;
}
$rep_img_url = $rep_imgs[1][$i]; // 画像url
$rep_img_size = @getimagesize( $rep_img_url ); // 画像サイズを取得
if ( false === $rep_img_size ) {
continue;
}
$replaced_img = str_replace( '<img ', '<img ' . $rep_img_size[3] . ' ', $rep_imgs[0][$i] );
$the_content = str_replace( $rep_img, $replaced_img, $the_content );
}
//追加ここまで
//画像タグをAMP用に置換
$the_content = preg_replace('/<img (.*?)>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
$the_content = preg_replace('/<img (.*?) \/>/i', '<amp-img layout="responsive" $1></amp-img>', $the_content);
AMP用のロゴを設定する
次にAMP用のロゴ画像を設定していきます。AMP用のロゴ設定は下記手順で設定します
- WordPressのメニューから「外観」→「カスタマイズ」→ 「AMP設定[THE]」-> 「AMPロゴの設定」を開く
- 縦:60 × 横:600px 以下 のサイズの画像を設定する

上記問題が発生しないかチェックする
- Google Search ConsoleのAMPテストページ にてURLを入れて確認する
- ※ AMPページを入れるために 記事URLに
?type=AMP
を追加したURLで確認してください - 例えば、https://plum-plus.jp/2020/09/30/The Thor(ザ・トール) でAMPロゴが設定できない場合の対処方法/?type=AMP のように指定します
- ※ AMPページを入れるために 記事URLに
- 問題が発生している場合は下記のエラーが検出されます
タグ「amp-img」の属性「src」に URL がありません。 AMP HTML タグの属性で指定されたレイアウトが無効です。 Google Search Console
エラーが発生する場合(AMPロゴが反映されない)場合の対処方法
行うことはAMPページを表示する時に読み込まれるプログラムを直接編集してAMPロゴを設定することです。こちらもAMPページ用のプログラムを編集するため不具合が発生しないように注意する必要があります。具体的には下記手順です。
- WordPressのメニューから「外観」→「テーマエディター」を開く
- 右上の「編集するテーマを選択」から「THE THOR」を選択する
- テーマファイルから「single-amp.php」を選択する
- 下記プログラムのように直接画像のURL、width, heightを設定する
- ロゴ画像のURLは、「メディア」→「ライブラリ」→ 対象画像をクリック → 「リンクのコピー」で可能
<amp-img layout="responsive" class="siteTitle__logo" src="ここにAMPロゴ画像のURLを設定" alt="Plum+!!" width="ここにAMPロゴ画像の幅を設定(例:600)" height="ここにAMPロゴ画像の高さを設定(例:60)" ></amp-img>
<!--
下記は元のプログラムで今はコメントアウトし、The Thorで不具合が解消されたら戻すために残す
こちらはプログラムで画像のURLやwidth, heightを設定するようになっている
<amp-img layout="responsive" class="siteTitle__logo" src="<?php echo $src;?>" alt="<?php bloginfo('name') ?>" width="<?php echo $width;?>" height="<?php echo $height;?>" ></amp-img>
-->
広告を表示する場合は、AMP対応用の広告スクリプトを追加する
AMPページでは、通常ページでのAdsense等の広告表示スクリプトは利用できないため、AMPページ用の広告表示スクリプトを設定する必要があります。具体的な手順は下記です。
- Adsense等からAMP用の広告表示スクリプトを生成する
- WordPressの「外観」 → 「カスタマイズ」 → 「AMP設定[THE]」 → 「AMPページ用広告設定」を選択
- 1で生成したスクリプトを貼り付けて公開(保存する)
https://amp.dev/ja/about/ads/
まとめ
The ThorでAMP対応する方法を述べていきました。プログラムで編集する箇所は注意して行うと安心です(プログラム自体を別ファイルで保存しておくなど)
AMPロゴに関しましては、自分だけ発生しているのかもしれないですがハマったポイントなので同様の問題が発生している場合は参考に頂けると幸いです。