エトセトラ備忘録

WPなど案件構築覚書

NEW ARTICLE
EC-CUBEの「ご注文完了」ページに購入された商品のIDを用いて分岐させる[4系]

AMPについての情報まとめ

AMPについての情報まとめ

※文中のコード入力指定が効かなかったので、ページ内のタグは＜＞で括っています。

◯AMPとは
AMPは「AMP HTML」「AMP JS」「Google AMP Cache」で構成する
・AMP HTML：既存のHTML／CSS／JavaScriptの一部を制限することで、高いパフォーマンスを実現。
・AMP JS：高速レンダリングを実現するためのJavaScriptライブラリ。
・Google AMP Cache：AMP HTMLページを取得、キャッシュし、配信するための仕組み（CDN）。

GoogleなどのCDNにページの情報がキャッシュとして保持され、検索からのページ訪問の際の表示が早くなる技術。
その為には、負荷のかかる要素を排除し、軽量のライブラリを利用する。

◯基本構成
・＜html amp＞フォーマット形式
・AMP HTMLを新規で作成するか、現在スマホに対して見せているHTML（レスポンシブならPCも含めて）をAMP HTMLに修正する必要がある。
　※AMP HTMLには制約があり、HTMLで使用してきたタグが一部使えない
　　AMPに対応できるようにHTML上非対応のコンテンツを書き換えたり削る必要がある
以上のことから、形状は似ているが、スマホページをAMP化するのはあまり現実的ではなく、AMPページを新規で作るのがベター

◯AMP対応HTMLに求められる条件
・AMP HTMLの書式に沿ってHTMLを記述する
・schema.orgで構造化マークアップをする

◯AMP対応HTMLの記述方法
・＜!doctype html＞から始めます
・＜html AMP lang=”ja”＞を記述します。
・＜head＞内に＜meta charset=”utf-8″＞を指定。
　※charset=”utf-8″以外は許容されていないようです。
・viewportを設定します
　[基本記述]

<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0">

　[よく使うもの]

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

◯canonicalの設定
・＜head＞内にはPCページのURLを記載したcanonicalを設置

<link rel="canonical" href="PCページのURL">

・同じくAMPページのURLを記載したcanonicalを設置

<link rel="amphtml" href="amp表示ページのURL">

◯cssについて
・AMP HTMLではcssをlink=relで読み込んでくることができない。
　style amp-customを使用し、その中にcssを記述します。phpが使える環境であれば下記のように記述することで外部cssを読み込む事が可能

<?php echo file_get_contents("cssのファイルパス");?>

　※amp-custom内でcssをインポート(@import)してしまうと有効なAMP HTMLと認識されない
・タグ上に直接スタイルを書き込むインライン要素の書き込みは不可
・!important 禁止
・animation、transition は GPU 関連のみ
・CSSはヘッダーに直接埋め込み、かつサイズは50KB以下であること。

◯boilerplate記述を入れる
　※boilerplate＝ampが使用するスタイル。この内容は変更せず使用する。

<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>

◯jsについて
AMP HTMLではjavascriptが許容されていない。
現段階でscriptタグで使えるものは基本的にAMPページのために設計された非同期スクリプト及びJSON-LDを記述するための記載となる。
スライドやアコーディオンメニューについては拡張コンポーネントが用意されている。

◯必要に応じてampにサポートされている拡張コンポーネントjavascriptを読み込む
例）クリックして開閉するコンテンツを設置

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

例）ボタンをクリックするとサイドからメニューが表示されるサイドバー

<script async custom-element="amp-sidebar" src="https://cdn.ampproject.org/v0/amp-sidebar-0.1.js"></script>

◯ampとして動作させるためのjavascript

<script async src="https://cdn.ampproject.org/v0.js"></script>

