SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

LINEフロントエンドレンジャーのWeb開発術

Google AMP No Standalone対応前に知っておくべきポイント(2017年5月版)

LINEフロントエンドレンジャーのWeb開発術 第8回


  • X ポスト
  • このエントリーをはてなブックマークに追加

実装時の注意点

1.特別枠のカルーセルUIに対応しているのは記事コンテンツのみ

 「Googleの検索結果UIについて」でお話したとおり、特別枠の表示は「記事タイプ」の構造化データをマークアップしたページが対象となっています(2017年5月現在)。今後は、レシピやECなどの分野も対応する予定のようですが、対応時期は未定なのでご注意ください。

 現在、テストが進められているもの、テスト済みのものは下記の5つとなります。

  • article
  • recipe
  • review
  • sports
  • video

2.Standalone AMPの注意点

 エンジニアであれば「Standalone AMPで実装したい!」という願望がでると思いますが、まだ様子を見たほうがよいというのが私の見解です。SPA(Single Page Application)と同様、「JavaScriptレンダリングのコンテンツをGoogleは認識するのか?」という問題が発生します。

 AMP HTMLの画面の描画はJavaScriptに依存しています。Google公式の見解ではインデックスに問題ないとされており、私自身も問題はないと予測しています。

 しかし、SPA(Single Page Application)を使った開発では「サーバーサイドレンダリングが必須」という風潮があり、「JavaScriptレンダリングのみではSEO効果が出ない事例がある」という噂もあるようなので、SEOを重点においた対応の場合は「Standalone AMP」は控えておいたほうがよいでしょう(検証が必要になる項目です)。「Standalone AMP」をGoogleに認識させる際は注意が必要です。

 『ページの検出、配信の準備をする』(AMP)のとおり、「Standalone AMP」と「No Standalone AMP」で設定方法が異なります。

 しかし、ページの作り方が複雑化すると、「Standalone AMP」で作っていたつもりが「No Standalone AMP」として認識されてしまうことがあります。

 複雑化した例は下記の(3)になります。

(1)一般的な「No Standalone AMP」の実装例(PCとSPで共通のURLを利用)
PC & SP
<link rel="amphtml" href="https:/example.com/amp/page1">
AMP
<link rel="canonical"href="https:/example.com/page1">
(2) 一般的な「No Standalone AMP」の実装例(PCとSPでそれぞれ異なるURL)
PC
<link rel="amphtml" href="https:/example.com/amp/page1">
<link rel="alternate" media="only screen and (max-width: 640px)" href="https:/example.com/sp/page1">
SP
<link rel="amphtml" href="https:/example.com/amp/page1">
<link rel="canonical" href="https:/example.com/page1">
AMP
<link rel="canonical"href="https:/example.com/page1">
(3) SPだけ「Standalone AMP」で実装した場合

 Googleの判定上「No Standalone AMP」と同様の扱いになるため、別途AMP用のURLを用意して認識させる必要があります。また、SPとAMPのURLでlink要素の設定を出し分けする必要性がでます(Googleのモバイルファーストインデックスが適応された場合、判定方法が変わる可能性あり)。

PC & SP
<link rel="amphtml" href="https:/example.com/amp/page1">
AMP
<link rel="canonical"href="https:/example.com/page1">
(4) 一般的な「Standalone AMP」の実装例
PC & SP & AMP
<link rel="canonical"href="https:/example.com/page1">

 今回は紹介できませんでしたが、他にも無数の組み合わせがあるので対応する際はお気をつけください。

3.Google Analyticsは必ず設定しましょう

 「作業前に知っておくべきAMPの特徴」でお話したとおり、実装後に測定数値に変化が生じます。

 つまり、AMP実装でもっとも重要なのは、公開後の効果測定といえます。Google Analyticsの設定は必ず行いましょう。

 AMP自体が生まれて間もない技術です。そのため、まだWeb上に参考になるような効果を示した情報は少ないです。効果測定を行い、UI・UXの改善をPDCAサイクルで回していき、問題がある場合はCLOSEするなどの判断が必要になります。

  • 目標数値や測定方法の定義。
  • Google Analyticsでどのようなクリックログをとるかを定義。
  • 効果測定を継続的に行い、UI・UX改善を継続するか? CLOSEするかの判断を行う。

4.Debugツールでしっかりチェックしましょう

 AMPは非常に繊細なものです。AMP HTMLの記述や、構造化データ(JSON-LD)、AMPの検出設定にミスがあった場合、GoogleがAMPページを認識できずに通常ページとして扱ってしまいます。

 リリース前のチェックはもちろん、リリース後もGoogle Search Consoleでエラーがでていないかを監視する必要性があります。下記のデバッグツールでAMP HTMLの構文チェックを必ず行いましょう。

最後に

 今回は「No Standalone AMP」実装前に知っておきたいポイントについてお話させていただきました。AMPはまだ生まれて間もない仕様です。そのため、頻繁に機能追加や仕様変更が行われています。また、Googleの検索結果UIも高い頻度で変更が入っています。来年実装が予定されているモバイルファーストインデックスで、状況が一変する可能性もあります。

 2017年5月現在の情報をまとめましたが、今後さらに進化して状況が変化すると思われます。実際の業務でAMP実装を行う際に参考にしていただければと思います。

 LINE株式会社ではフロントエンドエンジニアを募集しています。私たちと一緒にプラットフォーム・グローバル展開を発展させていきたい方はぜひご応募ください。

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
LINEフロントエンドレンジャーのWeb開発術連載記事一覧

もっと読む

この記事の著者

姜 勝陽(LINE株式会社)(キョウ ショウヨウ)

LINE株式会社に在籍しているフロントエンドエンジニア。LINE内Webアプリを担当。2002年からSEOの情報を趣味の一環として収集している。最近はサーバーサイドレンダリング無しで、Single Page ApplicationをGoogleに認識させる為の検証を進めている。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/10221 2017/06/30 11:17

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング