【WordPress】プラグインなしでAMP対応!プログラム書けなくてもできた。

WEB制作

僕みたいにプログラム書けないWEBデザイナーだと、AMP(Accelerated Mobile Pages)対応はプラグインでいいかなと思いつつ、なんとか自作でAMP対応できないかなぁって思っていたら、有志の方々がいろいろ情報をアップしてくれておりましたので、なんとか対応することができました!ありがとうございます。この記事は今後自分が見返すためにも書いておきます。

このページのAMP対応されたページ 
AMP対応されたページから来た方のために念のため通常ページ 

AMPは、GoogleとTwitterで共同開発されたモバイル端末でページを高速表示させるための仕組み。今やSEO対策の一つになっていますね。

ようやくAMP対応できたー!

まあまあ大変だったけど、でもやり初めたら割りと簡単にできちゃった。XHTMLとかHTML5を勉強した時みたいな懐かしい気分になったよ。

まず、有名なAMPプラグインをインストールしてなんとかしようと思っていたけれど、

プラグインをインストールしただけだと当然にエラーがでちゃう。なので、やっぱりプラグインを利用しないで自分でAMP対応ページを制作することにした。

AMP対応したWordPressテーマもあるけど。。。

WordPressのテーマもそうだけど、いざレイアウトを変えたい、デザインを変えたいってなった時に、自分でテーマを作っていないと編集しづらいから、結果一度もWordPressのテーマを利用したことはない(笑)

もちろん、自分でテーマを作るよりも、お詳しい方々が制作されているので、機能やSEO対策を含め素晴らしいテーマは沢山あるんだろうけど、いざ、修正が必要な時に自分で簡単に変更できないのはなぁって思っている。

最近では、AMPに対応したテーマもあるよね。

有名なAMP対応WordPressテーマ「AFFINGER5」と「Diver」

WordPressテーマ 「WING(AFFINGER5)」

2012年にSTINGERを公開してから、早いもので5年以上の月日が過ぎようとしています。STINGERは「SEOに強いWordPressテーマ」として好評いただき、各書籍でも多数ご紹介頂きました。SEOもデザインの流行も、時間の中で変わっていくモノ、変わらないものがあります。自身がアフィリエイターとして、そしてまた広告側(BtoC)の視点からも本当に効果のあるサイト構築、そしてサイト運営と共に成長できるテーマをモットーに改善、検証を重ねたテーマが結晶がこの「WING」になります。

アフィリエイター収益最大化!最新SEO対策済み!wordpressテーマ「Diver」

アフィリエイトの収益を最大化することを目的に作成されたワードプレステーマ。SEO対策だけではなく、考えられたサイトレイアウトで回遊率を向上させ、質の高いセッションが獲得できます。

上記2つは、WordPressのテーマを一度でも探したことがある人はよく知ってるよね。機能が凄すぎて、僕は自分でシンプルなテーマ作っちゃうんだよねー。

なのでAMP対応ページも、僕はなるべくシンプルで、好きな時にデザインの細かい部分を修正できる方ように、プラグインの利用をしないで自力でAMP対応することにする。

自作AMP対応のために、AMP書き出し用ファイルを新規作成する。

エンジニアではないので、さてAMP対応、どこから手を付けてよいのかまったく理解不能だったんだけど、

自作Wordpressテンプレートをプラグインを使わずにAMP化してみた話 – のんびりライフ

プラグインでのAMP対応だとデザインを自由に変えられないという制限があるので、プラグインを使わずに独自にAMP対応を行なってみました。記事詳細テンプレートが読み込まれるタイミングでフィルターフックでAMP専用テンプレートに差し替え、本文内もAMP用に差し替えています。

上の「のんびりライフ」様のページを参考にさせていただいて、「あーなるほどー」ってやっと理解できた。

function.phpに上記ソースを入力することで、通常ページはsingle.phpが書き出し、AMPの場合はamp.phpが書き出される。
通常ページのURLの末尾に「?amp=1」を追加するとamp.phpで書き出させたhtmlになる。すばらしー!

僕はamp.phpの中身をこんな風にしたよ。

管理しやすくするために、amp.phpがamp-header.php、amp-content.php、amp-sidebar.php、amp-footer.phpを読み込むようにした。

amp-style.phpは、amp-header.phpに

を追加した。これも、単にCSSを管理しやすくしたかったため分けた。

基本的にはfunction.phpの編集と、新規にamp.php及びそれに付随するファイル(水色ファイル)を作るだけ。

通常ページとAMP用のページに<link rel=〜>を追加する。

通常ページにAMP用URLを入れないとならない。これは僕みたいな素人には見落としが多いかもしれない。

