AMP 対応(プラグインでは実現できない多機能 AMP)

2016年12月14日

AMP Project

Luxeritas はボタン一発で簡単に AMP に対応できます。

Luxeritas の AMP 対応は、プラグインでは絶対に不可能な機能が盛りだくさんです。

Luxeritas ならではの AMP の特徴

Luxeritas の AMP の特徴

  1. オリジナルのページと AMP のページの見た目がほぼ同じ
  2. 子テーマの AMP 用スタイルシートで自由に見た目が変えられる
  3. 固定フロントページも AMP 化できる(プラグイン等ではほぼ不可能)
  4. ページ単位で AMP の ON/OFF が切り替えられる
  5. SNS カウントキャッシュを ON にしてれば、AMP のページでも SNS カウントを表示できる
  6. コンテンツやサイドバーに Google Adsense がある場合、自動的に AMP 用の Adsense に置換
  7. 子テーマの「アクセス解析」に Google Analytics があれば、自動的に AMP 用の Analytics に置換
  8. コンテンツに AMP で禁止されているタグ(主に Javascript)がある場合は、自動的に削除
  9. 上記以外のタグは自動的に AMP 用のタグに自動置換
  10. img タグでトラックキングするタイプのアクセス解析(<noscript><img src="~" 等が書かれていれば)も自動的に amp-pixel に置換
  11. AMP 専用ウィジェット領域がある
  12. プラグインが挿入するコンテンツの表示/非表示切り替え
  13. コメントリストの表示/非表示切り替え
  14. <!–nextpage–> でページが分割されている場合、2ページ目以降も AMP 化できる

Luxeritas の AMP 例

オリジナルのページとほぼ同じ見た目で AMP 化できます。
細部まで見ないと違いが分からないレベルです。

↓ 当方が運用してる「A Gain Sierra」の元ページ

http://again.lunaclear.com/knowledge/science/t5111/

↓ 「A Gain Sierra」 の AMP Project にキャッシュされてるページ

https://cdn.ampproject.org/c/again.lunaclear.com/knowledge/science/t5111/amp/

↓ Goolge での検索結果(3つとも A Gain Sierra)

http://thk.kanzae.net/wp/wp-content/uploads/2016/12/amp-search-example-352x565.png

AMP が有効化どうかのチェック

Luxeritas では、

パーマリンクが静的 URL の場合は
・ http://www.example.com/amp/

パーマリンクが動的 URL の場合は
・ http://www.example.com/?post=1&amp

が AMP のページになります(投稿・固定ページのみ)。

↓ ログインした状態であれば、元ページに AMP へのリンクが表示されるので、それをクリックすれば AMP のページを確認できます。

AMP ページへのリンク

また、ページが、ちゃんと AMP に対応できてるかどうかは、↓ Google の AMP テストで確認してください。

Google Console AMP テスト

↓ このような結果になれば OK です。

AMP テストの結果

AMP の有効化と無効化

AMP を有効化するには、カスタマイザーの「Headタグ」にある ↓ 以下にチェックを付けます。

AMP 設定画面

AMP では Javascript が使えなかったり、その他にも禁止タグがあったりと制約が多いです。

あるページでは Javascript を使いたい場合など、AMP を無効にしたいページがあれば、ページ単位で ON/OFF を切り替えられます。

投稿・固定ページの編集画面で ↓ のチェックを付けると、そのページだけ AMP を無効化できます。

ページ単位で AMP を無効化する設定

各種の対応状況

対応済み(自動的に AMP 用のタグに置換します)

  • Google Adsense
  • Google Analytics
  • アニメ GIF
  • WordPress 標準の埋め込みプレイヤー動画
  • WordPress 標準のメディアギャラリー
  • Youtube 動画
  • vine の 6秒動画
  • Twitter のツイート貼り付け
  • Facebook の貼り付け
  • Instagram の貼り付け
  • その他の iframe(Google Map 等)

注意事項

  • ウィジェットに FORM を設置した場合、自動的に amp-form に置換しますが動作しない可能性があります
  • ウィジェットに「検索フォーム」を設置しても動作しません(設置自体は可能)
  • プラグインが自動挿入するコンテンツの見た目が崩れる場合は、「プラグインが挿入するコンテンツを無効化する」にチェックを入れて表示を無効にするか、もしくは、自分で AMP 用スタイルで見た目を整えてください。