「SEO/amp」の版間の差分
提供: 初心者エンジニアの簡易メモ
(→amp-imgの使い方) |
(→twitter_bootstrap3をamp対応に) |
||
| (同じ利用者による、間の7版が非表示) | |||
| 行36: | 行36: | ||
==scriptヘッダー== | ==scriptヘッダー== | ||
| + | googleによるampのドキュメント | ||
| + | https://developers.google.com/structured-data/carousels/top-stories?hl=ja#markup_specification | ||
| + | |||
ttpはhttpに置き換えてください。 | ttpはhttpに置き換えてください。 | ||
| 行42: | 行45: | ||
"@context": "http://schema.org", | "@context": "http://schema.org", | ||
"@type": "Article", // Article or NewsArticle or BlogPosting | "@type": "Article", // Article or NewsArticle or BlogPosting | ||
| − | "mainEntityOfPage": "ttp://hoge.com/content/1", | + | "mainEntityOfPage": "ttp://hoge.com/content/1", // 推奨 |
| − | "headline": "ページタイトル記述 | + | "headline": "ページタイトル記述", // 必須、110文字以内 |
| − | + | ||
| − | + | ||
"image": { | "image": { | ||
| − | + | "@type": "ImageObject", | |
| − | + | "url": "ttp://hoge.com/assets/img/content1.jpg", // 必須、記事画像url、jpg, .png, or .gif | |
| − | + | "width": "700", // 必須、記事画像横幅(696px以上必要) | |
| − | + | "height": "400" // 必須、記事画像縦幅 | |
| − | + | ||
| − | + | ||
| − | + | ||
| − | + | ||
}, | }, | ||
"publisher": { | "publisher": { | ||
| − | + | "@type": "Organization", | |
| − | + | "name": "SEM Laboratory", // 必須、サイト名 | |
| − | + | "logo": { | |
"@type": "ImageObject", | "@type": "ImageObject", | ||
| − | "url": "/assets/img/logo.png", // | + | "url": "ttp://hoge.com/assets/img/logo.png", // 必須、ロゴのURL |
| − | "width": " | + | "width": "140", // 必須、ロゴの横幅 |
| − | "height": " | + | "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> | </script> | ||
| 行97: | 行101: | ||
#デベロッパーツールのConsoleを開く | #デベロッパーツールのConsoleを開く | ||
#AMP validation successfulと表示されていればok | #AMP validation successfulと表示されていればok | ||
| + | |||
| + | ==googleの構造データテスト== | ||
| + | https://developers.google.com/structured-data/testing-tool/ | ||
==googleを使ってamphtmlをテストする== | ==googleを使ってamphtmlをテストする== | ||
| 行112: | 行119: | ||
AMPのレポートについて | AMPのレポートについて | ||
https://support.google.com/webmasters/answer/6328309 | 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エラーとなるので記述を削除 | ||
==参考== | ==参考== | ||
2016年3月31日 (木) 09:26時点における最新版
目次
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サンプルプロジェクト
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/
