The Thor(ザ・トール) で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対応をする上で躓いた点を記載します。

結論

  1. 画像のAMP対応はAMP変換用のプログラムに追記し、一気に対応した
  2. AMPロゴ画像が反映されなかったので、プログラムに直接記載した

The ThorでのAMP対応方法

  1. AMP機能をONにする
  2. 画像をAMP対応する
  3. AMP用のロゴを設定する
  4. 広告を表示する場合は、AMP対応用の広告スクリプトを追加する

AMP機能をONにする

  1. WordPressの「外観」 → 「カスタマイズ」 → 「AMP設定[THE]」 → 「AMP機能設定」を選択
  2. 「AMPページを表示するか」 を 表示に設定
その他、検索ボックスや通常ページへのリンクはお好みで設定してください

画像をAMP対応する

AMP画像(<amp-img>)はwidth, height(幅、高さ)の設定が必須であり、対応しないと下記のようなエラーがGoogle Search Consoleにて検出されます。
AMPエラー:必須属性「width」がタグ「amp-img」にありませんAMPエラー:必須属性「height」がタグ「amp-img」にありません

Google Search Console
この問題に対応するには、下記2点があります
  1. WordPressにて画像を設定する際に画像のブロックで高さを手動で設定する
  2. AMP画像変換プログラムを編集し、width, heightを插入する
1に関しましては、AMP対応前の記事においてwidth, heightが設定されていない場合は手動で設定していく必要があり記事が多い場合は手間のかかる作業ですが、初心者でも安心して作業を行うことができます。
2に関しましては、プログラムにてwidth, heightを插入するため手間は最初だけで済みますが、テーマのプログラムを編集するため不具合が起きないように注意が必要です。 この問題への対応はこちらの記事が詳細に記載されていましたので、こちらを参照して対応しました。 自分は参照記事同様、2でプログラムにより自動插入するようにしました。 具体的には下記手順です。
  1. WordPressのメニューから「外観」→「テーマエディター」を開く
  2. 右上の「編集するテーマを選択」から「THE THOR」を選択する
  3. テーマファイルから「inc」→「amp」→「convert.php」を選択する
  4. プログラムが表示されるため「//画像タグを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);
上記対応を行うことで、記事内の画像にwidth, heightを設定することができます。

AMP用のロゴを設定する

次にAMP用のロゴ画像を設定していきます。
AMP用のロゴ設定は下記手順で設定します
  1. WordPressのメニューから「外観」→「カスタマイズ」→ 「AMP設定[THE]」-> 「AMPロゴの設定」を開く
  2. 縦:60 × 横:600px 以下 のサイズの画像を設定する
この設定を行うことで、AMPロゴの画像を設定できるはずですが、自分のThe Thorの不具合なのか、The Thorのバージョンが問題なのか他に問題があるのか原因はわからないですが、定められたサイズの画像を設定しても、設定自体は反映されるがAMPページにて表示されない状態でした….😭
テーマのカスタマイズにてAMPロゴ画像は設定できている

上記問題が発生しないかチェックする

タグ「amp-img」の属性「src」に URL がありません。 AMP HTML タグの属性で指定されたレイアウトが無効です。 Google Search Console

エラーが発生する場合(AMPロゴが反映されない)場合の対処方法

行うことはAMPページを表示する時に読み込まれるプログラムを直接編集してAMPロゴを設定することです。こちらもAMPページ用のプログラムを編集するため不具合が発生しないように注意する必要があります。
具体的には下記手順です。
  1. WordPressのメニューから「外観」→「テーマエディター」を開く
  2. 右上の「編集するテーマを選択」から「THE THOR」を選択する
  3. テーマファイルから「single-amp.php」を選択する
  4. 下記プログラムのように直接画像のURL、width, heightを設定する
    1. ロゴ画像の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対応用の広告スクリプトを追加する

AMPページでは、通常ページでのAdsense等の広告表示スクリプトは利用できないため、AMPページ用の広告表示スクリプトを設定する必要があります。
具体的な手順は下記です。
  1. Adsense等からAMP用の広告表示スクリプトを生成する
    1. 具体的な手順はこちらです
  2. WordPressの「外観」 → 「カスタマイズ」 → 「AMP設定[THE]」 → 「AMPページ用広告設定」を選択
  3. 1で生成したスクリプトを貼り付けて公開(保存する)
AMP広告の詳細についてはこちらでご確認ください
https://amp.dev/ja/about/ads/

まとめ

The ThorでAMP対応する方法を述べていきました。
プログラムで編集する箇所は注意して行うと安心です(プログラム自体を別ファイルで保存しておくなど)
AMPロゴに関しましては、自分だけ発生しているのかもしれないですがハマったポイントなので同様の問題が発生している場合は参考に頂けると幸いです。
最新情報をチェックしよう!