AMPファーストにしたら、モバイルファーストの時よりアクセスが増えて報酬も増えた

1531

先日、本サイトで採用しているTheme「Newspaper」がバージョン9.6にアップロードされました。このThemeアップデートに伴い、本サイトもいくつかのリニューアルを行いアクセス解析やAdSenseの成果にも変化が出てきたのでご紹介します。

これと合わせて、今回のThemeアップデートでは、私のAMPに対する認識がかなり変わってきましたのでご報告いたします。

記事の概要
  1. AMPファーストとは、ハイエンドモバイル端末(スマホなど)でアクセスされた際、常にAMP仕様のコンテンツを表示させる仕組み
    この「常時AMP仕様」によって、複数ページの閲覧に際して、ユーザーに快適な体験を提供できる
  2. スピードこそが鍵!
  3. 『Newspaper』を使ったAMPページには、URLに「/amp/」が付かない
  4. TagDivが提供しているWordPress Theme『Newspaper』で固定ページは自動でAMP化出来ないが、モバイルエディタにコピペするだけでOK
  5. AMP化が適切に行われているのかをチェックするには、限られた、独特の方法が必要になる(多少手間だが、Themeに任せっきりで問題はない)
  6. AMPへのトラフィックは、何も検索結果からのトラフィックだけとは限らない

今回のThemeアップデートに際して、必ずしもGoogleのPageSpeed Insights結果が良くなったというわけではありません(どちらかというと評価は落ちています)。

しかし、トラフィックはAMPコンテンツに偏り始め、AdSenseの収益なども良好です。

Mobile firstのさらに先をゆく『AMPファースト』とは

AMPとは、「Accelerated Mobile Pages」の略で、GoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのプロジェクトであり、フレームワークです。モバイル端末での検索結果では、AMPマークがURLの前に表示されます。

モバイルファーストとは、近年のWEBサイト閲覧事情を考慮して、パソコン版コンテンツでの可読性やデザインを重視するのではなく、「はじめにモバイルコンテンツ」における可読性やデザインを考慮して、コンテンツを作り込んでいくという考え方です。

また、Googleも「モバイル・ファースト・インデックス」と言って、モバイル版のコンテンツ評価を検索結果として採用するアルゴリズムを使用しています。

詳しくは下記をご覧ください。

TagDivが提供するNewspaperでは、AMPコンテンツに「/amp/」は付与されない

これまでのホームページ作成では、レスポンシブWEBデザインなどを採用して、モバイル版デザインやレイアウトを主軸にコンテンツを作り込んでいましたが、AMPファーストでは、このモバイル版HTMLソースを生成せずにモバイル版コンテンツはAMP仕様に沿ってコンテンツを作成するのが基本です。

従来のモバイル版コンテンツは、PC版コンテンツと同じHTML記述でした。PC版とモバイル版での違いはスタイル定義さえ異なれば、充分にモバイル版コンテンツとして成立していました。

しかし、AMPファーストでは、このPC版と同じHTML構造を持ちCSSだけ異なるモバイル版コンテンツを生成せずに、AMP仕様で書かれたページのみを生成します。

ぶっちゃげ、このNewspaperがどんな仕組みを使って、正規URLのままAMPページを生成しているのかは理解できていません(汗)

Themeオプションパネルに記載したAMP用(モバイル用)スタイルの定義が、どのように格納されているのかも理解できていません。

AMPコンテンツに対して、一般的に付与される「/amp/」付きのURLが存在しないため、従来のGoogleサーチコンソールの「AMPテスト」では、以下のように「AMPページではありません」と表示されます。

AMPテストでの検証結果

しかし、下記のようにValidation Statusは「PASS」と評価され、サーチコンソールの【URL検査】→【AMP】でも、下記のような”リンクされている AMP バージョンは有効です“と判断されています。

amp validator チェック
<検証元URL : https://validator.ampproject.org/

サイト内全てのURLのAMPを検査した結果

マッつん

それでも、サーチコンソールのAMPを確認すると…

サーチコンソールでのAMP検証結果

現状、5つのAMPエラーがサーチコンソールでは指摘されていますが、最下部のエラーは修正済みで、下から2つ目はAMPファーストの導入によって「/amp/」が、存在しなくなったので404エラーが出ています。

URLが変わった場合は、302リダイレクトを行うのが良いと考える方もいらっしゃるかもしれませんが、AMPの場合は、再インデックスによってデータは修正されるので、リダイレクトの必要はないと考えています。

3番目のエラーは、Themeアップデートによる、常時AMP化以前に、AdSense自動広告タグの設置ミスの名残でエラーが出ています。現在は、ThemeのオプションパネルでAMP広告を設定しているので、自動広告タグ自体が存在しません。

残り2つも解決済みです。

ただ、気になるのは、「/amp/」ページが存在しない分、パソコンでコンテンツにアクセスし”#development=1″を末尾につけてチェックするといくつかの警告が表示されます。

development エラー

私は、エンジニアではないので、この警告内容を正しく理解できていません。ただ、サーチコンソールでも、時折エラー報告があるのですが、それは、Newspaperをアップデートする前のインデックス状況からエラーが出ているだけで、再検査をすると、エラーはなくなると考えています。

結果的に、アクセスも増え、AdSenseの収益も伸びていますしね!

スピードこそ鍵「Speed is the key」

スピードこそが鍵!

スピードが鍵
広告をスピードアップすることは、 パフォーマンスを向上させるための素晴らしい方法です。 Newspaperのテーマはあなたに知的な広告システムをもたらします。 AMP広告にも機能し、広告がより見やすくなります。 Newspaper Themeには、広告を掲載できる6つのスポットがあります。 設定するには、Mobile Themeの設定を参照してください。

AMP向けAdsense Auto Adsの実装もあります。 モバイルテーマの設定からAMPの広告セクションにそのような広告を統合できるようになりました。”

現在のGoogle検索エンジンは、モバイルファースト・インデックスが採用されています。

モバイルファースト・インデックスとは、モバイル検索でのランキングを軸にパソコン版の検索ランキングを決定するというアルゴリズムですから、AMPに特化したサイトは、AMPを導入していない表示されるまでに時間がかかる、いわゆる『重いサイト』に比べ、高く評価されます。

ここがポイント

AMPにしたから、検索エンジンがコンテンツを高く評価したのではなく、あくまでもAMP化されたコンテンツがあることで、それまで「重いサイト」より高い評価を得て、検索ランキングが上がるということです。

もともと、表示速度が速い「軽いサイト」であれば、AMPを導入したところで、ランキング結果に影響はありません。

もちろん、AMPを導入したと同時に、他の要素で評価が上がり、ランキングが上がるということもありますし、他の要素で評価を落としAMPを導入したタイミングでランキングが下がるということもあります。

なぜ、トラフィックが向上したのか!(仮説)

AMPファースト導入日

このサイトに常時AMP(AMPファースト)を導入した翌日から、AMPコンテンツへのトラフィックが増加しました。

AMPファースト導入以前からもAMP化は行なっていました。ただ、この場合は、表示速度の速いコンテンツは、検索経由のトラフィックだけに限られます。

なぜなら、AMPコンテンツに掲載されたリンクをクリックして訪問するサイトは、通常、AMP化されていない、モバイル用コンテンツだからです。そのため、1ページ目は表示も早く、快適に閲覧できていたとしても、2ページ目のリンクをクリックした途端、表示に時間がかかれば、ユーザーが意図的に離脱したり、通信が途絶え、結果的に離脱状態にならないとも限りません。

ここからは、仮説の域を脱しませんが、おそらく、常時AMP化によって、2ページ目、3ページ目も快適に閲覧が行われたため、総合的なコンテンツへの評価が高まり、検索ランキングが上昇したり、新たなキーワードでの流入が起こり始めたのではないかと考えています。

マッつん

もちろん、検索経由のトラフィックはAMPページになりますので、モバイルでのトラフィックが多いサイトでは、上図のように通常のアナリティクスデータは、下降曲線を辿り、AMP用のAnalyticsデータが上昇曲線を示すということになります。

Newspaperを使ったAMPファースト導入手順

本サイトで採用しているWordPressのTheme『Newspaper』を使った、AMPファースト(常時AMP化)は、とっても簡単です。

Newspaper最新バージョンの9.6だとプラグインの『tagDiv Mobile Theme』が、WordPress公式AMPプラグインとの連携を果たしており、この2つのプラグインを有効化するだけで、ほとんどの作業が完了します。


