facebook twitter hatena line email

「SEO/amp」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(ページの作成:「==ampのhtmlタグ== <html ⚡ lang="ja"> ==amp側のheadに設置== <link rel="canonical" href="ttp://hoge.com"> <meta name="viewport" content="width=device-width,mi...」)
 
行8: 行8:
 
==通常html側に設置==
 
==通常html側に設置==
 
  <link rel="amphtml" href="ttps://hoge.com/amp" />
 
  <link rel="amphtml" href="ttps://hoge.com/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
 +
 +
==amp-imgの使い方==
 +
widthとheightを必ず記述する
 +
<amp-img src="hoge.jpg" alt="" width="100" height="100"></amp-img>
 +
 +
==css==
 +
cssはlinkタグでのincludeはできない。phpでincludeするといいかも。
 +
<style amp-custom></style>
  
 
==amp内にanalytics設置==
 
==amp内にanalytics設置==

2016年3月23日 (水) 19:50時点における版

ampのhtmlタグ

<html ⚡ lang="ja">

amp側のheadに設置

<link rel="canonical" href="ttp://hoge.com">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

通常html側に設置

<link rel="amphtml" href="ttps://hoge.com/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

amp-imgの使い方

widthとheightを必ず記述する

<amp-img src="hoge.jpg" alt="" width="100" height="100"></amp-img>

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>

googleを使ってamphtmlをテストする

urlの頭にgoogleのurlを追加

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

参考

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