SEO対策とセキュリティで企業をバックアップします。

ITエンジニアの技術力UPをお約束します。

自動AMP(Accelerated Mobile Pages)化の障害回避 WORDPRESSでAMP表示を最適化する。

自動AMP(Accelerated Mobile Pages)化の障害回避 WORDPRESSでAMP表示を最適化する。


AMPを使うためにWORDPRESSのAMPプラグインを使う方は多いのではないかと思います。その際に発生する問題はAMPプラグイン自体が万能ではないので元のページを完全にAMPできないケースが多いのです。今回はそれを回避するための方法をお話したいと思います。

AMPのプラグインはどのような処理を行っているか理解する

AMPページはAMP htmlという書式があり、一部HTMLと互換性のタグとオリジナルのタグがあります。AMPページは元のソースHTMLを見てコードの変換を行います。必要に応じてAMPプラグインはコード変換だけではなくサポートされていないタグであれば除去を行います。amp htmlではjavascriptは極めて利用範囲が制限されているため、javascrptがエラーになるケースが多いです。このjavascript絡みのエラーがWPで利用しているプラグインがエラー発生の起因となっているケースが多いのです。

どうやってAMPエラーを抑え込むか

WORDPRESSの中では投稿ページ、カスタム投稿ページ、固定ページ、カテゴリーページ、Authorページ、管理画面などページの種類が複数あって、AMPプラグインの多くはこの種類でざっくりとAMP化するか、しないかの範囲を決めているケースが多いです。AMPは投稿とカスタム投稿、主要固定ページに絞った方が良い結果になります。それ故、WPで使うプラグインで影響を及ぼすプラグインがどの類のページの場合にアンロードされていたほうが良いか考えてゆくと設定を制御する範囲が小さくなり効果的に抑え込めるようになります。WPではプラグインのロード・アンロードの関数が用意されていますので、それをページの種類やURLに合わせてロード・アンロードを行うことができます。若干、関数で指定するプラグイン名称が何を指定したらよいか分かりづらいという問題はあります。

WORDPRESSでプラグインのロード/アンロードの制御はどうやるのが一番簡単?

ページ単位でも投稿、固定などの種類も単純にis_xxxxxなどの関数で判定しロード/アンロードできますが本当に面倒くさい。でもそれを簡単にやってくれるプラグインソフトがあります。「Plugin Load Filter」です。下記のような画面で画面の種類(URLフィルターとPost typeフィルター)とプラグインの種類に応じてON/OFFのコントロールができます。

当サイトのケースではCrayon Syntaxのプラグインが一番AMP化の際に大きな障害になっていましたが、このプラグインを使ったことでAMP化でエラーがゼロになりました。非常に便利プラグインです。赤いアイコンのプラグはOFFの意味になります。

AMP Validator(Chrome 拡張機能)でエラー検証&デバッグ修正

AMPのエラーチェックやSyntaxの検証はChrome 拡張機能を使用すると便利です。Google Search Consoleの中でも検証できますが、ブラウザにコンテンツがある状態で検証したほうがわかりやすいので、私はこれを基本に修正作業を行っています。

AMP Validatorの拡張機能はここで入手

タグ: , , , , ,

最速! 5分でわかる AMPページの簡単な試し方


AMPページは意外とハードルが高い感じで最初理解に苦しむ方が多いのですが実際にやって理解してみると単純であったりします。
やはり、実際にやってみるのが大切で、やればすぐに理解できるものと思います。



一番簡単なのは静的ページです。適当なものをチョイスして下記の無料のサービスでAMPページに変換してみましょう。

AMPの導入アウトラインを学ぶ

AMP初心者が学ぶのに最適な記事が載っています。私も少し参考にさせていただきました。体系的に簡潔にまとめられていて短時間で把握できました。

AMPの対応方法まとめ

無料のAMP変換サービス

https://www.ampcreator.com/
https://mercury.postlight.com/amp-converter/

AMPが作成できた後は。。。。どうやってクローラに認識させるの?

AMPはできたページを/DocumentRoot/amp/に配置するのがわかりやすくていいと思います。場所はもちろんどこでもいいですがおそらくクローラもampという名前を含むフォルダーをデフォルトで探すでしょう。sitemap.xmlにAMPページを含める必要はありません。アノテーションが入っているためそこから情報をインデックスさせることができます。言い換えると下記のアノテーションはきっちり入れないと重複になりますし、クローラに拾ってもらえるのが遅くなると思います。

変換元のページ(オリジナルページ)に設置するアノテーション

< link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

変換したAMPページに設置するアノテーション

