Embed Size (px)
Citation preview
最近話題になってる
AMPとInstant Articles
について調べてみた
WordPerssもくもく勉強会at Co-‑Edo
松尾 祥子フリーランス Webデザイナー兼ディレクター WordCamp2016スタッフ Co-‑Edoスタッフ
AMPって何？Accelerated Mobile Pages
GoogleとTwitterが策定した オープンソースのプロジェクト
モバイルウェブの⾼高速化を⽬目的とする
表⺬⽰示に時間がかかるJSなどを排除し、CSSの読み込みも外部に置かない、など極⼒力簡易なHTMLにしたものを作成してサイト内の別URLに置いておく
AMP 概念図
どんな風に表示されるのか
日本のサイト対応状況2016.03.12現在
AMP対応済み朝⽇日新聞・毎⽇日新聞・ZAKZAK
AMP未対応読売新聞・⽇日本経済新聞・産経新聞地⽅方紙は対応済みのところは無さそう
具体的にはどうするの？
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
AMPの仕様に合わせたページを作る
↓ ↓ ↓
AMPに対応した記事の構造化データの仕様を知る
デベロッパー向け資料https://developers.google.com/structured-‑data/rich-‑snippets/articles
AMPとは∼〜～対応HTMLを作ってみてわかったこと∼〜～http://www.brain-‑solution.net/blog/seo/amp-‑html/
めっちゃ大変そう(´･ω･`; )
WordPressを使っててよかったね
なんかエラーが出てる
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-‑instant-‑articles/
Instant Articlesって何？従来の⽅方法Facebookアプリのタイムラインに流れてくるニュース記事、ブログ記事をタップすると、アプリ内でリンク先にアクセスし遷移
Instant Articlesはアプリ内でニュース記事、ブログ記事をまるごと表⺬⽰示できるようにするhttps://instantarticles.fb.com/
Facebook が作った仕様で、RSS のような専⽤用 のFeed を作っておくと、コンテンツが爆速で表⺬⽰示できるようになる
参考Facebook for Developershttps://developers.facebook.com/docs/instant-‑articles
GitHubhttps://github.com/Automattic/facebook-‑instant-‑articles-‑wp/
AMPとInstantArticles
の共通点
アクセスして呼び出すまでの時間をとにかく削減し、⼀一瞬で記事を表⺬⽰示させる↓ ↓ ↓ ↓ ↓ ↓
モバイルユーザーの利便性向上
これから何が変わるの？
WordPressのプラグインは４⽉月に配布開始になるプラグインを有効化すると、Instant Articlesフォーマットにあわせてモバイルに最適化された記事を作成することができる
WordPressを母艦として コンテンツ配信するプラットフォーム
以上です！ ありがとうございました
