AMPページがフォーム対応「amp-form」拡張機能!ECサイト系に朗報です。

AMPフォーム

よしみです。

2016年11月8日火曜日にdevelopers-jp.googleblog.comより、AMPページがフォームに対応のリリースがありました。

SEO対策の一環の高速化としてAMP対応は賑わっていますが、フォームに対応していなかったということで結果論として、記事系やニュース系のコンテンツのみ有効であるという記事が多かったですが、とうとうAMP HTMLで入力フォームがサポートされるようになったのです。

AMP導入でアクセスアップさせるために最低限おさえておきたいポイント

forminput elementsが使用禁止となっていますが、form関連タグがサポート対象になります。

AMPページがフォームに対応のリリース

Google Developers JapanのAMP がフォームをサポートによると

「amp-form」拡張機能を使用すると、<form>要素と <input>などの関連要素を使って AMP ドキュメント内にフォームを作れるようになります。これによって、e コマースの詳細ページで製品の色を選択したり、ニュースレターを購読するためのメール フィールドを用意したり、読者を引き付けるために記事の中でインタラクティブな投票を行ったりできるようになります。
引用:AMP がフォームをサポート

とあります。

ZOZOTWONに続いて、ネットショップ系や不動産系で1枚でフォームまで組み込んでいるページなどは試す価値ありますよね。

AMP対応ページでフォームを実装するには

formタグでしたが、amp-formへの拡張が必要になります。もちろんCSSの変更も必要になります。

とはいえ、具体的な処理は<head>〜</head>に追記します。

<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>

フォームのサンプルコードです。

<form method="post" action-xhr="https://example.com/subscribe" target="_blank">
    <fieldset>
        <label>
            <span>Your name</span>
            <input type="text" name="name" required>
        </label>
        <label>
            <span>Your email</span>
            <input type="email" name="email" required>
        </label>
        <input type="submit" value="Subscribe">
    </fieldset>
    <div submit-success>
        <template type="amp-mustache">
            Subscription successful!
        </template>
    </div>
    <div submit-error>
        <template type="amp-mustache">
            Subscription failed!
        </template>
    </div>
</form>

AMPの書き方がわからないという場合は、https://ampbyexample.com/を参考にすると良いと思います。https://ampbyexample.com/には実際に動くコードがまとまっているのでかなり参考になります。がしかし、英語です。
参考ウRL:https://ampbyexample.com/components/amp-form/

AMP対応のメリットおさらいと「amp-form」の使いところ

AMPのおさらいをしてみましょう。

  1. 高速化により、ストレスなくサイトを見ることができる
  2. 検索結果にカルーセル表示がされると、ユーザーの目に止まりやすくなる
  3. GoogleからのおふれなのでSEO的に優位になる可能性がある

(3)は都市伝説的要素ではありますが、(1)(2)はダイレクトにユーザーに影響を与えます。ページ表示が遅いサイトよりサクッと表示されるページの方がいいはずです。検索結果に画像付きで表示されたらイメージもできるので、クリック率が上がります。結果、流入数も増えGooglより高評価を得て、よりSEO的にユーザーの目にとまるようにしてくれる。という生のスパイラルが働くはずです。

では、AMPのフォーム対応(amp-form拡張機能)はどのようなページ構成にすべきだろうか。となります。

ランディングページでは、コンテンツ下部にお問い合わせフォームを設置している構成が多いですが、そのように作り込んでも良いと思います。効果の関係性は以下のようなイメージです。

  1. 検索結果にカルーセルで画像表示の物件ページ・・・クリックされる
  2. 表示結果の高速なページでストレスレス
  3. クリック率、滞在率が上がりGoogleより高評価・・・SEO的に優位になる
  4. (1)、(2)、(3)のスパイラル
  5. ページ下部にCVポイントがあるので、遷移不要でスムーズなCV

formamp-form拡張機能がサポートされたことを考えるとユーザーがストレスレスで利用する構成は上記のような1枚ペラのランディングページ型であると考えることも可能です。でなければわざわざamp-form拡張機能をサポートする必要はありません。

このAMPのamp-form拡張機能によって、さらなる内部的なSEO対策が必用になってくるのですが、アクセス数が伸びれば伸びるほど、CV数も上がっていくはずです。結果、事業の成果につながるはずです。

最後に

AMPのフォーム対応はWebマスターがいる企業であれば運営サイトで導入されていくと考えられます。ECサイト(ネットショップ、アパレルなどなど)や不動産は当然のように動き出すことでしょう。静的なhtmlであれば少し工数がかかるかもしれませんが、SEO対策としての高速化の評価にも繋がりますので、導入検討はしていただきたいです。

WordPressであればAMP対応のプラグインがあるので比較的簡単にAMP対応は可能です。が、しかし、100%サポートしているのかといえば、現時点(2016/12)ではそうでもないはずです。

つい最近、SEO対策でどこぞのキュレーションメディアが炎上しておりましたが、あのような叩かれるような施策を行わず正攻法でやっていくことが事業にリスクを与えず成長させるものだと信じています。ユーザーへの最適なコンテンツを最速に、ストレスなしで提供できるよう頑張っていきましょう!

参考URL:ACCELERATED MOBILE PAGES PROJECT

Webを事業の成果につなげたいとお考えであれば、ぜひ一度ご相談ください!

ソフィーリサーチ&コンサルティングは、事業の成果を伸ばすため、実践的な戦略思考力と実行力で徹底的に成果を追求し、クライアントのパートナーとしてWebコンサルティングをさせていただきます。