AMPそろそろ導入してもいいころ?『Simplicityで簡単対応!』

「そろそろAMP対応しておいた方がいいのかな?」と感じている人は多いんじゃないかと思います。当の僕自身もSimplicity2がAMPに対応していることは知っていたんだけど、良く分からないからと先延ばしにしていました。

やっぱり、そろそろ...やってみよう!

スポンサーリンク

AMP(Accelerated Mobile Pages)とは?

モバイル端末でホームページを高速表示するための取組(プロジェクト)と考えて差し支えないでしょう。Googleの説明の中にキャッシュにアクセスできるとの記載があるので、検索からWebページの表示までGoogle内で完結するなら高レスポンスが期待できます。

Google の検索結果に表示されたウェブページに有効な AMP バージョンがあれば、モバイル ユーザーはキャッシュ内の AMP にアクセスできます。
https://support.google.com/webmasters/answer/6340290?hl=ja

WordPressをAMPに対応させるには?

AMPに対応するには、プラグインを導入するか、AMPに対応したテーマを使うかの、どちらかが現実的です。当サイトはテーマにSimplicityを使わせてもらっていますが、幸いなことにAMPに対応しています。

ということで、Simplicity2の機能を使ってAMPを導入します。

設定は簡単、ワンクリックで対応

正しく表示されるかどうかは別として、サイトをAMPに対応させるにはチェックを1ヶ所入れるだけです。WordPress管理画面から「外観」→「カスタマイズ」を開いて、「AMP」項目にある「AMPの有効化」にチェックを入れて終わり。

SimplicityでAMPの有効化をする

せっかくなので、もう少し確認しておきましょう。

「AMP用のロゴ画像」を設定します。

SimplicityでAMP用のロゴ画像を設定

どんな感じで表示されるのか分からないので、シンプルなものにしておきました。折を見て修正しようと思います。

その下の「AMPと通常ページ間の移動リンクを表示」「AMPテストリンクを表示」にもチェックが入っていることを確認。これでAMP表示とテストが簡単になります。

「保存して公開」ボタンを押して設定を有効にします。

AMPページを表示する

AMPに対応するのは投稿のみです。

SimplicityでAMPの設定

AMPの設定ができると、記事タイトルの下に「AMP」「テスト」が追加されます。「AMP]をクリックすると表示が切り替わります。テスト表示にはChromeを使います。デベロッパーツールでモバイル表示に切り替えることができるからです。

モバイル表示のサンプル

上のページをAMPに切り替えたところです。(以下の画像はChromeでスマホ風に表示したものをキャプチャしたものです。)

SimplicityでAMP表示

次は、画像のあるページを表示。全体的にシンプルになるだけで、普通に表示されます。ただ、CSSで表示している画像の枠線は消えてしまいます。

AMPで画像のあるページを表示

実はこの↑スクリーンショットの周りにもCSSで枠線を付けています。AMP表示にすると枠線が消えるのが確認できます。

続いてyoutubeが貼り付けてあるページ。特に感想もないくらい普通ですね。

AMPでyoutube動画が貼ってあるページ

最後にカエレバの表示です。

SimplicityのAMP設定でカエレバを表示

問題ないですね、素晴らしいです。

Chromeの拡張機能でAMP対応サイトの動向を調べよう

Chromeに『AMP Validator』という拡張機能をインストールします。AMPのチェック用ツールです。

すると右上にこんなAMP Validator AMP非対応アイコンが表示されます。このアイコンはページの状況によって次のように変化します。

AMP Validator AMP非対応 ページがAMPに対応していない
AMP Validator AMP対応 ページがAMPに対応している
AMP Validator AMP表示 エラーなし AMPで表示中(エラーなし)
AMP Validator AMP表示 エラーあり AMPで表示中(エラーあり)

ChromeでいろいろなWebサイトを見ているときに、青いマークに変わったページはAMPに対応しているということです。当サイトの記事を見てもらうと、この青マークになるはずです。青マークになっているときに、アイコンをクリックするとAMP表示に切り替えることができます。

AMP表示に切り替わったときに緑になれば、そのページにはエラーが無いということになります。赤はエラーが発生しているということであり、アイコンをクリックすることで詳細が見られます。

AMP Validator AMP表示 エラー詳細

自分のサイトのエラーを探すときにも便利ですが、他のサイトがどれくらいAMPに対応してるか知ることができるので、ぜひインストールしましょう。

問題があったプラグイン

VA Social Buzz

「この記事が気に入ったらいいね!しよう」っていう、ボタンを表示しれくれるプラグインです。つい最近導入したばかりです...

AMPにするとCSSが適用されないので、丸裸の表示になってしまいます。AMP時に消せればよいのですが、僕の実力では無理目なので使うのをやめました。

代わりに、Simplicityの標準機能でボタンを表示しています。こちらはAMP時に非表示になります。

SimplicityのFacebookページ「いいね!」ウィジェットの使い方

Crayon Syntax Highlighter

ソースコードの表示用に姉妹サイトで使っていました。AMP非対応なのでこちらも使用を控えます。

代わりに、こちらもSimplicityの標準機能で対応します。

Simplicityでソースコードをハイライト表示する方法

【結論】

Simplicityを使うのであれば、AMP対応はとても簡単ということ。シンプルなページであれば、まずエラーは発生しません。多くの人がぶち当たるであろう問題は、すでにSimplicityでは解決済みです。

これはひとえに、Simplicityの作者である『わいひらさん』の努力のたまもの以外の何ものでもありません。感謝!

