当みかんアルゴリズムは一部スクリプトを使用しているページ以外は、AMP対応を完了しています。
ここではAMP対応を考えている皆さんに向けて、実体験を元に前回のメリット／デメリットに続いてブログのAMP対応の方法を公開していきます。
AMP対応をする参考にしていただければと思います。
ブログのAMP対応 ４部作
本テーマは以下の４部作で記事を公開していきます。
第２段 AMP対応の方法
今回は【第２弾 AMP対応の方法】についてです。
ブログのAMP対応の手法
本記事はプログラミング初心者が、いかに簡単に手間を極力かけずにAMP対応を行うかを趣旨に記述しています。
なのでAMP対応に対する技術的要素や難しい言葉はここでは説明を省いて手法のみを記していきます。
ここで上げる以外にも手法はありますので、知識欲の旺盛な方はさらに調べて勉強してみてください。
ブログAMP対応の方 2選
パターン１ AMP対応のWordpressテーマを使用する
パターン２ WordpressのAMP対応プラグインを使用する
単純にこのどちらかの選択です。
AMP対応のWordpressテーマ 一覧
それではまずパターン１ AMP対応のWordpressテーマについての選択肢を提示します。
WordPressテーマの機能でAMP対応する場合は、以下の一覧からあなたの用途にあったWordpressテーマをインストールしてください。
当ブログは有料テーマ「THE THOR」を使用しています。
AMP対応無料テーマ
| LION BLOG | http://lionblog.fit-jp.com/ | 有料テーマ「THE THOR」を作成しているFIT社の無料テーマです。 ぱぱみかんさん過去使用テーマ |
| LION MEDIA | http://lionmedia.fit-jp.com/ | 有料テーマ「THE THOR」を作成しているFIT社の無料テーマです。 ぱぱみかんさん過去使用テーマ |
| Cocoon | https://wp-cocoon.com/ | 無料テーマでは人気です。 |
| Sentry | https://ultimate-ez.com/sentry/ | |
| 4536 | https://4536.jp/ | 音楽専用ワードプレステーマ |
| Luxeritas | https://thk.kanzae.net/wp/ | |
| LIQUID AMP | https://lqd.jp/wp/ | |
| Simplicity2 | https://wp-simplicity.com/ |
AMP対応有料テーマ
【THE THOR（ザ・トール）】  | 14,800円(税別) | みかんアルゴリズム使用テーマです。 一押しです！ |
| DIVER | ||
| AFFINGER5 | 14,800 円（税込） |
AMP対応プラグイン
パターン２はAMP対応プラグインを使用する方法です。
ただし、現在ご使用中のテーマによっては正常に起動しない場合もありますので、問題が発生する場合はパターン１のWordpressテーマの機能でのAMP対応をおすすめします。
当ブログではAMP対応プラグインは使用していません。
AMP for WordPress WordPress公式サポートプラグイン
インストール方法
WordPress管理画面より、「プラグイン」→「新規追加」をクリックします。
テキストボックスの「プラグインの検索」の所に「AMP」と入れて検索すると出てきます。
「今すぐインストール」ボタンを押してダウンロードが終わりインストールが完了したら「プラグインを有効化」をクリックします。
設定方法について
みかんアルゴリズムでは本プラグインを使用していませんので、ここでは言及しないこととします。
「AMP for WordPress」はユーザーの多いプラグインなので、Googleで検索すると多数設定について説明しているサイトが見つかります。
紹介
ぱぱみかんさんも使ってるAMP対応の次世代テーマ、
THE THOR はこちらから
\\ 抜群に上位表示されやすい WP テーマ 【ザ・トール】//
THE THORでのAMP設定
ぱぱみかんさんが「THE THOR」で行った設定方法を記述します。
AMP設定
WordPressのメニューから「外観」－「カスタマイズ」－「AMP設定[THE]」と進みます。
AMP設定－AMPロゴの設定
AMP専用のサイトタイトル画像が必要となります。
縦：60 × 横：600px 以下のサイズのロゴを用意してここに設定してください。
AMP設定－AMPページ用広告設定
Google AdSenseを利用している場合は、既存のページに既に手動で張り付けている広告ユニットをAMP用の広告に置き換える必要があります。
以下のリンクにAdSenseの説明が載っていますので、まずは「AMP 対応のディスプレイ広告ユニット」を作成してください。
AdSenseヘルプ → https://support.google.com/adsense/answer/9274230?hl=ja
「AMP 対応のディスプレイ広告ユニット」が作成出来たら、
「AdSense等の広告タグを入力」にGoogle AdSenseで取得したコードを張り付ける事で、自動的にAMP用広告に置き換えられます。
AdSenseを利用している方はここの設定は必須ですので忘れず設定しておいてください。
AMP設定－AMP機能設定
AMPページを表示するか選択
「表示」を選ぶと、AMPページが表示されるようになります。
ただしAMPページがGoogleに認識されて検索結果に表れるまでは、暫く時間がかかります。
AMPページで検索ボックスを表示するか選択
「表示」を選ぶと、検索ボックスが表示されます。
AMPページで通常ページへのボタンを表示するか選択
AMPページから通常ページへのリンクボタンがヘッダー下に表示されるようになります。
読者の利便性を考えると、表示しておいた方が良いかもしれませんが、
当サイトで本ボタンを押されている気配は今のところありません。
以上にて「THE THOR」でのAMP対応の設定は完了です。
作成されたAMP対応ページのテスト
それぞれの記事が適切にAMP対応出来ているかどうかは、１記事ずつ調べていく必要があります。
テスト方法はGoogle の「AMP テスト」にAMP対応ページのアドレスを入力してテストします。
THE THORの場合は通常ページのアドレスの末尾に「?type=AMP」を付けるとAMPページのアドレスとなります。
AMP テスト → https://search.google.com/test/amp?hl=ja
AMPページとして適切な場合は、以下の様に「有効なAMPページです」と表示されます。
AMP対応後の手動修正
前項で「有効なAMPページです」と表示された場合はAMP対応終了となりますが、
なかなか、すんなりと行くものではありません。
おそらく以下の問題にぶつかることになると思います。
必須属性「height」がタグに「amp-img」にありません。
属性「border」はタグ「amp-img」で使用できません。
この対処法に関して、以下の記事に記しています。のでご覧になって対処してください。
一部の記事を除いて、やっと”みかんアルゴリズム”のAMP化対応が終わりました。AMP化可能な記事をAMP対応するのに、およそ１ヵ月かかるという、途中何度も何度も挫けそうになる、長い長い闘いでした。 [adcode]AMPとはぱぱ[…]
Googleサーチコンソールに警告「推奨サイズより大きい画像を指定してください」
上記問題をクリアした後、ついで遭遇する問題はサーチコンソールに表示される
という警告メッセージになります。
こちらについても、以下の記事に記しています。のでご覧になって対処してください。
当みかんアルゴリズムは一部スクリプト使用ページを除いて、AMP化対応が終わっています。その過程で大変だったこと、第2段です。今回は警告「推奨サイズより大きい画像を指定してください」についてです。解決方法も書いていますので参考にしてください。[…]
以上今回は、
第２段 AMP対応の方法
について記載しました。
次回は、
第３段 AMP対応後のGoogleアドセンス広告の設定
について記載していきます。
前回記事
当みかんアルゴリズムは一部スクリプトを使用しているページ以外は、AMP対応を完了しています。ここではAMP対応を考えている皆さんに向けて、実体験を元にメリット／デメリットを公開していきます。AMP対応をするか、見送るか参考にしていただけ[…]
↓こちらの記事もおすすめ↓
ここでは本編を離れて、ネットで見つけた、または購入した一品を紹介していきます。ぱぱみかんさんが実際に 『買って』『使って』みたレビューも、しっかり書いています！！随時、追加更新していきますので見ていってください。 […]
街をあるいて偶然みつけた、美味しいもの。食べて終わるのも勿体ないですよね。ジャンルなく追加していこうと思っていますので、気になるお店や商品があれば、拾っていってください。お取り寄せ情報も載せていこうと思います。 […]
