WordPressでおすすめのAMPプラグイン(AMP for WP – Accelerated Mobile Pages)のカスタマイズ

AMPのプラグインを入れてオンにすればOKだよ、と書いているサイトがありますが、実際はバリバリとカスタマイズしないと格好悪かったりユーザビリティに問題があったりして使い物になりません。!すくねえ的には(*´∇`*)

とはいえ、プラグイン化されているため、非エンジニアでも対応できるぐらい簡単なものですので、試してみましょう♪

Ampのプラグインは2つ必要

まず、AMPのプラグインを入れます。

12436288584_94d6bc46d2_b.jpg
This plugin adds support for the Accelerated Mobile Pages (AMP) Project

AMPのプラグインはAMP化するだけです。これだけではデザインなどが崩れます。そこでカスタマイズをします。プログラミングをして実装できる方はコードで実装すればいいと思います。でも、カスタマイズ用のプログラインが何種類かでているため、そのプラグインを使うのも手です。

AMP for WP – Accelerated Mobile Pagesが人気でおすすめです。頻繁に更新されています。

12436288584_94d6bc46d2_b.jpg
AMP for WP automatically adds Accelerated Mobile Pages (Google AMP Project) functionality to your WordPress site. AMP makes your website faster for Mobile visitors.

その前にAMPのプラグインだけ入れて不具合がないか確認してみましょう。うちの場合は不具合がありました。

おすすめ記事

結婚・ネット婚活サイト・FACEBOOKアプリでおすすめで安いのは?比較と口コミなら「あいおんな」?

Ampのプラグインを入れると、画像が表示されない

Ampのプラグインを入れると、記事中の画像がまったく表示されなくなりました。また、プラグインで指定しているアイキャッチ画像もすべて表示されませんでした。バナーも表示されないです。

AMPをプラグインをいれても、実際に表示が切り替わるまでには時間がかかるためこの状態をユーザーに見られることはありません。焦らないで対応すればよいでしょう。逆にいうとタイムリミットがあるので、それまでに対応しなければなりません。

いくつかの原因を疑ったのですが、lazy load系のプラグインが原因でした。プラグインをオフにすると表示されました。

具体的にはUnveil Lazy Loadを使用していました。

簡単に解決できてよかったです。

PS:別プラグインLazy Loadは平気でした。

Ampのプラグイン有効化ののち、リンクの確認方法

モバイルからアクセスしてもしばらく表示が切り替わりません。そのため、AMPのアドレスにアクセスして事前に確認します。

リンクの末尾に

/amp

をつけます。/amp/のアドレスにアクセスします。

さらに、開発者用のコマンド#development=1を追加します。

/amp/#development=1

というアドレスになります。これだけでは何も変更されません。

Chromeなら右クリック > 検証 > Console

AMP validation successful.

が追加されています。ちなみに、1行目は#development=1モードにしなくてもAMPページになっていれば表示されています。
Powered by AMP ⚡ HTML – Version xxxxxxx

サイトに Accelerated Mobile Pages は見つかりませんでした

次はGoogle Search Consoleにログインして、検索での見え方 > Accelerated Mobile Pages

しかし、「サイトに Accelerated Mobile Pages は見つかりませんでした」と表示されます。

AMP化には時間がかかります。1日以上放置して待ちます。

先に他のプラグインを導入して見栄えやユーザビリティを整えておきます。

AMP for WP – Accelerated Mobile Pagesを導入するメリットと使い方

AMP for WP – Accelerated Mobile Pagesを導入するメリットはいくつかあります。

まず、日付が作成日ではなく更新日になります。AMPのプラグインは作成日ですが、AMP for WP – Accelerated Mobile Pagesは更新日です。基本設計が更新日で表示しているため大変助かりました。特に指定することはありません。

個別ページごとに記事のAMP化するか否かを指定できます。デフォルトはAMP化されるので、除外してあげます。(たとえば、あいおんなの場合、アマゾンのようなレビューシステムを用意しています。AMP化するとレビューシステムは表示がおかしくなって使い物にならないのでAMP化していません)

投稿ページ > Show AMP for Current Pageで切り替えられます。

CSSでデザインできます。デフォルトのデザインはあまり好みではないため、結構カスタマイズしています。
SimplicityというテーマのAMP化に近い形にしています。

AMP > Getting Started > Design > Custom CSS

Custom CSSはcssの警告までしっかりと表示してくれる優れものです。

見出しや目次、マーカーぐらいは装飾してあげました。目次はTable of Contents Plusのプラグインを使用しています。

h2 {
    font-size: 22px;
    background-color: #f0f0f0;
    padding: 1em;
}
#toc_container{
    background-color: #f0f0f0;
}
.marker {
	background: linear-gradient(transparent 30%, #f0e68c 30%);
	font-weight: bold;
}

あと、ナビゲーションとリンク色ぐらい変えておきましょうか。

.nav_container{
    background-color: #29292c; 
}
a{
    color: #589992;
}

他にいじった設定は次のとおりです。
AMP > Getting Started > Analytics
コードを確認したところ、通常の方法でHeader.phpなどに書いたアクセス解析はAMPページでは削除されています。プラグイン用のGoogle Analyticsのコードを指定します。

AMP > Getting Started > Menu > link
WPテーマのメニューもなくなったため、AMP用のものを指定してあげます。

記事下に固定の海外のソーシャルアイコンが表示されたため、オフにしました。
AMP > Getting Started > Single > Sticky Social Icons

記事下のソーシャルブックマークの間に、プロフィールと前後の記事のリンクが表示されてしまいます。記事の直下にソーシャルブックマークを置きたかったため削ります。

AMP > Getting Started > Single > Next-Previous Linksをオフ

AMP > Getting Started > Single > Author Bio in Singleをオフ

なお、ソーシャルブックマークはFacebookはIDが必要です。はてなブックマークとPocketはありません。Lineはなぜかちゃんとあります。不要なSNSは下記から消せばいいです。
AMP > Getting Started > Social

文字が英語になっている箇所があるので、必要あれば翻訳パネルで日本語にします。
AMP > Getting Started > Translation Panel

AMP for WP – Accelerated Mobile Pagesはアドセンスにも対応しています。

インデックスに登録されたAMPページ数

設定が終わり、1日たったのち、Google Search ConsoleのAccelerated Mobile Pagesを確認すると、

インデックスに登録されたAMPページ数

が増えます。うちのサイトでは2のみ。つまり、2記事だけAMP化が成功したってことですね。アクセスが多めの記事にアクセスするとAMP化をスマホから確認できました。でもまだAMP化されていない記事の方が圧倒的に多いです。しばらく気長に待ちましょう。

HTML タグの禁止された用法、無効な用法(重大な問題)

さらに次の日、AMP化されたページはどんどんと増えていきますが、エラーがでました。

HTML タグの禁止された用法、無効な用法(問題の重大性: 致命的)のエラーがでました。

エラーがきましたよ!(((o(*゚▽゚*)o)))

このようにプラグインを入れただけで終わるわけがないのです。

Accelerated Mobile Pages > HTML タグの禁止された用法、無効な用法(問題の重大性: 致命的)

で該当ページがわかります。

さらに、クリックすると、AMPページをテストができます。このテストをすると、どのタグがいけなかったかまでわかるんですね。

このエラーがでている記事は確認すると、案の定amp化されていません。エラーを修正します。

無効なAMPページです

詳細をみると、

amp タグ「deltime」は許可されていません。

deltimeとは
del datetime
のことなのです

打ち消し線のタグを変更します。

<del datetime="2016-12-22T11:21:25+00:00">文章</del>

使えないのかな、と思ったらdatetimeを削除するだけで通りますね。

<del>文章</del>

原因自体は3分でわかりましたが、修正時間はもっとかかります。このような地味な修正が必要なのですね♪

修正して再度AMPのテストをすると

有効なAMPページです

に変わります。その下に「googleに送信」というボタンがあります。このボタンを押した方がクロールが早くなるのでしょう。ぽちっと押します。次はどんなエラーがくるのでしょうか。目が離せませんね!

Fix errors on your AMP pages

サチコ(Google Search Console)にログインすると、他のサイトでまたFix errors on your AMP pagesのエラーが発生。

See Amp Errorsをクリック。

Accelerated Mobile Pages > Invalid layout property found in AMP tag (Critical issue)という問題が発生しました。

実はアイキャッチ画像の横幅を指定696px以上という指定があります。

1枚だけ小さい画像のサイズのアイャッチ画像が公開されていました。早速、画像を差し替えてエラーチェックします。こんな風な問題が起こるんですね。

WordPressでAMPプラグインを使うと、アフィリエイトリンクは張り替えの必要があるの?

おまけですがWordpressの場合はAMP用のアフィリエイトリンクを使う必要がありません。つまりリンクの張り替えは不要です。AMPのプラグインを入れれば、自動変換される感じですね。

一応、不安だっため、2つのASP担当者経由でエンジニアさんに確認を取りました。参考程度なのでアフィリエイトリンクについては自己責任でご判断ください。

ご参考になれば嬉しいです(*´∇`*)

この記事がよかったら「いいね!」「シェア♪」をお願いしますヽ(=´▽`=)ノ

医療脱毛でおすすめで安いのは?比較と口コミなら「あいおんな」 脱毛サロンでおすすめで安いのは?比較と口コミなら「あいおんな」