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> </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フォルダを丸ごと置いてアップロードします。
- https://www.ark-web.jp/blog/archives/2016/11/ampampconvert.html
- https://plugins.movabletype.jp/author29eb2/ampconvert.html
使い方
AMP用のコードに変換したいコードを<mt:AmpConvert>～</mt:AmpConvert>で囲みます。
<mt:AmpConvert> <mt:EntryBody> <mt:EntryMore> </mt:AmpConvert>これだけでimgをamp-imgに、YouTubeのiflameをamp-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="amphtml" 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ページは導入できたので今回はこのくらいにしておきます。