上記ソースをfunction.phpに追加することで、通常ページの</head>前に

が追加される。
さらに忘れてはいけないのが、AMP対応ページの</head>の前にも

を追加する。
rel="amphtml"について勉強になったのはこちらのサイト「海外SEO情報ブログ」様。

AMP対応ページは、サブドメインや別ドメインでも公開可能 | 海外SEO情報ブログ

AMP対応したページは、サブドメイン、あるいは完全に別のドメインのサイトでさえも公開することができる。通常のページを公開しているサイトと同じドメイン名を使う必要はない。

補足というか、AMP化する際に、通常のページを公開しているサイトと同じドメイン名を使う必要はないらしい。ほぇ〜知らなかった。

通常ページに記述した rel="amphtml"をGooglebotは見てAMP化されたページを検出するため、サイトマップの送信は不要です。とのこと。勉強になる〜!

link rel="canonical"ってURL正規化だもんね、納得だ。

AMP対応のHTMLに書き換え処理をする。

AMP HTMLのコンポーネントは下記を参照。当ページに来ているということは、リンクを掲載するまでもないかもしれないが。。。

コンポーネント – AMP

AMP HTML ライブラリで提供されるコンポーネントは、次のように分類されます。

<img〜>を<amp-img〜></amp-img>へ書き換え

一番苦労するであろう部分、画像タグ「<img〜>を<amp-img〜></amp-img>へ書き換える処理」ですが、こちらも「のんびりライフ」様のページにすべて記載されていたよ!

冒頭の「記事詳細テンプレートをAMP専用テンプレートに切り替える処理」の、「ここにAMP用の投稿記事の処理」部分に、

に、<img〜>を<amp-img〜></amp-img>へ書き換え処理を追加する。

これで投稿記事内の画像が<img〜>から<amp-img〜></amp-img>へ置き換わる。

すべての画像タグに「width="サイズ" height="サイズ"」が必要。

ただ一つ問題もある。すべての画像タグに「width="サイズ" height="サイズ"」が入っていないとAMP HTMLをパスできないのだ。

元々画像サイズを画像タグにいつも入れていたのであれば問題はないが、今までの記事がそうでなかった場合、ここは大変だが修正が必要だろう。

layout="responsive"をすべての画像にあてるかどうか。

そしてもう一点の問題。

layout="responsive"は要素の幅に合わせてアスペクト比を保ったまま拡大、縮小される。これ、とっても便利なんだけど、記事のすべての画像にlayout="responsive"を入れてしまうと、装飾で利用するような小さな画像も要素の左右いっぱいまで引き伸ばされてしまった。。。
ここは左右いっぱいで問題ない画像の時だけ投稿時にlayout="responsive"を追加することにした。

amp-imgやlayout="responsive"については「Crane & to」様のページを参考にさせていただいた。

AMPでレスポンシブ・レイアウト指定した画像のwidthは反映されないことに注意 – amp-img layout="responsive"

<amp-img>タグに layout="responsive"を指定すると意図しない表示になることがあります。AMP特有の layout="responsive" を正しく使うには width, height の理解が必須となります。順を追ってみていきましょう。

アイキャッチ画像も<amp-img〜>へ置き換え。

また、「投稿記事内の画像」は<img〜>から<amp-img〜></amp-img>へ置き換わるんだけど、記事内以外の画像、つまりはアイキャッチ画像(上部の通常アイキャッチ画像と、メニューやリストに利用されるアイキャッチ画像)は置き換わらない。なので、下のソースを追加した。

ここまででだいたい<img〜>から<amp-img〜></amp-img>への対応はOK!

まあまあ大変だったね。。。

なぜかsrcset属性が入っているとうまくレイアウトできなかった。。。ので削除。

これは今回ちょっと原因不明だが、srcset属性が入っていてlayout="responsive"とすると、width:100%して、ウィンドウを小さくした時に左右のpaddingがうまくいかなかった。。。srcset属性を下記ソースで削除したらキレイにレイアウトできた。

参照させていただいた「てらこや.work」様はこちら。

WordPressの画像に自動設定されるsrcset属性を無効化する方法 | てらこや.work

img要素の属性値変更で不具合 とある昼下がり、WordPressでの不具合相談をされた時の解決方法をメモ。何でも、WordPressのバージョンを4.1から(古い……)最新のバージョンにアップしたらJavaScriptで作っていた画像切り替えのコンテンツが動かなくなったとの事。

border属性を削除

自分のブログに必要ではない処理をわざわざ入れるつもりはなかったので、「のんびりライフ」様のソースにある「border属性を削除」する処理を初めは取り除いていたのですが、意外な盲点があった。。。

アフィリエイトのリンクのborder属性を忘れていた。。。