内部SEO施策済みのシンプルな無料Wordpressテーマを公開しています。初心者でも出来る限り分かりやすく使えるように作成しました。

AMPを見出しに入れるとエラーになる

この記事を書いているときにエラーが発生しました。”AMP”という文字をを見出し(h2タグ)に入れるとエラーになるようです。

冒頭の『AMP(Accelerated Mobile Pages)とは?』という見出しは、もともとは『「AMP」とは?』としていました。でも、前述のようにエラーが発生するので書き直しました。

エラーになる条件

<h2><span id="AMP">「AMP」とは?</span></h2>

<h2><span id="AMPAccelerated_Mobile_Pages">AMP(Accelerated Mobile Pages)とは?</span></h2>
<h2><span id="WordPressAMP">WordPressをAMPに対応させるには?</span></h2>
<h2><span id="ChromeAMP">Chromeの拡張機能でAMP対応サイトの動向を調べよう</span></h2>

上記はこのページをAMP表示したときのソースからh2タグを抜き出したものです。
アルファベットを利用してidが自動的に付加されるのですが、一番上の行は<span id=”AMP”>となってしまっています。これがエラーのもとになります。

idが付加されるのは、Table of Contents Plusプラグインを導入しているからです。Table of Contents Plusはメニューを表示するためのものなので、できれば外したくありません。

エラー発生の条件は、Table of Contents Plus見出しに使われた半角英数が”AMP”のみということになります。

AMP以外の半角英数文字が含まれていれば良いので、<span id=”WordPressAMP”>はセーフになります。また、全角でAMPと書いても回避できます。(この記事でも3ヶ所全角にしてあります)

Google Search ConsoleでAMPの状態を確認

AMPを導入してからしばらくすると、Googleにインデックスされます。

AMP Search Console エラーあり

まだ、日が浅いので8件しか登録されていません。おまけに「重大な問題のあるAMPページ」が1件あがっています。

詳細を開くと問題のあるページを知ることができます。

Search Console AMPページの重大な問題

『post-1753』の記事にエラーありとなっていますが、このページのことです。「id」に無効な値「AMP」が設定されていますと、このページで解説しているエラーが指摘されていますね。

すでに対処済みですが、正しい情報になるのはGoogleにクロールされるタイミングがすべてなので待つしかありません。そのうち登録ページ数も増えていくことでしょう。

すべてのページを開いてテストを実施するのも大変なので、主要なページだけチェックをして残りはSearch Consoleに任せても良いのかなと思います。

その後...

順調にインデックスされています。

Google AnalyticsでAMPのPV数をチェック

まず、AMP化してから「Slim Stat Analytics」や「Jetpack by WordPress.com」プラグインで、正確なPV数を知ることができなくなります。(実際にサイトに接続されたという意味では正確な値ではありますが。)

これはAMPページにアクセスされたPV数が含まれていないことが原因です。AMPを含めたPV数を知るには「Google Analytics」に頼ることになります。

すると、今度は「Google Analytics」にAMP分のPVがちゃんとカウントされているか、が問題になります。Simplicity2を使ってAnalyticsの設定をしていれば、カウントされていると思います。

Google AnalyticsでAMPへのアクセスを見分ける方法

通常ページにアクセスされた時のページタイトル例
“プロジェクター UC40で作る激安ホームシアター”
“AVCHDのファイルの更新日時 (タイムスタンプ)の修正”
AMPページにアクセスされた時のページタイトル例
“プロジェクター UC40で作る激安ホームシアター[AMP]”
“AVCHDのファイルの更新日時 (タイムスタンプ)の修正[AMP]”

上記例のように、AMPページへのアクセスログは、ページタイトルの末尾に”[AMP]”が付加されます。通常ページにはPCだけでなく、モバイルアクセスも含まれます。

AMPページのPV数

AnalyticsにはページタイトルごとにPVを集計する機能があるので、応用してAMPのPVだけを抽出します。

レポートにウィジェットを作成します。次のようにフィルタで「表示の絞り込み」-「ページタイトル」-「最後が一致」-「[AMP]」と設定します。

Google AnalyticsでAPMページのPV数を表示

これで、AMPのPVを抽出することができます。逆に、フィルタ条件の先頭の「表示の絞り込み」を「表示しない」に変更すると、AMPを除いたPV数を出すことができます。

ちなみに当サイトでは、1/4ほどがAMPページへのアクセスです。

AMPページを生成しない

回避できないエラーやプラグインがある場合、そのページをAMP化対象から外すことができます。(WordPressテーマ、Simplicity2の機能です。)

Simplicity AMPページを生成しない

投稿の編集画面に「AMPページを生成しない」という項目が用意されているので、チェックを入れるだけです。このページも除外しても良いのですが、AMPの解説をしているのに除外されているのはどうかと思うので。

当サイトでは以下のページを除外しています。(どこを除外したかの覚書も兼ねています)

こんにちはプチコン3号

除外理由:こんにちはプチコン3号の画像板が正しく表示できなくなります。(WordPress標準のギャラリーを利用しています)

イオンモバイルありがとう 1 周年記念キャンペーン【SIM代金1円】

除外理由:イオンモバイルのの広告が貼ってあるため。

格安SIMで毎月の携帯料金が安くなるのは分かった!でも、どのMVNOを選んだらいいの?

除外理由:表の見出しエリアの色が表示されないため。

スポンサーリンク
アドセンス(PC)
アドセンス(PC)

フォローする

この記事が気に入ったら
いいね!してくれると嬉しいです
こんな記事も読まれてます
スポンサーリンク
アドセンス(PC)