ウェブ担当失格!? AMPプラグイン導入だけでAMP対応したつもりにならないために知っておきたいこと5選

既存ページをAMP対応ページにするのはとても手間がかかります。JavaScript や フォーム関連タグの全消去、外部CSSやインラインstyle属性値の消去、<img>、<iframe>タグの全変換 … これだけでも十分シンドイ作業ですが、残念ながらこれらの作業はほんの一部にすぎません。完了までのタスクは山積みです。

しかし、ウェブサイト(ホームページ)が幸運にもWordPressで作られているなら、バックアップをとってからAMPプラグインをインストールするだけでアンプ対応ページが生成できます。AMPプラグインは無料というのが信じられない程に素晴らしいプラグインで、WordPressのAMP対応のデファクトスタンダードになっています。

そのため「WordPressサイトならAMPプラグインを入れるだけ!」と解説されることもありますが、個人のブログでの話で、企業や店舗のウェブサイト(ホームページ)では不十分です。AMPプラグインをインストールしただけでは何が不十分なのかをしっかり把握して、カスタマイズする必要があります。

そこで、この記事ではAMPプラグインをただインストールしただけでは対応しきれないことの中でも特に重要なことをまとめてみることにします。なお、以下は2016年9月末時点でのAMPプラグインにもとづいています。今後のアップデートにより解消されることがあります。

 

1. 画一デザイン問題 - 世界中のウェブサイトと丸かぶり

AMPプラグインをインストールしただけの状態(以下、デフォルトと略します)で、生成されたAMPページは(強制的に)全て統一デザインになります。レイアウト、配色、フォント・・・全て同じで、下記のような問題が生じます。

  • 世界中のウェブサイトと丸かぶり
  • 通常ページとAMPページで全く異なるデザイン

世界のウェブサイトの4分の1はWordPressで作られているという調査データもある程、WordPressはありとあらゆる用途で使用されています。そのため、AMPプラグインのデフォルト状態では星の数ほどあるウェブサイトとデザインが「丸かぶり」します。ざっくばらんに言うと、胡散臭いサイト・違法サイト・成人向けサイト…とも同じデザインになってしまうので、企業・店舗サイトとしては避けたいところです。

もう一つの問題が、AMPページと通常ページでデザインがあまりにも違いすぎることです。全く違うデザインのため、ユーザーは「あなたのウェブサイトにアクセスしている」ということに気がつかないかもしれません。

ちなみにインストールしただけのAMPページは以下のような感じです。エンジニアが好みそうな青ベースのシンプルなデザインです。決して悪くはないのですが…。

[追記] 2016年10月6日にリリースされたWordPress AMP Plugins バージョン0.4 から、配色変更ができるようになりました。(詳細は 【更新情報】WordPress AMP プラグインでデザインのカスタマイズが可能になりました を参照ください)

AMPプラグインの制作事例 デフォルト

2. メイン記事の他に何もないページ

AMPプラグインのデフォルト状態では、下記ページのように純粋に投稿された記事を表示するだけです。
https://www.craneto.co.jp/archives/499/amp/

企業や店舗のでは、「記事を読み終えたら終わり!」ではなく、ウェブサイト内を巡回してもらうための工夫をしていることでしょう。「おすすめ商品」、「ランキング」、「最近の投稿」、「キャンペーン・セール情報」…何もありません。フッター部の定番である「会社情報」「お問い合わせ」といったリンクも消えます。

投稿記事以外のコンテンツを追加するには、各自でカスタマイズする必要があります。AMPプラグインはとても高い拡張性があるのですが、管理画面からはなく直接PHPファイルを編集する必要があります。そのため、WordPress特有のフィルター・フック、PHP、HTML等の知識が必須となります。

 

3. Google Analytics が無効

AMPでは従来のJavaScriptは一切動作しないため、Google Analytics をはじめ多くのアクセス解析ソフトは無効になります。AMPプラグインをインストールしただけでは、AMP対応ページがどれほど閲覧されたかさえもわかりません。

AMPページ専用の Google Analytics を設定する必要がありますが、AMPプラグインではPHPファイルを直接編集する必要があり、PHP、HTMLの知識が必須となります。

※サーバログを解析するアクセス解析ソフトのようにJavaScriptでないものは動作します。

 

4. 広告タグが無効

従来のJavaScriptが動作しないため、アクセス解析と同様に Google Adsense のようなJavaScript系の広告はすべて無効になります。アドネットワークの広告タグはまず動作しないと思って問題ないです。AMPページ専用のAdsenseタグを設置する必要がありますが、AMPプラグインではソースコードを直接編集する必要があり、HTMLとPHPの知識が必須となります。

※AMP専用タグがまだ用意されてないアドネットワークもあります。

 

5. ソーシャル拡散

Facebookの「いいね!」「シェア」やTwitterの「ツイート」ボタンもJavaScriptが必須のため、従来のタグはAMPページでは無効になります(※)。AMPページ専用のタグを設置する必要がありますが、ソースコードを直接編集する必要があり、AMP JS、AMP HTML、PHPの知識が必須となります。

※画像とリンクのみで構成した独自のボタンは有効です。

 

以上となります。
どれか一つは該当項目があったのではないでしょうか。

 

AMPプラグインは無料というのが信じられない程に素晴らしいですが、インストールしただけでは投稿データをAMP化するだけのものです。実用レベルに拡張するには、(管理画面での簡単操作ではなく)必ずソースコードを編集することになります。

ソースコードを編集にあたってはWordPressのファイル構造やフィルター・フック、PHP、HTML、CSS、AMP HTML、AMP JS といった知識が必須となります。知識なしにPHPファイルを編集すると、サイト全体が閲覧不能になることもあるので、必ず専門知識を持った人に依頼しましょう。

 

ちょこっとPR

もちろん弊社でもAMPインストール後のカスタマイズを承っておりますので、お気軽にお問い合わせください。WordPressの利用状況やご要望(※1)によりますが、上記程度ですとアルバイトスタッフ1ヶ月分の給与ほどの予算で対応可能です。

制作依頼・お見積もりはこちら

カスタマイズ事例紹介
このホームページでもカスタマイズを実施しており、通常のモバイルページとAMP対応ページのデザイン等を違和感ない形に整えています(クリックで実際のページを確認できます)。

Before

AMPプラグインの制作事例 デフォルト

After

AMPプラグインの制作事例 カスタマイズ

※1
古いバージョンや過剰カスタマイズされたWordPressではAMP対応が不可能な場合がありますので、事前診断を実施いたします。小さな会社につき先着順、代理店様からの大型発注時にはお待ちいただくこともございます点、ご了承ください。