MovableTypeのブログにAMP対応のテンプレートを作成してみた

MovableTypeでAMP対応のページを書き出せるようにAMP用の記事テンプレートを作ってみたのでメモ。

スマホでグーグル検索したときの検索結果の⚡マークが付いているリンクを開くとページが高速で表示されるというAMP(アンプ)。

AMP用の記事テンプレートを作成

AMPページでは

  • <!DOCTYPE html>がいる
  • <html>を<html amp>または<html ⚡>にする
  • imgタグをamp-imgにするなどamp-***しないといけないタグがある
  • CSSは内部に書かないといけない
  • AMP対応のJavaScriptしか使えない
  • AdSenseとAnalyticsもAMP対応のコード書き換えないといけない
  • etc...

と、いろいろ制約があるので、既存の記事テンプレートをいじるのではなく、AMP専用の記事テンプレートを作成することにしました。テンプレートを登録。

テンプレートのソース

<!DOCTYPE html>
<html amp lang="<$mt:BlogLanguage$>">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="<$mt:PublishCharset$>">
<title><$mt:EntryTitle encode_html="1"$>-<$mt:BlogName encode_html="1"$></title>
<$mt:CanonicalLink regex_replace="//amp/","" $>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Blog",
"headline": "<$mt:EntryTitle encode_json='1'$>",
"datePublished": "<$mt:EntryDate format_name='iso8601'$>",
"dateModified": "<$MTDate format_name='iso8601'$>",
"author": "<$mt:EntryAuthorLink show_hcard="1"$>",
"publisher": "Qwerty.Work",
"mainEntityOfPage": "<$mt:CanonicalURL with_index="1"$>",
"image": ""
}
</script>
<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>
<script custom-element="amp-iframe" async src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp-custom>
body { margin:0; padding:10px; font-family:sans-serif; }
amp-img { background-color: gray; border: 1px solid black; }
</style>
</head>
<body>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-12345678-1"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
<header>
<h1><mt:EntryTitle></h1>
<time><mt:EntryDate></time>
</header>
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
<article>
<mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work">
<mt:EntryBody>
<mt:EntryMore>
</mt:AmpConvert>
</article>
<aside>&nbsp;</aside>
<footer><hr><a href="<mt:BlogURL"><mt:BlogName></a></footer>
</body>
</html>
参考

アーカイブマッピングを設定する

AMP用のページはブログルートフォルダの/ampという階層に書き出すことにしたので、

amp/%y%/m%-f

としました。ファイル名.amp.htmlと書き出す手段もあったのですが、/ampに書き出すことにしました。

記事の横のチェックボックスにはチェックを入れないこと。このチェックボックスはデフォルトのアーカイブマッピングを指定するものなので、ここにチェックを入れると、PC用のページのリンクが全部/ampにあるページのURLになってしまいます。

プラグイン「AmpConvert」 を入れる

このプラグインを入れるとimgやYouToube用のiflameタグをAMP用のタグに変換してくれます。以下からプラグインをダウンロードしてMTのpluginフォルダAmpConvertフォルダを丸ごと置いてアップロードします。

使い方

AMP用のコードに変換したいコードを<mt:AmpConvert>~</mt:AmpConvert>で囲みます。

<mt:AmpConvert>
	<mt:EntryBody>
	<mt:EntryMore>
</mt:AmpConvert>
これだけでimgamp-imgに、YouTubeのiflameamp-youtubeに変換してくれます。

AdSenseのコード

<head>~</head>に以下を追加

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

AMP用のAdSenseコード

サイト運営者 ID(data-ad-client)と広告ユニット ID(data-ad-slot)を自分の広告のコードに書き換えます。

<amp-ad
	width=300 
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890" </amp-ad>

詳しくは以下のAdSenseヘルプのページを参照してください。

Analyticsのコード

<head>~</head>に以下を追加

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

AMP用のAnalyticsコード

UA-XXXXX-Yの部分を自分のAnalyticsのコードに書き換えます。
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
    "account": "UA-XXXXX-Y"
  },
  "triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
  }
}
</script>
</amp-analytics>

詳しくは以下のページを参照してください。

AMPページと通常ページの"canonical"

AMPページには通常ページのリンクを記載し、通常ページにはAMPページのリンクを記載します。通常のページは/blogの階層で、AMPページ/blog/ampの階層だった場合、以下のようになります。

AMPページ

<link rel="canonical" href="https://www.example.com/blog/document.html">

通常ページ(Non AMPページ)

<link rel="canonical" href="https://www.example.com/blog/amp/document.html">

構造化データについて

うまく説明できませんが、JSON-LDとかいう構造化データというのがあったほうがいいようです。ブログ用のJSON-LDのサンプルは以下を参考にしてみてください。

ここでAMPページの構造化データのテストができます。

AMP用ページのテスト

出来上がったAMP用のページがちゃんとできているか以下のAMPテストサイトで確認ができます。

Googleの検証サイト

AMP用ページのURLを入れて[テストを実行]をボタンを押します。

ダメな場合はダメな箇所を教えてくれます。

AMP Projectの検証ツール

以下のURLで検証結果を表示できます。

https://validator.ampproject.org/#url=AMPページのurl

Search ConsoleのAMPレポートでエラーチェック

Accelerated Mobile Pages(AMP)レポートAMPページのインデックス状況やエラーや問題を確認できます。

 

やることはもっとありますが、とりあえず以上でAMPページは導入できたので今回はこのくらいにしておきます。