日本の新聞社のWebサイト５社のAMP対応状況について調べてみた。


AMPについて、インターネット上にも情報が少ないので、調べたことをどんどん発信していこうと思います。その第四弾です。

第一弾：[楽天レシピのAMP対応状況について調べてみた。](http://qiita.com/i3mato/items/d43f77121f859beacc58)
第二弾：[ゾゾタウンのAMP対応状況について調べてみた。](http://qiita.com/i3mato/items/30fcd9a3f95d56728625)
第三弾：[ebay（イーベイ）のAMP対応状況について調べてみた。](http://qiita.com/i3mato/items/1ad50ae4dd52768ab198)

今回は、日本の新聞社のWebサイト５社のAMP対応状況についてです。

## 調査対象

* [東洋経済ONLINE](http://toyokeizai.net/)
* [朝日新聞DIGITAL](http://www.asahi.com/)
* [産経ニュース](http://www.sankei.com/)
* [日刊スポーツ](http://www.nikkansports.com/)
* [東京新聞](http://www.tokyo-np.co.jp/)

2016/12/16(金)11:30で下の旬のキーワードでのニュースカルーセルに表示された新聞社のサイトを対象としました。

* [トランプ](https://www.google.co.jp/search?q=%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97&oq=%E3%83%88%E3%83%A9%E3%83%B3%E3%83%97&aqs=chrome..69i57j69i61l3j0l2.930j0j4&sourceid=chrome&ie=UTF-8)
* [成宮寛貴](https://www.google.co.jp/search?q=%E6%88%90%E5%AE%AE%E5%AF%9B%E8%B2%B4&oq=%E6%88%90%E5%AE%AE%E5%AF%9B%E8%B2%B4&aqs=chrome..69i57j0l5.2311j0j9&sourceid=chrome&ie=UTF-8)
* [DeNA](https://www.google.co.jp/search?num=100&ei=EmVTWPCtIcf28gXV9qLoAQ&q=DeNA&oq=DeNA&gs_l=mobile-gws-serp.3..0j0i131k1l2j0l2.1162.2225.0.2492.5.4.0.1.1.0.84.320.4.4.0....0...1c.1.64.mobile-gws-serp..0.5.326.3..41j0i4k1.bWVvcmGjjpQ)
* [北方領土](https://www.google.co.jp/search?q=%E5%8C%97%E6%96%B9%E9%A0%98%E5%9C%9F&oq=%E5%8C%97%E6%96%B9%E9%A0%98%E5%9C%9F&aqs=chrome..69i57j0l4j69i61.1502j0j9&sourceid=chrome&ie=UTF-8)

新聞社のWeb担当で、現在AMP対応を検討している方は是非、参考にしてみてください。

## AMP対応状況

新聞社のWEBサイトは基本的に下のような構成です。

1. トップページ
2. 記事一覧ページ
3. 記事詳細ページ

この中で５社とも、**AMP対応しているのは記事詳細ページ**のみでした。
そのため、記事詳細ページのAMPページをどのように作成しているか、下にまとめます。

| サイト名 | ページ | URL |
|:-----------|:------------:|:------------|
| [東洋経済ONLINE](http://toyokeizai.net/) | スマホ | http://toyokeizai.net/articles/149508 |
| | AMP | http://toyokeizai.net/articles/amp/149508 |
| [朝日新聞DIGITAL](http://www.asahi.com/) | スマホ | http://www.asahi.com/sp/articles/ASJDH3QHTJDHUHBI00J.html
| | AMP |http://www.asahi.com/amp/articles/ASJDH3QHTJDHUHBI00J.html |
| [産経ニュース](http://www.sankei.com/) | スマホ | http://www.sankei.com/smp/west/news/161216/wst1612160004-s1.html |
| |AMP | http://www.sankei.com/west/amp/161216/wst1612160004-a.html |
| [日刊スポーツ](http://www.nikkansports.com/) | スマホ | http://www.nikkansports.com/m/baseball/news/1751356_m.html |
| | AMP | http://www.nikkansports.com/m/baseball/news/amp/1751356.html |
| [東京新聞](http://www.tokyo-np.co.jp/) | スマホ | http://www.tokyo-np.co.jp/article/politics/list/201612/CK2016121602000129.html |
| |AMP | http://amp.tokyo-np.co.jp/article/politics/list/201612/CK2016121602000129.html |

### サブディレクトリ方式かサブドメイン方式か

AMPページの作成方法は大きく２つに別れていて、サブディレクトリ方式化サブドメイン方式になります。
これは単純にAMPページのURLをどうするかです。

* サブディレクトリ方式：http://abcdxyz.com/amp/161216/
* サブドメイン方式：http://amp.abcdxyz.com/amp/

といった違いで、どちらがオススメというより、管理しやすいほうがいいかと思いますが、１点だけ。
現在の仕様だと見た目が若干異なります。

| サブディレクトリ ```www.```| サブドメイン```amp.``` | 
|:-----------:|:------------:|
| ![sub directory.png](https://qiita-image-store.s3.amazonaws.com/0/153088/78f77c7c-74ca-6b0c-2b1c-e4999f906514.png) | ![subdomain.png](https://qiita-image-store.s3.amazonaws.com/0/153088/1334bda1-1b0e-2668-5d63-073a4331f67f.png) |

ちなみに外部ドメインにAMPページを設置することも可能です。（今まで実例を見たことありませんが。）

今回の５社については、東京新聞のみサブドメイン方式で、残りの４社はサブディレクトリ方式でした。

### 産経ニュースのURLはアクセス解析を考慮するとオススメかも？

* http://www.sankei.com/smp/west/news/161216/wst1612160004-s1.html （スマホ）
* http://www.sankei.com/west/amp/161216/wst1612160004-a.html （AMP）

1. AMPページの合計アクセス数を調べたい時は、Google Analyticsのフィルターで「/amp/」
2. 同様にスマホページは「/smp/」
3. 記事単体の合計アクセス数を調べたいときは、Google Analyticsのフィルターでユニーク文字列「wst1612160004」
4. 記事単体のAMPページのアクセス数を調べたいときは、Google Analyticsのフィルターで「wst1612160004-a.html」

もちろん4. については下の画像のようにアドバンスフィルタを使えば記事単体のAMPページのアクセス数を調べることは出来るが、フィルター1つで調べれる産経ニュースの管理方法は魅力的に思える。

![アドバンスフィルタ.PNG](https://qiita-image-store.s3.amazonaws.com/0/153088/05b97300-1e8c-4cca-6cef-eecef461970d.png)
（もちろん、長いURLを打ち込めば記事単体のアクセス数も調べられるが）

### 日刊スポーツのURL構成もサンケイスポーツ同様に魅力的

* http://www.nikkansports.com/m/baseball/news/1751356_m.html （スマホ）
* http://www.nikkansports.com/m/baseball/news/amp/1751356.html （AMP）

1. 記事単体のスマホページのアクセス数は、フィルター「1751356_m.html」
2. 記事単体のAMPページのアクセス数は、フィルター「/amp/1751356.html」

## AMPページ確認方法

5社ともバラバラですが、URLのどこかを「/amp/」にするか、東京新聞は「www」->「amp」で確認できます。
基本的にリダイレクト設定がかかっているので、スマホでの確認が推奨です。

## CDN上のAMPページとパラメータ

| サイト名 | CDN上のAMPページ |
|:-----------|:------------|
| [東洋経済ONLINE](http://toyokeizai.net/) | https://www.google.co.jp/amp/toyokeizai.net/articles/amp/149508 |
| [朝日新聞DIGITAL](http://www.asahi.com/) | https://www.google.co.jp/amp/www.asahi.com/amp/articles/ASJDH3QHTJDHUHBI00J.html |
| [産経ニュース](http://www.sankei.com/) | https://www.google.co.jp/amp/www.sankei.com/world/amp/161215/wor1612150041-a.html |
| [日刊スポーツ](http://www.nikkansports.com/) | https://www.google.co.jp/amp/www.nikkansports.com/m/baseball/news/amp/1752269.html |
| [東京新聞](http://www.tokyo-np.co.jp/) | https://www.google.co.jp/amp/amp.tokyo-np.co.jp/article/politics/list/201612/CK2016121602000129.html |

特にこれといった特徴はありませんでした。

## 参考になるAMPページからの内部リンクパラメータ

内部リンクにパラメータを設置してたのは5社中2社で、東洋経済と朝日新聞でした。


### 東洋経済ONLINE
| リンク | パラメータ|
|:-----------|------------:|
| ロゴ（トップ）       |   パラメータなし  | 
| パンくず       |   パラメータなし  | 
| 関連記事1       |   ?amp_event=related_1   | 
| 関連記事2       |   ?amp_event=related_2   | 
| 関連記事3       |   ?amp_event=related_3   | 
| 人気記事    |   パラメータなし | 
| フッターメニュー   | パラメータなし   | 

関連記事のみパラメータが設置されていました。
情報元：https://www.google.co.jp/amp/toyokeizai.net/articles/amp/149508

### 朝日新聞DIGITAL

| リンク | パラメータ|
|:-----------|:------------|
| ロゴ（トップ）       |   ?ref=amp_header  | 
| 全文を読む（ログイン） | ?ref=amp_login |
| 関連記事       |   ?ref=amp_rellink   | 
| フッターメニュー   | ?ref=amp_header   | 

内部リンクは全てにパラメータが設置されていました。
情報元：https://www.google.co.jp/amp/www.asahi.com/amp/articles/ASJDH3QHTJDHUHBI00J.html

## ニュースサイトでたまにある「続きを読む」の扱いについて

東洋経済と朝日新聞のみ、「続きを読む」ボタンがあるので、その対応について見てみます。

### 東洋経済ONLINE

| 続きを読む[前] | 続きを読む[後] | 
|:-----------:|:------------:|
| ![](https://qiita-image-store.s3.amazonaws.com/0/153088/052fac93-f783-fa2b-d390-3f6369138ed7.png)  |  ![](https://qiita-image-store.s3.amazonaws.com/0/153088/1d59cbf5-46d2-7591-a040-50309d004fcc.png)    |
続きを読む[前]：https://www.google.co.jp/amp/toyokeizai.net/articles/amp/149508
続きを読む[後]：http://toyokeizai.net/articles/amp/149508?display=b&amp_event=read-body

ポイントは２つ

1. 続きを読む[後]のページもAMPページに誘導している。
    -> 速度を考慮してのことか？
2. パラメータの設置（&amp_event=read-body）

### 朝日新聞DIGITAL

| 続きを読む[前] | 続きを読む[後] | 
|:-----------:|:------------:|
| ![asahi before.png](https://qiita-image-store.s3.amazonaws.com/0/153088/c7f7a869-4a2b-81da-ba97-dee1814daadf.png) | ![asahi after.png](https://qiita-image-store.s3.amazonaws.com/0/153088/902fbaeb-4743-6ac1-0ae1-2fd2bfe67966.png) |

続きを読む[前]：https://www.google.co.jp/amp/www.asahi.com/amp/articles/ASJDH3QHTJDHUHBI00J.html
続きを読む[後]：http://www.asahi.com/sp/articles/ASJDH3QHTJDHUHBI00J.html?ref=amp_login

ポイントは２つ

1. 続きを読むの後はAMPページではなく通常のスマホページ
2. パラメータの設置（?ref=amp_login）

続きを読むの後にAMPページを表示するか通常のページを表示するかは意見の別れるところで、サイトの方針によると思います。
ただし、パラメータの設置はどちらも行っており、アクセス解析のためにパラメータの設置は行っておいた方が良さそうです。

## まとめ

* 新聞社サイトのAMP対応は、記事詳細ページのみ
* AMPページURLの場所は、サブディレクトリ4社でサブドメイン1社
* AMPページからの内部リンクには「?amp」パラメータの設置をしたほうが良い。

一番大きなまとめとして、アクセス解析のしやすさと管理のしやすさを考慮して、サブディレクトリ方式かつ内部リンクパラメータの設置をすると、もろもろ良いのかと思いました。

今までのAMP対応状況記事の中でも一番長いエントリーとなり、kobito for windowsも、動作が重くなってきました。笑

記事としては、面白いと思うので是非、参考にしてみてください。