作った過程で知った、忘れると困る系のメモ
AMP Story? AMP Stories? どっちなんだろう。
amp.dev › AMP Stories
ページ作成は通常 AMP とほぼ共通
AMP Stories は、利用タグに細かいルールはあるものの、#development=1 でバリデートするなど、作成時に気にかけることは基本的には通常 AMP ページと同様。
canonical は自分自身を指定。
通常 AMP ページは SP ページの 代替ページを担うことが殆どなのに対し、AMP Stories は通常の Web ページを持たない単体コンテンツという扱い。
canonical は URL 正規化の意味で自身の URL を指定する。
amp.dev › Documentation › Components › amp-story AMP story format › Required markup for amp-story
Document Outline
AMP Stories は通常 Web ページの Stories 版ではなく、Story 風の単一 Web ページなので、AMP ストーリーズページ自体が検索エンジンにインデックスされ、表示される様子（2019-08 時点）。
セクショニング・コンテンツ、ヘディング・コンテンツを適宜利用し、適切な Document Outline を構築しておきましょう。
海外 SEO ブログ › AMPストーリーは通常ページと同じように扱われる。インデックスに影響する要因はサイトマップ・内部リンク・コンテンツ
構造化データ（Structured Data）
当然入れたほうが良い。
現時点で US で対応されているらしい SERPs 上の Stories 専用枠への掲出を期待しよう。
記事の Stories 版だとすると以下のような json-ld になるだろう。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://normary.we/can/use/page/url"
},
"headline": "ページタイトル",
"image": [
"https://path.to/image"
],
"datePublished": "2019-12-11T10:00:00+08:00",
"dateModified": "2019-12-11T10:00:00+08:00",
"author": {
"@type": "Organization",
"name": "YourName"
},
"publisher": {
"@type": "Organization",
"name": "YourName",
"logo": {
"@type": "ImageObject",
"url": "https://path.to/icon.png"
}
},
"description": "ページの説明"
}
</script>
レスポンシブ
表現手法は独特なのでレスポンシブと言って良いのかという感じだが、１ページで PC / SP 状態を担保できる。
URL 正規化が行われておらず、PC / SP で別 URL にする必要がある場合などは、AMP Stories 自体のブレイクポイントをメディアクエリで指定するなどして要素の出し分けはできるが、オフィシャルな実装方法が欲しいところ。
.visible-on-sp {
display: none;
}
.visible-on-pc {
display: block;
}
@media screen and (max-width: 776px) {
.visible-on-sp {
display: block;
}
.visible-on-pc {
display: none;
}
}
body タグ直下に入れて良いタグは <amp-story> タグのみ
AMP Stories ページ作成ルールに則ると、body タグ直下に入るのは <amp-story> タグのみ。
#development=1 でも、body タグ直下に <amp-story> 以外のタグが入っているとエラー。
<amp-analytics> タグも、
<amp-analytics type="googleanalytics"> タグもバリデーションエラーとなる。
なので上のようなタグは、<amp-story> タグ配下に入れた。
要素のレイアウトバリエーションは限られている
背景の上に乗せる要素のレイアウトバリエーションは限られており、全体表示の Fill と、ブロック３つ縦積みの Thirds が有用と思しい。
Thirds それぞれのブロックはデフォルトで上寄せだが、CSS で中央寄せ、下部寄せは実現できる。
amp-story-grid-layer.bottom {
align-content: end;
}
amp-story-grid-layer.middle {
align-content: center;
}
因みに amp-story-grid-layer.bottom は、AMP Story チュートリアルのサンプルファイルに含まれている CSS。
amp.dev › Documentation › Examples › AMP Story Layouts
amp.dev › Documentation › Guides & Tutorials › Create your first AMP Story › Setting up › Set up your development environment
アニメーション
アニメーションの実装は簡単。（若干バグも多いと感じるが…）
とはいえ、Story 形式 UI はスワイプでサクサク読むのが前提の筈なので、アニメーションが付いているとなんだか良さげだけど、長いアクションは避けたほうが良いだろう。
フェードインで表示
背景には色を敷いておいたほうが良い。
<amp-img src="images/a.jpg" width="720" height="1280" layout="responsive" animate-in="fade-in" animate-in-duration="1.5s">
一瞬大きくなる
<h2 animate-in="pulse" animate-in-duration="0.8s" animate-in-delay="0.4s">TEXT TEXT</h2>
amp.dev › Documentation › Guides & Tutorials › Create your first AMP Story › Animating elements
https://amp.dev/documentation/guides-and-tutorials/start/visual_story/animating_elements/
Google Analytics 計測
まずライブラリを head タグ内で読み込む。
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
ページビューと、
クリック計測は以下のような形で登録できる。
単一要素のクリック計測であれば、値を直書きで問題ないと思うが、複数要素を計測する際は data 属性を用いて値を送信する形が望ましい。
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-000000-0"
},
"triggers": {
"default pageview": {
"on": "visible",
"request": "pageview"
},
"trackAnchorClicks": {
"on": "click",
"selector": ".js--evt-track",
"request": "event",
"vars": {
"eventCategory": "${itemCategory}",
"eventAction": "click",
"eventLabel": "yourLabelName",
"eventValue": "${itemValue}"
}
}
}
}
</script>
</amp-analytics>
${} の部分はサンプルの記述ではなく、所謂 ES6 の Template String 的に（ちょっと違うか…）、適宜値が取得できるもの。
セレクタで指定した要素の、data-vars- から始まる属性を、data-vars- 以降の文字列をキャメルケース化した文字列を指定することで、その属性値を取得・送信することができる。
HTML タグ側は以下の形式になる。
<a href="https://hoge.to/piyo" class="js--evt-track" data-vars-item-category="1" data-vars-item-value="link1">link 1</a>
<a href="https://hoge.to/fuga" class="js--evt-track" data-vars-item-category="1" data-vars-item-value="link2">link 2</a>
amp.dev › Documentation › Components › amp-analytics
developers.google.com › Google アナリティクス › 測定 › analytics.js › イベント測定
写真のトリミング
全体表示の Fill レイアウト用に 720 × 1280 の画像を利用すると、デバイスによって上下が切れる。
iOS ばかりでの検証だが、SE、8、8+、X で比較をすると最も見切れるのが iPhone SE。
上部がおよそ 145px、下部が 130px 見切れる為、人の写真を利用する際などは上下の見切れる部分に入らないような構図にするのが良いだろう。
関係ないけど金魚すくいって、
- 金魚掬い
- 金魚救い
の、どちらなのか…。
facebook でシェア時に app_id エラーが出る際は bookend.json で app_id を指定
チュートリアルでは単純に文字列の指定（facebook とだけ記述）しかされていないが、Object 形式で値を渡すことができる。ページの最後ないしページ右上アイコンからの facebook シェア時に app_id が無い的なエラーが出る場合は、bookend.json で app_id を指定する。
"shareProviders": [
{
"provider": "facebook",
"app_id": "000000000000000"
},
"twitter",
"line",
"email"
],
また、ソーシャルメディアから URL でページをシェアされる際の情報は、通常ページと同様に html の ogp を参照することになるので、app_id も含む一般的な ogp タグを、meta タグでも指定しておく。
amp.dev › Documentation › Components › amp-story › Example JSON response
SERPs
PC / SP 共に SERPs に掲出される。
但し PC 版はオリジナル URL に遷移するのに対し、
SP 版は ⚡ マーク付きで、https://www.google.com/amp/story/s/ から始まる Cached URL で配信される。
また、Cached URL での閲覧時のシェア欄は「リンクを取得」のみとなり、コピーされる URL は、 SP / PC 問わずオリジナル URL となる（bookend.json の指定方法が悪い？）。