それは、アフィリエイトのリンクに挿入されるspacerだ。。。

html上で閲覧できないようにされてあるwidth="1"とheight="1"が1pxの画像のことです、はい。そしてこれ、だいたいすべてにborder="0"が入っている。というのも、これを入れていないと環境によっては小さい四角が表示されてしまうからね。

AMP HTML上ではborder属性を認めていないので、これは取り除かないとならない。下記処理も追加した。

アフィリエイターはborder属性の削除は必須ね。

WPプラグイン「SyntaxHighlighter」はAMP未対応。なので「Gists」を利用する。

ソースコードを貼り付けるプラグイン、「SyntaxHighlighter」を利用していたんだけど、こちら予想通りAMPには未対応だった。。。

これをどうすればいいか、その答えは簡単。AMPはGitHubのサービスの一つ、ソースを公開または管理するサービス「Gists」で登録したソースを貼り付けに対応している。

The world’s leading software development platform · GitHub

GitHub brings together the world’s largest community of developers to discover, share, and build better software. From open source projects to private team repositories, we’re your all-in-one platform for collaborative development.

ただ、「Gists」で登録したソースをAMP対応用に書き換えの処理がまた必要になる。その処理がこちら。

これで、例えば、「Gists」で登録されたHTMLソース

というように、AMP HTMに書き換えてくれる。
と同時に忘れてはいけないのは、

上記プラグインを</head>の前に設置されていないと、「Gists」はAMPのページ上で正常に動作しない。

「Gists」を利用していない時はプラグインの読み込みしちゃ駄目みたい(笑)

んで、上記プラグインの読み込みを</head>の前に設置していたのですが。。。。

なんと!「The extension ‘amp-gist’ was found on this page, but is unused. Please remove this extension.」と表示されてしまった!

実は別の記事で、「Gists」を利用していない記事にこのようなメッセージが出た。それもそのはず、CDNを常に読み込みつつ利用をしていないので、「amp-gist使っていないんだったら外してくれよ!」って言っているのです。
というわけで、</body>の前に

を追加して

パスできちゃった(笑)
これですべての記事でamp-gistのCDNを読み込んでいても問題はない、、、理論上は。

Google AdsenseのAMP対応。

Google Adsense(グーグルアドセンス)も通常ページとAMPでソースを切り分けないとならない。元々アドセンスにショートコードを利用していたので、「Web屋の芝生DIY」様の処理を利用させていただいた。

【WordPress】ショートコードを使ってGoogle Adsenseのコードを通常用/AMP用で出し分ける方法 | WordPress | マイホームブログ | Web屋の芝生DIY

Google Adsenseを記事の本文内に設置するには様々な方法がありますが、Web屋の芝生DIYではGoogle Adsenseの位置を記事ごとに詳細にコントロールするため、記事ごとWordPressのショートコードで設置するようにしています。ですが、AMP対応するにあたって、単純にショートコードでソースを呼び出すだけではAMP対応ページでバリデータエラーを発生させることになってしまいます。これを回避するために、通常用/AMP用でGoogle AdsenseのソースコードをWordPressを使って出し分ける方法を本記事ではご紹介いたします。

function.phpに、

上記ソースを追加し、記事本文のアドセンスを挿入したいところに、

と入れると、通常ページとAMPの両方にそれぞれのアドセンスのコードが書き出される!

これでアドセンス対応もOK!

で、書き出されたHTMLをチェックする。

僕が試したやり方は、書き出されたHTMLソースを「AMP Project」のValidatorに貼り付けて、PASSかFAILかをチェックしておりました。

The AMP Validator

This is the minimum valid AMP HTML document. Type away here and the AMP Validator will re-check your document on the fly.

その後Google Search ConsoleのAMPテストにて、schema.org含めさらに詳細なチェックをしておりました。

AMP テスト – Google Search Console

モバイル端末では、標準 HTML ページよりも AMP ページのほうがすばやく見やすく表示されます。

成功すると、

このように表示される!

ようやく公開できる〜

公開されたページはこちら。

そして、冒頭にもあるけど、

このページのAMP対応されたページ 
AMP対応されたページから来た方のために念のため通常ページ 

まだまだ修正必要だと思うけど、まあ除々にやっていきまーす!

2020年9月27日:追記

WordPressが5.5にバージョンアップされ、画像imgタグに自動で「loading=”lazy”」という画像遅延読み込みタグが付与されるようになった。だがAMPはこのタグを認めていないので、エラーが出ていた!

答えは簡単、単純にAMPの場合のみ「loading=”lazy”」を取り除けばいい。

function.phpに、

を追加すると、「loading=”lazy”」がimgタグから削除される!