「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
