SEO/ampのソースを表示

==ampのhtmlタグ==
 <html ⚡ lang="ja">

==amp側のheadに設置==
 <link rel="canonical" href="ttp://hoge.com/content/1">
 <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

==通常html側に設置==
 <link rel="amphtml" href="ttp://hoge.com/content/1/amp" />

==ampタグ==
 amp-img
 amp-audio
 amp-anim
 amp-ad
 amp-pixel
 amp-video
 amp-brightcove
 amp-carousel
 amp-font
 amp-lightbox
 amp-iframe
 amp-instagram
 amp-twitter
 amp-vine
 amp-youtube

==ampで使えるタグ、使えないタグ==
 使える:div,a,p

 使えない:form,input,font

==amp-imgの使い方==
widthとheightを必ず記述する
 <amp-img src="hoge.jpg" width="100" height="100"></amp-img>

==scriptヘッダー==
googleによるampのドキュメント
https://developers.google.com/structured-data/carousels/top-stories?hl=ja#markup_specification

ttpはhttpに置き換えてください。

 <script type="application/ld+json">
 {
    "@context": "http://schema.org",
    "@type": "Article", // Article or NewsArticle or BlogPosting
    "mainEntityOfPage": "ttp://hoge.com/content/1", // 推奨
    "headline": "ページタイトル記述", // 必須、110文字以内
    "image": {
      "@type": "ImageObject",
      "url": "ttp://hoge.com/assets/img/content1.jpg", // 必須、記事画像url、jpg, .png, or .gif
      "width": "700", // 必須、記事画像横幅(696px以上必要)
      "height": "400" // 必須、記事画像縦幅
    },
    "publisher": {
      "@type": "Organization",
      "name": "SEM Laboratory", // 必須、サイト名
      "logo": {
        "@type": "ImageObject",
        "url": "ttp://hoge.com/assets/img/logo.png", // 必須、ロゴのURL
        "width": "140", // 必須、ロゴの横幅
        "height": "60" // 必須、ロゴの高さ
        }
    },
    "datePublished": "2015-05-21T13:46:36+09", // 必須、作成日時
    "dateModified": "2015-05-21T13:46:36+09", // 推奨、編集日時
    "author": {
      "@type": "Person",
      "name": "hoge tarou" // 必須、記事作者名
    },
    "description": "A most wonderful article" // 推奨
 }
 </script>

==css==
cssはlinkタグでのincludeはできない。phpでincludeするといいかも。
 <style amp-custom></style>

==amp内にanalytics設置==
 <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

bodyタグ内に追加
 <amp-analytics type="googleanalytics" id="analytics1">
 <script type="application/json">
 {
   "vars": {
     "account": "UA-********-xx"
   },
   "triggers": {
     "trackPageview": {
       "on": "visible",
       "request": "pageview"
     }
   }
 }
 </script>
 </amp-analytics>
 
==chrome開発ツールを使ってamphtmlをテストする==
#urlの最後に"#development=1"を追加
#デベロッパーツールのConsoleを開く
#AMP validation successfulと表示されていればok

==googleの構造データテスト==
 https://developers.google.com/structured-data/testing-tool/

==googleを使ってamphtmlをテストする==
urlの頭にgoogleのurlを追加

https://www.google.co.jp/amp/hoge.com

==googleによるampサンプルプロジェクト==
https://github.com/ampproject

==search_consoleのampについて==
#search_consoleを開く
#検索での見え方/Accelerated Mobile Pages

AMPのレポートについて
https://support.google.com/webmasters/answer/6328309

==twitter_bootstrap3をamp対応に==
#50000文字以上は"style amp-custom"に記載できないので不要なものは削る
#http://getbootstrap.com/customize/ でgrid_system、responsive_utilities、buttonsのみにした。
#"!important"はampエラーとなるので記述を削除
#"@-ms-viewport"はampエラーとなるので記述を削除

==参考==
http://www.brain-solution.net/blog/seo/amp-html/

http://qiita.com/ryo_hisano/items/abed080a22dd485e6984

http://www.oosaka-web.jp/column/seo/160308/