前にブログで書いたAMPですが、続々と後続の情報が出てきています。中でも気になったのがAMP記事とHTML記事の関係性。既にある記事をAMPへと対応させた場合、HTMLベースの記事とAMPベースの記事の両方がWEB上に存在することになります。
こうなってしまっては…重複になるんじゃないの…？AMP記事って見つけてもらえるの…？
今回はそんな疑問を解決するタグと設置方法の紹介です。
AMP専用のタグがある！
AMPに対応したことを知らせるために、Googleは専用のタグを準備しています。実際に見てもらった方が早いと思うので見てみましょう！
<link rel="amphtml" href="http://exmple.com/">
こちらです。これがAMP記事の存在を知らせるタグです！link要素を使ったタグですね。
使い方としてはモバイルアノテーションの様な感覚で使って頂ければ殆ど間違いはないかと思います。…なんて言われてもわからないですよね！私もです！
ですので、実際にsampleサイトさんを使って架空のAMPページのタグを埋め込む方法をやってみましょう！
まず。パソコンユーザー向けのページが、スマホで見た時にAMP対応されているとします。
PCページURL：http://exmple.com/
AMPページURL：http://amp-exmple.com/
実際には存在しないページなので今回リンクは繋いでいません。さらにわかりやすいよう色分けをしておきましょう。
さて、こんなページがあるとしたら、PCページのhttp://exmple.com/に上記で紹介したタグを入れます。
<link rel="amphtml" href="http://amp-exmple.com/">
この時href属性部分に指定するURLはAMP対応したページURLであるhttp://amp-exmple.com/にします。
さらに、重複を防ぐためにhttp://amp-exmple.com/には下記canonicalタグを設置します。
<link rel="canonical" href="http://exmple.com/">
canonicalに指定するのはPCページのhttp://exmple.com/のURLです。
わかりましたか？？
とはいえ、言葉で説明されてもわからないと思うので、図で見てみましょう。
ざっとこんなイメージです。モバイルアノテーションとあまり相違がないですよね。これなら簡単に使えそうです！
既にモバイルページがあるときは？？
ここで更に疑問なのは、モバイルページが既にHTMLで存在している時です。レスポンシブなら特に問題ないのはわかると思うのですが、別URLで既にモバイルサイトを作っている時はタグどうするの！？ってなりますよね。そんな時は下記の図の様な構成を取ることで、Googleは正しくサイトを認識してくれます。
ちょっっとごちゃごちゃしてますが、関係性はわかります………よね？
そうです、モバイルのアノテーションタグを併用が出来るため、別URLで運営しているスマホサイトの記事をAMPにしたとしても、AMPのタグはパソコン向けページにだけ設置すれば大丈夫なんです！
スマホの方は従来通りcanonicalタグを使ってパソコンページヘと統一してあげましょう！
AMP記事の存在
既存のサイトはそもそも既にある記事をAMPにすることが多いでしょうから、上記のように「HTMLページ」と「AMPページ」がペアで存在することが多くなるかと思います。この場合は上記でご紹介したように、タグの仕様でURLは上手く正規化され、さらにはGoogleもパソコンページをクロールすることでAMP記事の存在を見つけることも出来ます。
しかし、今後新たに記事を書く場合、AMPのみで記事を配信する機会があるかもしれませんね。
もちろんAMP記事だけをWEB上に存在させることは可能です。その場合はGoogleに見つけてもらうために通常のサイトと同じようにGoogleへ存在を知らせて上げる必要があります。
上記のような事を気をつけながら、次世代の爆速表示AMPページを作ってみてはいかがでしょうか？？
このサイトはいつやるのかって？……そんなこと聞いちゃいけないよキミ。はは…！