(リンク先は英文です: https://forum.tagdiv.com/the-mobile-theme/

Themeオプションのプラグイン『tagDiv Mobile Theme』を有効にすると、WordPress公式AMPプラグインの設定画面が、通常のものから変更されます。

通常のWordPress公式AMPの設定画面は以下のような画面です。

WordPress公式AMPプラグイン

この画面が『tagDiv Mobile Theme』を有効にすると、以下のように変更されます。

WordPress公式AMPプラグインの設定画面が変更される

tagDiv Mobile ThemeによるWP公式AMPプラグインへの影響

変更されたWordPress公式AMPプラグインの設定画面には、次のような記述があります。

Template Mode
Your active theme has built-in AMP support.
(現在有効なThemeは、AMPサポートを内蔵しています。)

Native: Reuses active theme’s templates to display AMP responses but does not use separate URLs for AMP. This means your site is AMP-first and your canonical URLs are AMP.
ネイティブ:アクティブなテーマのテンプレートを再利用してAMPの応答を表示しますが、AMPに個別のURLを使用しません。つまり、あなたのサイトはAMPファーストであり、あなたの正規のURLはAMPです。

赤の下線を引いた箇所の通り、「/amp/」が使われないのですが、「link rel=”amphtml”」は「/amp/」付きのURLが自動生成されます。

ネット集客アドバイザー

固定ページには「/?amp/」が付与されますが、トップページには「link rel=”amphtml”」自体が生成されていませんでした。

注意!

結果的に、このNewspaperを使ってAMPファーストを行う場合、固定ページのAMPコンテンツは自動生成されず、tagDiv Mobile Themeプラグインを有効にすると固定ページに「カスタムフィールド:Mobil Editor」が追加され、ここに記述した内容が「固定ページのURL+/?amp/」とモバイル端末で正規URLにアクセスした際に表示されます。

クローラーには、おそらく「/?amp」付きのページがモバイル用コンテンツとして読み取られているのでしょうが、実際に閲覧されるURLには「/?amp/」は付与されていないわけですから、何か問題が起こらなければ…と、心配しています。

この辺りは、経過観察が必要ですので、また何か気づきがありましたらご報告いたします。

Validation Handling(検証処理)
All new validation errors are automatically accepted when in native mode.
ネイティブモードでは、すべての新しい検証エラーが自動的に受け入れられます。

□Automatically remove CSS rules that are not relevant to a given page (tree shaking).
(特定のページに関連しないCSSルールを自動的に削除します(ツリーの揺れ)。)

AMP limits the total amount of CSS to no more than 50KB; if you have more, than it is a validation error. The need to tree shake the CSS is not done by default because in some situations (in particular for dynamic content) it can result in CSS rules being removed that are needed.
(AMPはCSSの総量を50KB以下に制限します。それ以上あれば、それは検証エラーです。状況によっては(特に動的コンテンツの場合)、CSSルールを削除する必要がある場合があるため、CSSをツリーシェイクする必要はデフォルトでは行われません。)

□Disable admin bar on AMP pages.
(AMPページの管理バーを無効にします。)

An additional stylesheet is required to properly render the admin bar. If the additional stylesheet causes the total CSS to surpass 50KB then the admin bar should be disabled to prevent a validation error or an unstyled admin bar in AMP responses.
(管理バーを正しく表示するには、追加のスタイルシートが必要です。追加のスタイルシートによってCSS全体のサイズが50KBを超える場合は、検証エラーやAMP応答の不適切な管理バーを防ぐために管理バーを無効にする必要があります。)

松村工

これは、とても専門的な言葉が羅列されていますが、簡単に言えば「AMPコンテンツにおいて、制限を受けるスタイル定義は自動的に削除される」と言うことです。
そのため、通常ページのCSSを”style amp-custom”の中に書き込んでも良いけど「50KBを越えると削除するよ!」とも付け加えている解説ですね。

Supported Templates
(サポートされているテンプレート)
The current theme requires all templates to support AMP.
(現在のテーマはAMPをサポートするためにすべてのテンプレートを必要とします。)

ネット集客アドバイザー

Google翻訳で直訳しているのですが、要するに、無駄にカスタマイズすると壊れるよ!Themeに任せておけば、万事OK!と言うわけです。

固定ページの作業

tagDiv Mobile ThemeプラグインとWordPress公式AMPプラグインを有効にして、Themeオプション(Thema・パネル)の「モバイル・テンプレート」内にあるカスタムコードに、通常ページのCSSを貼り付ければ、投稿ページのAMPは完了します。

この時、通常ページのCSSに記載している「!important」は、削除しましょう。

しかし、固定ページは空のまま「通常URL/?amp/」ページだけが生成されます。固定ページに関しては、編集ページに追加されるカスタムフィールド「Mobil Editor」に通常ページ用エディターの記述をコピペする必要があります。

Mobil Editor

また、トップページには、「最新の投稿」が自動的に表示されます。

トップページのAMPページには、最新記事一覧が自動的に表示される

そして、この「Mobil Editor」では、AMPの制限(カスタムJavaScriptの制限など)をクリアした内容なら、通常ページの内容と異なるAMP専用のトップページを作成することができます。

AMP版のトップページ 

松村工

上のSS(スクリーンショット)が、AMP専用のトップページで下のSSが、通常のモバイル版トップページです。

通常のモバイル版ページ

松村工

左が、AMP専用のトップページで、右が通常のモバイル版トップページです。

ここがポイント

これまでのNewspaperを使ったAMP化(もしくは、レスポンシブWEBデザインのモバイル版トップページ)では、各カテゴリー別の最新記事を紹介する「Gateway page」的な存在でしかありませんでした。

そのため、SEO的には、あまりよろしくないコンテンツでしたが、「Mobil Editor」によって、任意のコンテンツを最新記事一覧より上部に掲載できるようになるため、オリジナルコンテンツが含まれるSEO的にも適したコンテンツへと生まれ変わることができました。

このように、tagDiv Mobile Themeを使った常時AMP化を行なった場合、Googleのモバイル・ファースト・インデックスの効果もあり、トップページの検索ランキングの向上が見込まれるとも考えることができます。

AMPファースト(常時AMP)では、アクセス端末によって強制的に「/amp/」が付与されない通常コンテンツと同じURLでAMPコンテンツが表示されます。

そのため、通常は【検索結果】→【AMPコンテンツ】→【AMPコンテンツ内のリンクをクリック】→【通常コンテンツのモバイル版】にアクセスという流れだったのが、【AMPコンテンツ内のリンクをクリック】→【通常コンテンツのモバイル版】→強制的に→【AMPコンテンツ】に、0秒リダイレクトされるという流れを組むようになります。

※ Newspaper Vr9.6で採用になったAMPファーストですが、パソコンで通常ページのURLに「/amp/」を加えてアクセスすると、WordPress公式AMPプラグインのみによって生成されるAMPコンテンツにアクセスすることができます。
ネット集客アドバイザー

モバイル・ファースト・インデックスは、モバイル検索でのランキングを軸にPC版の検索ランキングを決定するアルゴリズムです。

AMPファースト(tagDiv Mobile Themeを使った常時AMP化)によって、モバイルコンテンツのGoogle評価を上げることは、結果としてPC版の検索ランキングも向上し、総合的なトラフィックの増加が見込めるわけですね!

追記

2019/05/3追記

先日、本サイトで使用しているWordPressテーマのNewspaperがアップデートされました。

これによって、AMP化の仕様が変更となり、子テーマを使うと正しくAMPコンテンツが生成されないという不具合が発生。

引き続き、モバイルテーマ(ラップトップ以上の仕様よりも軽い)は機能するのですが、正規URLのままAMP化させることはなくなり、本サイトのAMPページには/?amp/が付与されるようになりました

“Newspaper”では、モバイルテーマとAMPコンテンツの切り替えを「モバイル端末でアクセスされた時のみモバイルテーマを使用する。AMPコンテンツはAMPプラグインの仕様に基づいたレイアウトを表示」「モバイル端末でアクセスされた際とAMPコンテンツの両方でモバイルテーマを使用する」「AMPコンテンツのみでモバイルテーマを使用する」の3種類で選択できます。

今回のアップデートにより、私は”Newspaper”独自のモバイルテーマの性能をチェックするため、3番目の「AMPコンテンツのみでモバイルテーマを使用する」を選択することにしました。

解析データが蓄積され、分析できるようになりましたら、また新たな記事でご報告いたします。

ads by Google