日々我想

a-blogcmsで、AMP対応させてみた

こんにちは、久しぶりにサイトいじっている、ゆきるんです。

久しぶりすぎて、自分のスキルが劣化してるのに愕然としているんですが(´,,・ω・,,`)

で、ここのサイトは、a-blogCMSを使っています。
Wordpressも使っていますが、カスタマイズとか断然簡単なので(いや、優しくはないのですが…)愛用しています。

で、せっかくなのでAMP対応にしてみました。

AMPとは?

AMPは、Accelerated Mobile Pagesの頭文字から来ています。GoogleとTwitterで共同開発されている、モバイル端末でウェブページを高速表示するためのフレームワーク(AMP HTML)のことです。

なので、対応させるとモバイルで高速表示になって、アクセスしやすくなる…ということなのですが、専用のページを用意する必要があります。


a-blogCMSでAMP対応するには?

以下のサイトから、ファイルをダウンロードしてカスタマイズ&アップロードするだけです。
割りと簡単にできてしまった…多分。


しかしですね、JSON で、変なエラーが出てしまいます。 ↓こんな感じのやつです。

バリデーションはOKでした。!


The script tag contains invalid JSON that cannot be parsed. DISALLOWED_HTML
line 64, column 0

どうも、Google Analytics読み込みで、計測データがとれてないっぽいです。

そこで、ソースを↓から

		<!-- Google Analyticsの読み込み -->
		<amp-analytics type="googleanalytics" id="analytics1">
			<script type="application/json">
				{
					"vars": {
						"account": "UAーXXXXXXXX-X" // Google AnalyticsのトラッキングID
					},
					"triggers": {
						"trackPageview": {
							"on": "visible",
							"request": "pageview"
						}
					}
				}
			</script>
		</amp-analytics>

↓に変更してみました

		<!-- Google Analyticsの読み込み -->
		<amp-analytics type="googleanalytics" id="analytics1">
			<script type="application/json">
				{
					"vars": {
						"account": "UAーXXXXXXXX-X"
					},
					"triggers": {
						"trackPageview": {
							"on": "visible",
							"request": "pageview"
						}
					}
				}
			</script>
		</amp-analytics>

単に、コメントを外しただけですが…
↓のように、エラーが消えたよ!!!!


AMPページのバリデーション(エラーチェックですね)は以下でどうぞ。



アフィリエイトを使った商品紹介のページは、エラーが出ちゃいますね…なんとかしますです、はい


関連エントリー

ゆきるん

3人子持ちのダラ奥です。
Web制作とかパソコンとか教えています。映画鑑賞と旅行と温泉が大好き。癒やされたい今日この頃。

友だち追加

カテゴリーリスト