Newspaper10にAMP導入するときの覚書

こんにちは。ガクマーケティングの井上です。

このブログで使っているWordPressテーマ「Newspaper10」。先日からAMPでの表示をはじめました。なかなかトラブったので、その内容をメモしておきます。

粗雑にQ&A形式です。お許しください！

ちなみに、AMPを使うには、Newspaper公式が用意してくれているAMP対応プラグインが必要です。Newspaper管理画面からインストールできるので、まずはそちらをインストールしておいてくださいね。

»Newspaper10の公式デモページはこちら
»最安値Newspaper10購入ページはこちら

Q.『NewspaperにAMP入れたら、トップページの構成は変更できないの？』

A.たぶん、できないと思います。いろいろ試したけどダメでした。

表示する記事の総数や、大きく表示させる記事の数などは設定できます。ThemePanelのMobileTheme＞GridsとLatestArticleの数字を調節すれば、トップページの記事数に反映されると思います。

私の場合は、トップページはAMP化しないことにしました。カテゴリーごとに記事をまとめたり、バナーを設置したりしたいので。

この辺りのページごとのAMP化設定は、AMPプラグインの設定画面から変更できます。私は、トップページと固定ページは、AMP化していません。固定ページはAMP化すると中身が表示されなくなっちゃったのです（対応方法よく分からなかった）

もし、AMPでトップページの構成を変更できる人がいたら教えてください！

Q.『NewspaperにAMP入れたら、ヘッダーとフッターが変な見た目になった』

A. AMP専用の設定が必要です。

Newspaperの管理画面＞ThemaPanel＞MobileThema＞Header　Footerのところから、変更できます。あまり高度な設定はできませんが、背景色やロゴは設定できます。

Q.『AMPでGoogleアナリティクスってベット設定が必要なの？』

A. 必要です。下記のコードのうち、UA〜〜〜のところをご自分のアナリティクスIDに置き換えて、設定する必要があります。

 {
            "vars":{
                "account":"UA〜〜〜〜〜"
            },
            "triggers":{
                "trackPageview":{
                    "on":"visible",
                    "request":"pageview"
                }
            }
        }

貼り付ける場所は、Newspaper管理画面＞ThemePanel＞MobileThema＞AMP Analyticsのテキストボックスに貼り付けてください。

そして、最後にアナリティクスのリアルタイム画面で計測することをお忘れなく！

Q.『NewspaperのAMPって、Googleタグマネージャーに対応しているの？』

A. わかりません。

headとbodyにそれぞれコードを追加しなきゃいけないんですけど、それをどこに書けばいいのか、私はわかりませんでした。。。。

ちなみに、アナリティクスは同じプロパティーのまま計測できます。タグマネージャーは、別のコンテナを作らないと計測非対応だそうです。

なので、私はPCはタグマネージャー。モバイルは直アナリティクスのみの計測としています。クリックのイベント拾うなら必要ですが、まぁある程度はアナリティクスでも分析できるので良しとしています。

Q.『Newspaperって表示速度遅めなんだけど、AMPにしたら早くなった？』

A. なりました。

Googleのスピードインサイトだと、スコア20から79くらいにはなりました。大満足です。

AMPは構成が固定化されます。ランキング記事パーツなど好きなように配置はできません。それ以上に、今はページ速度の方が大切と思って、AMPを使っています。

Q.『NewspaperでAMP導入したら、エラーとか起きない？』

A. 今のところ起きてません。

私も、AMPはサーチコンソールがエラーを吐きまくる印象があるのですが、今のところ大丈夫です。画像のサイズについては警報が出ていますが（もっと大きいの使って！というエラー）、致命的なエラーは1つも出てきません。

このあたりは、クローラーの気分次第なので、もう少し放っておくとエラーが出てくるかもしれませんが・・・

まとめ：Newspaper10にAMPを導入する覚書

ひとまず、私がトラブったことを思い出せる限りQ&Aにまとめました。また思い出したら追記していきます。

最後に、参考にさせていただいたURLを貼っておきます。この記事で解決できなかったことや、インストールの基本的なやり方などがわかりやすく解説されています。

»Newspaper10の公式デモページはこちら
»最安値Newspaper10購入ページはこちら