「SEO/amp」の版間の差分
提供: 初心者エンジニアの簡易メモ
| 行3: | 行3: | ||
==amp側のheadに設置== | ==amp側のheadに設置== | ||
| − | <link rel="canonical" href="ttp://hoge.com"> | + | <link rel="canonical" href="ttp://hoge.com/content/1"> |
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> | ||
==通常html側に設置== | ==通常html側に設置== | ||
| − | <link rel="amphtml" href="ttps://hoge.com/amp" /> | + | <link rel="amphtml" href="ttps://hoge.com/content/1/amp" /> |
==ampタグ== | ==ampタグ== | ||
| 行34: | 行34: | ||
widthとheightを必ず記述する | widthとheightを必ず記述する | ||
<amp-img src="hoge.jpg" alt="" width="100" height="100"></amp-img> | <amp-img src="hoge.jpg" alt="" width="100" height="100"></amp-img> | ||
| + | |||
| + | ==scriptヘッダー== | ||
| + | <script type="application/ld+json"> | ||
| + | { | ||
| + | "@context": "http://schema.org", | ||
| + | "@type": "Article", // Article or NewsArticle | ||
| + | "mainEntityOfPage": "ttp://hoge.com/content/1", | ||
| + | "headline": "ページタイトル記述", | ||
| + | "datePublished": "2015-05-21T13:46:36+09", // 作成日時 | ||
| + | "dateModified": "2015-05-21T13:46:36+09", // 編集日時 | ||
| + | "image": { | ||
| + | "@type": "ImageObject", | ||
| + | "url": "/assets/img/content1.jpg", // 記事画像url | ||
| + | "width": "600", // 記事画像横幅 | ||
| + | "height": "400" // 記事画像縦幅 | ||
| + | }, | ||
| + | "author": { | ||
| + | "@type": "Person", | ||
| + | "name": "hoge tarou" // 記事作者名 | ||
| + | }, | ||
| + | "publisher": { | ||
| + | "@type": "Organization", | ||
| + | "name": "SEM Laboratory", // サイト名 | ||
| + | "logo": { | ||
| + | "@type": "ImageObject", | ||
| + | "url": "/assets/img/logo.png", // ロゴのURL | ||
| + | "width": "400", // ロゴの横幅 | ||
| + | "height": "400" // ロゴの高さ | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
==css== | ==css== | ||
2016年3月23日 (水) 20:16時点における版
目次
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="ttps://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
amp-imgの使い方
widthとheightを必ず記述する
<amp-img src="hoge.jpg" alt="" width="100" height="100"></amp-img>
scriptヘッダー
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article", // Article or NewsArticle
"mainEntityOfPage": "ttp://hoge.com/content/1",
"headline": "ページタイトル記述",
"datePublished": "2015-05-21T13:46:36+09", // 作成日時
"dateModified": "2015-05-21T13:46:36+09", // 編集日時
"image": {
"@type": "ImageObject",
"url": "/assets/img/content1.jpg", // 記事画像url
"width": "600", // 記事画像横幅
"height": "400" // 記事画像縦幅
},
"author": {
"@type": "Person",
"name": "hoge tarou" // 記事作者名
},
"publisher": {
"@type": "Organization",
"name": "SEM Laboratory", // サイト名
"logo": {
"@type": "ImageObject",
"url": "/assets/img/logo.png", // ロゴのURL
"width": "400", // ロゴの横幅
"height": "400" // ロゴの高さ
}
}
}
</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>
googleを使ってamphtmlをテストする
urlの頭にgoogleのurlを追加
https://www.google.co.jp/amp/hoge.com
