WordPressもくもく会での発表スライド@コワーキンススペース茅場町Co-Edo

1. 最近話題になってる
AMPとInstant Articles
について調べてみた
WordPerssもくもく勉強会at Co-‑Edo

2. 松尾 祥子
フリーランス
Webデザイナー兼ディレクター
WordCamp2016スタッフ
Co-‑Edoスタッフ

4. AMPって何？
Accelerated Mobile Pages
GoogleとTwitterが策定した
オープンソースのプロジェクト
モバイルウェブの⾼高速化を⽬目的とする
表⺬⽰示に時間がかかるJSなどを排除し、CSSの読み込みも
外部に置かない、など極⼒力簡易なHTMLにしたものを作
成してサイト内の別URLに置いておく

5. AMP 概念図

6. どんな風に表示されるのか

7. 日本のサイト対応状況
2016.03.12現在
AMP対応済み
朝⽇日新聞・毎⽇日新聞・ZAKZAK
AMP未対応
読売新聞・⽇日本経済新聞・産経新聞
地⽅方紙は対応済みのところは無さそう

8. 具体的にはどうするの？

9. AMPページと正規版ページの
URL の対応
!
正規版の URL にパスを追加する
例） https://foo.com/article/amp/index.html
ファイル名に⽂文字を追加する
例） https://foo.com/article/index.amp.html
URL パラメータを追加する
例） https://foo.com/article/index.html?amp

10. AMPの仕様に合わせたページを作る
↓ ↓ ↓
AMPに対応した記事の構造化データの仕様を知る
デベロッパー向け資料
https://developers.google.com/structured-‑data/rich-‑snippets/
articles
AMPとは∼〜～対応HTMLを作ってみてわかったこと∼〜～
http://www.brain-‑solution.net/blog/seo/amp-‑html/

11. めっちゃ大変そう(´･ω･`; )

12. WordPressを使っててよかったね

13. 何はともあれ見てみましょう
http://trip.pxdesign.jp/

14. なんかエラーが出てる

15. AMPの仕様に準拠してないらしい

16. どうなってる？
AMPは、⾼高速表⺬⽰示を実現するために不要な要素、属
性は省略されている。
AMPの仕様は、⾼高速表⺬⽰示をするために必須の属性を
⼊入れなければならないなど、かなり厳格な仕様。
WordPressの場合、⼿手軽に対応できるプラグインが
ありますが、まだエラーが出ることが多い。

17. どうすればいいの？
エラーが出ているとAMPページとしてインデックス
されない
今のところ、出⼒力される記事の中⾝身ひとつひとつを
修正するしかない

18. Structured Data Testing Tool

19. Structured Data Testing Tool

20. 急いで対応しなくてもAMPプラグインが良い
感じになっていくのを待っていてもいいかも？

21. Instant Articles

22. Instant Articlesって何？
Facebookのアプリ上で、フィードに表⺬⽰示されたニュースを読む
ことのできる新サービス
http://wired.jp/2015/10/21/facebook-‑iphone-‑instant-‑
articles/

23. Instant Articlesって何？
従来の⽅方法
Facebookアプリのタイムラインに流れてくるニュース記事、ブ
ログ記事をタップすると、アプリ内でリンク先にアクセスし遷移
Instant Articlesはアプリ内でニュース記事、ブログ記事をまる
ごと表⺬⽰示できるようにする
https://instantarticles.fb.com/
Facebook が作った仕様で、RSS のような専⽤用 のFeed を作っ
ておくと、コンテンツが爆速で表⺬⽰示できるようになる

24. 参考
Facebook for Developers
https://developers.facebook.com/docs/instant-‑
articles
GitHub
https://github.com/Automattic/facebook-‑
instant-‑articles-‑wp/

25. AMPとInstantArticles
の共通点
アクセスして呼び出すまでの時間をとにかく削減し、
⼀一瞬で記事を表⺬⽰示させる
↓ ↓ ↓ ↓ ↓ ↓
モバイルユーザーの利便性向上

26. これから何が変わるの？
WordPressのプラグインは４⽉月に配布開始になる
プラグインを有効化すると、Instant Articlesフォーマットにあわせ
てモバイルに最適化された記事を作成することができる

27. WordPressを母艦として
コンテンツ配信するプラットフォーム

28. 以上です！
ありがとうございました