Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
最近話題になってる
AMPとInstant Articles
について調べてみた
WordPerssもくもく勉強会at Co-‑Edo
松尾 祥子
フリーランス
Webデザイナー兼ディレクター
WordCamp2016スタッフ
Co-‑Edoスタッフ
AMPって何?
Accelerated Mobile Pages
GoogleとTwitterが策定した

オープンソースのプロジェクト
モバイルウェブの⾼高速化を⽬目的とする
表⺬⽰示に時間がかかるJSなどを排除し、CSSの読み込みも
外部に...
AMP 概念図
どんな風に表示されるのか
日本のサイト対応状況

2016.03.12現在
AMP対応済み

朝⽇日新聞・毎⽇日新聞・ZAKZAK
AMP未対応

読売新聞・⽇日本経済新聞・産経新聞

地⽅方紙は対応済みのところは無さそう
具体的にはどうするの?
AMPページと正規版ページの
URL の対応
!
正規版の URL にパスを追加する

例) https://foo.com/article/amp/index.html
ファイル名に⽂文字を追加する

例) https://foo.com/a...
AMPの仕様に合わせたページを作る
↓ ↓ ↓
AMPに対応した記事の構造化データの仕様を知る
デベロッパー向け資料

https://developers.google.com/structured-‑data/rich-‑snippets/...
めっちゃ大変そう(´・ω・`; )
WordPressを使っててよかったね
何はともあれ見てみましょう

http://trip.pxdesign.jp/
なんかエラーが出てる
AMPの仕様に準拠してないらしい
どうなってる?
AMPは、⾼高速表⺬⽰示を実現するために不要な要素、属
性は省略されている。
AMPの仕様は、⾼高速表⺬⽰示をするために必須の属性を
⼊入れなければならないなど、かなり厳格な仕様。
WordPressの場合、⼿手軽に対応できるプ...
どうすればいいの?
エラーが出ているとAMPページとしてインデックス
されない
今のところ、出⼒力される記事の中⾝身ひとつひとつを
修正するしかない
Structured Data Testing Tool
Structured Data Testing Tool
急いで対応しなくてもAMPプラグインが良い
感じになっていくのを待っていてもいいかも?
Instant Articles
Instant Articlesって何?
Facebookのアプリ上で、フィードに表⺬⽰示されたニュースを読む
ことのできる新サービス



http://wired.jp/2015/10/21/facebook-‑iphone-‑instan...
Instant Articlesって何?
従来の⽅方法

Facebookアプリのタイムラインに流れてくるニュース記事、ブ
ログ記事をタップすると、アプリ内でリンク先にアクセスし遷移
Instant Articlesはアプリ内でニュース記事、ブ...
参考
Facebook for Developers

https://developers.facebook.com/docs/instant-‑
articles
GitHub

https://github.com/Automattic/...
AMPとInstantArticles
の共通点
アクセスして呼び出すまでの時間をとにかく削減し、
⼀一瞬で記事を表⺬⽰示させる

↓  ↓  ↓  ↓  ↓  ↓
モバイルユーザーの利便性向上
これから何が変わるの?
WordPressのプラグインは4⽉月に配布開始になる

プラグインを有効化すると、Instant Articlesフォーマットにあわせ
てモバイルに最適化された記事を作成することができる
WordPressを母艦として
コンテンツ配信するプラットフォーム
以上です!
ありがとうございました
最近話題になってる Amp と instant articles について調べてみた
Upcoming SlideShare
Loading in …5
×

最近話題になってる Amp と instant articles について調べてみた

714 views

Published on

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

Published in: Internet
  • Be the first to comment

最近話題になってる Amp と instant articles について調べてみた

  1. 1. 最近話題になってる AMPとInstant Articles について調べてみた WordPerssもくもく勉強会at Co-‑Edo
  2. 2. 松尾 祥子 フリーランス Webデザイナー兼ディレクター WordCamp2016スタッフ Co-‑Edoスタッフ
  3. 3. AMPって何? Accelerated Mobile Pages GoogleとTwitterが策定した
 オープンソースのプロジェクト モバイルウェブの⾼高速化を⽬目的とする 表⺬⽰示に時間がかかるJSなどを排除し、CSSの読み込みも 外部に置かない、など極⼒力簡易なHTMLにしたものを作 成してサイト内の別URLに置いておく
  4. 4. AMP 概念図
  5. 5. どんな風に表示されるのか
  6. 6. 日本のサイト対応状況
 2016.03.12現在 AMP対応済み
 朝⽇日新聞・毎⽇日新聞・ZAKZAK AMP未対応
 読売新聞・⽇日本経済新聞・産経新聞
 地⽅方紙は対応済みのところは無さそう
  7. 7. 具体的にはどうするの?
  8. 8. 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
  9. 9. AMPの仕様に合わせたページを作る ↓ ↓ ↓ AMPに対応した記事の構造化データの仕様を知る デベロッパー向け資料
 https://developers.google.com/structured-‑data/rich-‑snippets/ articles
 
 AMPとは∼〜~対応HTMLを作ってみてわかったこと∼〜~
 http://www.brain-‑solution.net/blog/seo/amp-‑html/

  10. 10. めっちゃ大変そう(´・ω・`; )
  11. 11. WordPressを使っててよかったね
  12. 12. 何はともあれ見てみましょう
 http://trip.pxdesign.jp/
  13. 13. なんかエラーが出てる
  14. 14. AMPの仕様に準拠してないらしい
  15. 15. どうなってる? AMPは、⾼高速表⺬⽰示を実現するために不要な要素、属 性は省略されている。 AMPの仕様は、⾼高速表⺬⽰示をするために必須の属性を ⼊入れなければならないなど、かなり厳格な仕様。 WordPressの場合、⼿手軽に対応できるプラグインが ありますが、まだエラーが出ることが多い。
  16. 16. どうすればいいの? エラーが出ているとAMPページとしてインデックス されない 今のところ、出⼒力される記事の中⾝身ひとつひとつを 修正するしかない
  17. 17. Structured Data Testing Tool
  18. 18. Structured Data Testing Tool
  19. 19. 急いで対応しなくてもAMPプラグインが良い 感じになっていくのを待っていてもいいかも?
  20. 20. Instant Articles
  21. 21. Instant Articlesって何? Facebookのアプリ上で、フィードに表⺬⽰示されたニュースを読む ことのできる新サービス
 
 http://wired.jp/2015/10/21/facebook-‑iphone-‑instant-‑ articles/
  22. 22. Instant Articlesって何? 従来の⽅方法
 Facebookアプリのタイムラインに流れてくるニュース記事、ブ ログ記事をタップすると、アプリ内でリンク先にアクセスし遷移 Instant Articlesはアプリ内でニュース記事、ブログ記事をまる ごと表⺬⽰示できるようにする
 https://instantarticles.fb.com/ Facebook が作った仕様で、RSS のような専⽤用 のFeed を作っ ておくと、コンテンツが爆速で表⺬⽰示できるようになる
  23. 23. 参考 Facebook for Developers
 https://developers.facebook.com/docs/instant-‑ articles GitHub
 https://github.com/Automattic/facebook-‑ instant-‑articles-‑wp/
  24. 24. AMPとInstantArticles の共通点 アクセスして呼び出すまでの時間をとにかく削減し、 ⼀一瞬で記事を表⺬⽰示させる
 ↓  ↓  ↓  ↓  ↓  ↓ モバイルユーザーの利便性向上
  25. 25. これから何が変わるの? WordPressのプラグインは4⽉月に配布開始になる
 プラグインを有効化すると、Instant Articlesフォーマットにあわせ てモバイルに最適化された記事を作成することができる
  26. 26. WordPressを母艦として コンテンツ配信するプラットフォーム
  27. 27. 以上です! ありがとうございました

×