7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

AMPAdvent Calendar 2016

Day 4

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

Last updated at Posted at 2016-12-16

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

第一弾:楽天レシピのAMP対応状況について調べてみた。
第二弾:ゾゾタウンのAMP対応状況について調べてみた。
第三弾:ebay(イーベイ)のAMP対応状況について調べてみた。

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

調査対象

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

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

AMP対応状況

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

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

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

サイト名 ページ URL
東洋経済ONLINE スマホ http://toyokeizai.net/articles/149508
AMP http://toyokeizai.net/articles/amp/149508
朝日新聞DIGITAL スマホ http://www.asahi.com/sp/articles/ASJDH3QHTJDHUHBI00J.html
AMP http://www.asahi.com/amp/articles/ASJDH3QHTJDHUHBI00J.html
産経ニュース スマホ 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/m/baseball/news/1751356_m.html
AMP http://www.nikkansports.com/m/baseball/news/amp/1751356.html
東京新聞 スマホ 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ページの作成方法は大きく2つに別れていて、サブディレクトリ方式化サブドメイン方式になります。
これは単純にAMPページのURLをどうするかです。

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

サブディレクトリ www. サブドメインamp.
sub directory.png subdomain.png

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

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

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

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

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

アドバンスフィルタ.PNG
(もちろん、長いURLを打ち込めば記事単体のアクセス数も調べられるが)

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

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

AMPページ確認方法

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

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

サイト名 CDN上のAMPページ
東洋経済ONLINE https://www.google.co.jp/amp/toyokeizai.net/articles/amp/149508
朝日新聞DIGITAL https://www.google.co.jp/amp/www.asahi.com/amp/articles/ASJDH3QHTJDHUHBI00J.html
産経ニュース https://www.google.co.jp/amp/www.sankei.com/world/amp/161215/wor1612150041-a.html
日刊スポーツ https://www.google.co.jp/amp/www.nikkansports.com/m/baseball/news/amp/1752269.html
東京新聞 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://www.google.co.jp/amp/toyokeizai.net/articles/amp/149508
続きを読む[後]:http://toyokeizai.net/articles/amp/149508?display=b&amp_event=read-body

ポイントは2つ

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

朝日新聞DIGITAL

続きを読む[前] 続きを読む[後]
asahi before.png asahi after.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

ポイントは2つ

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

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

まとめ

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

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

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

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

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?