facebook twitter hatena line email

SEO/amp

提供: 初心者エンジニアの簡易メモ
2016年3月24日 (木) 01:23時点におけるAdmin (トーク | 投稿記録)による版 (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="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,font

amp-imgの使い方

widthとheightを必ず記述する

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

scriptヘッダー

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

<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>

chrome開発ツールを使ってamphtmlをテストする

  1. urlの最後に"#development=1"を追加
  2. デベロッパーツールのConsoleを開く
  3. AMP validation successfulと表示されていればok

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

urlの頭にgoogleのurlを追加

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

googleによるampサンプルプロジェクト

https://github.com/ampproject

参考

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

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

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