< link rel="canonical" href="https://www.example.com/url/to/full/document.html">

タグ: , ,

Google Search Consoleで表示されるAMPの警告、エラーについて


AMPの取得状況をモニターしていると時折、警告やエラーについて頻繁にGSから通知メールが飛んできます。この重要では無い問題「AMPの警告、エラー」なのですが、意外にも実際AMPテストツールでチェックすると問題が無いものもあります。また、AMPの修正をしても直ぐに評価されて警告がなくなるというワケではございません。最終的には修正済みは消えるのでしょうが、正確にレポートに反映されるまでかなりの日数がかかりそうです。



実際、警告を地道にチェックして直してゆくと順調にAMPキャッシュの取り込みが日々行われてるので、エラーが起きたものを沢山放置しない限りは大きな問題はなさそうです。

タグ: , , , , ,

AMPページの正確な計測評価は難しい。


AMPページを登録しだしてから、その効果は絶大であることがよくわかったが一方でそれを正確に計測するのは難しいと感じている。



GoogleのAMP計測設置(Analytics向け)

AMP用の計測コードの設置の仕方についてGoogleでも案内はしているが実際に登録してアナリティクスで解析しようとすると大変わかりづらい状況になっている。



現段階ではっきりわかるのはリファラーが「計測ドメイン名.cdn.ampproject.org」になっているのは間違いなくAMPキャッシュをクリックして本サイトへ来ているアクセスである。



しかし、AMPキャッシュページを閲覧しているカウントではない。これはクリックして対象サイトへ飛んで来たものがカウントされているわけです。当然計測コードにはページビューを設定しているのでアナリティクスの計算には入っているだろうが、ではどれだけ入ったのかカウントがわからない。



さらに、どうやらAMPキャッシュページを閲覧するとAMPキャッシュのカウントと実サイトのAMPページのダブルカウントになっているようでこれまたややこしい。いまいち実態を掴みにくいAMPなのです。

タグ: ,

AMP関連:AMPを使うとGoogle Search Consoleのインデックス、クローラが活性化される!


最近、ampを使い始めましたが改めてGoogle Search Consoleを確認すると活発にクローラが動作するようになることがわかります。

特に驚くことが、Google Search Consoleのamp関係の警告やエラーレポートが迅速に出たり、修復を検知したりする速度が速いことに気が付きます。ampはルールに大変センシティブですが対応をきちんと素早く行えば安定してアクセスボリュームが伸びてゆくことは間違いなさそうです。

今回の記事では、このamp登録した後のGoogle Search Consoleの動きで気になった点があったのでレポートしたいと思います。

sitemap.xmlの記述はインデックスさせるURLだけに絞りましょう。

ノーインデックスさせるページや、認証が入っているようなページがsitemap.xmlにあると警告がAMPの検出メニューで頻繁に出てきます。その場合はsitemap.xmlからエラーが出たURLのブロックを削除してください。

ロゴやタイトルイメージも忘れずに登録

AMP登録するとよく出てくる警告に属性で登録されていないものがあるという類のレポートがあります。殆どはロゴやタイトルイメージの指定が無いというものです。あくまで警告なのでAMP登録されないということではありません。ただ、目を引くという意味ではあったほうが読んでくれたりクリックする確率は増えるかもしれません。

最近のWORDPRESSバージョンでは管理画面>外観>カスタマイズ>サイト基本情報>サイトアイコンの中で登録したアイコンがAMPのアイコンでデフォルト採用されます。

タイトルイメージは事前にfunctions.phpで登録しておくと良いでしょう。下記はドキュメントルート直下にlogo-title.pngをおいた場合の記述です。

add_filter( 'amp_post_template_metadata', 'amp_set_site_logo');
function amp_set_site_logo( $metadata, $post ) {
    $metadata['publisher']['logo'] = array(
        '@type' => 'ImageObject',
        'url' => site_url() . '/logo-title.png',
        'height' => 60,
        'width' => 400
        );
    return $metadata;
}

AMPに相応しいページかどうかの検討

ampページは滅多に内容が変化しないページは相応しくないと思います。その時々のトピックスやイベント等のフレッシュな情報が出るべきだと思います。また頻繁にアクセスのある記事やコンテンツが相応しいと思います。お使いのプラグイン設定やオリジナルのプログラムの中でampするべきページのみamp化するように制御してください。改造は面倒なので場合によってはカスタムポストタイプで投稿したい種類のものだけAMP化する等の工夫が必要かもしれません。よくあるプラグインはページ単位でのAMPのON/OFFができないので使い方に工夫が必要です。

タグ: , , ,