◯JSON-LD（schema）を書き換える
【必須】@context・・・http://schema.org を指定。固定値
【必須】@type・・・Article/NewsArticle/BlogPosting/VideoObject を指定。他タイプのインデックスはまだ確認されていない
【必須】headline・・・記事タイトルを指定。
image・・・アイキャッチ画像の指定（カルーセルに使用される：幅696px以上の画像が必要。高さに関しての最小値指定はなし）
datePublished・・・記事公開日を指定。ISO 8601 フォーマット（2015-12-18T00:00:32+00:00 のような形式）
dateModified・・・記事更新日を指定。ISO 8601 フォーマット（2015-12-18T00:00:32+00:00 のような形式）
author・・・記事を制作したライター情報。なければサイト名など。
publisher・・・組織情報
description・・・記事要約を指定。

[最小記述]

<script type="application/ld+json">
{
"@context": "http://schema.org", //これは固定の内容になります
"@type": "Corporation",
"name": "サンプル株式会社",
"telephone": "0120-000-000",
"url": "http://hogehoge.com/"
}
</script>

[よく使うと思われる記述]

  <script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "BlogPosting",
        "headline": "<?php echo SITENAME;?>",
        "mainEntityOfPage":{
          "@type":"WebPage",
          "@id":"☆★☆PCページのURL☆★☆"
        },
        "image": {
            "@type": "ImageObject",
            "url": "☆★☆メインビジュアル（下部にはサイズが入ります）（※widthは696px以上であること）☆★☆",
            "height": 1333,
            "width": 2000
        },
        "datePublished": "2017-01-01T00:40:02+00:00",
        "dateModified": "2017-01-03T10:14:16+00:00",
        "author": {
            "@type": "Organization",
            "name": "☆★☆サイト名☆★☆"
        },
        "publisher": {
            "@type": "Organization",
            "name": "☆★☆サイト名☆★☆",
            "logo": {
            "@type": "ImageObject",
                "url": "☆★☆サイトロゴURL（下部にはサイズが入ります）（※widthは600px以下/heightは60px以下であること）☆★☆",
                "width": 406,
                "height": 56
            }
        },
        "description": "<?php echo DESCRIPTION;?>"
    }
    </script>

◯アナリティクスを設定

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

◯ソーシャルボタンについて

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
◯Twitter
<amp-social-share type="twitter" width="44" height="44"></amp-social-share>
◯Facebook
<amp-social-share type="facebook" width="44" height="44" data-param-app_id="☆★☆アプリID☆★☆" data-param-text="☆★☆ページタイトル☆★☆" data-param-href="☆★☆ページURL☆★☆"></amp-social-share>
◯Google+
<amp-social-share type="gplus" width="44" height="44"></amp-social-share>

20170410現在、ソーシャルは下記が対応している。
・Twitter
・Facebook
　※シェアのみ、いいねの実装に関しては確認中
・Pinterest
・LinkedIn
・Google+
・Email（メールでの共有）

◯ogp（必要に応じて？/確認中）
head内にはFacebookのOGP(Open Gragh Protocol)やtwitter cardの設定を行う。
PCページといいねやツイート件数を合算するためにも、URLはPCページのものを記述しておく。

参考サイト

CodeZine
ついに始まった、Google AMP（Accelerated Mobile Pages）を試してみよう！
https://codezine.jp/article/detail/9300
BRAIN NET
AMPとは～対応HTMLを作ってみてわかったこと～
https://www.brain-solution.net/blog/seo/amp-html/
Syncer
AMPの対応方法まとめ
https://syncer.jp/Web/AMP/
リカオン株式会社 SEO対策エンジニアブログ
超簡単！schema.orgはJSON-LDで書こう
http://www.lykaon-search.com/seo/schema-org/post-308/
寝ログ
WordPressでAMPに対応した記事向けJSON-LDを出力する方法
https://nelog.jp/wordpress-amp-json-ld
海外SEO情報ブログ
AMPページでサイドバーやアコーディオン、ソーシャルボタンの利用が可能に
https://www.suzukikenichi.com/blog/sidebars-accordion-social-sharing-in-amp/
SEM Labo
AMP HTMLのSNSシェアボタンを実装しました
http://www.oosaka-web.jp/column/web/160527/
WebNAUT
AMPが当たり前の時代なのでWordPressのオリジナルテーマをAMP対応させてみた
https://webnaut.jp/technology/20170116-1913/