facebook twitter hatena line google mixi email

SEO/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="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をテストする

  1. urlの最後に"#development=1"を追加
  2. デベロッパーツールのConsoleを開く
  3. 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サンプルプロジェクト

https://github.com/ampproject

search_consoleのampについて

  1. search_consoleを開く
  2. 検索での見え方/Accelerated Mobile Pages

AMPのレポートについて https://support.google.com/webmasters/answer/6328309

twitter_bootstrap3をamp対応に

  1. 50000文字以上は"style amp-custom"に記載できないので不要なものは削る
  2. http://getbootstrap.com/customize/ でgrid_system、responsive_utilities、buttonsのみにした。
  3. "!important"はampエラーとなるので記述を削除
  4. "@-ms-viewport"はampエラーとなるので記述を削除

参考

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

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

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