1. HOME
  2. フロントエンド
  3. 【a-blog cms】試しにエントリーをAMP対応させてみた

【a-blog cms】試しにエントリーをAMP対応させてみた

フロントエンド

試しにエントリーのページをAMP対応させてみました。

【a-blog cms】AMP対応でやったこと

まずAMPの基本的なルールとして

  • または<html amp>
  • JSON-LD以外の JavaScript
  • linkはrel:canonicalで、CSSの読み込みは不可
  • CSSはhead内に内で記述
  • CSS総容量は50KBまで
  • Google Fontはlinkで読み込み可
  • !importantは使用不可
  • 【img】などは【amp-img】に変更する。width,heightは必須
  • <meta charset="utf-8">は必須。大文字だとエラー
  • viewportも必須

など必要なルールがたくさんあるみたいです。
下記から実際に変更したこと。今回はエントリーのAMP対応もともとのentry.htmlを複製して使用しています。

HTML

<html ?(雷の絵文字) lang="ja" dir="ltr">

に変更。


charset

<meta charset="utf-8">

大文字だと最後のコンソールの確認でエラーがでます。

viewport

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

CSSのインラインでの読み込み

CSSはhead内に記述します。タグにインラインで書くとエラーが出ます。

<style amp-custom>
/*ここにスタイルを記述する*/
</style>

JSON-LDの設定

今回書いたのは記事自体の情報と、記事を書いた人の情報を記述するようにしました。
<script type="application/ld+json"></script>内にJSONを記述していきます。【Entry_Summary】のモジュールを使用し、記事の情報はエントリーによって動的に変わるように。

<!-- BEGIN_MODULE Entry_Summary id="ogp-image"-->
    <!-- BEGIN unit:loop -->
        <!-- BEGIN entry:loop -->
            <script type="application/ld+json">
            {
                "@context": "http://schema.org",
                "@type": "Article",
                "headline": "%{ENTRY_TITLE}",
                "datePublished": "{date#Y}/{date#m}/{date#d}",
                "image": [
                    "%{HTTP_ARCHIVES_DIR}{mainImage@path}[resizeImg(300,200)]"
                ],
                "publisher": {
                    "@type": "Individual",
                     "name": "木々録",
                    "logo": {
                        "url": "//kigiroku.com/themes/blog_ver2/images/title.svg",
                        "width": 200,
                        "height": 70
                    }
                }
            }
            </script>
        <!-- END entry:loop -->
    <!-- END unit:loop -->
<!-- END_MODULE Entry_Summary -->

最近のa-blog cmsに関する記事を出力してみるとこんな感じです。

<script type="application/ld+json">
    {
        "@context": "http://schema.org",
        "@type": "Article",
        "headline": "【a-blog cms】メイン画像をエントリーごとに設定して表示する",
        "datePublished": "2001/02/28",
        "image": [
            "//kigiroku.com/archives/001/201602/w300_h200-59a8e2e0b922913cb3751ac540e0366b.jpg"
        ],
        "publisher": {
            "@type": "Individual",
            "name": "木々録",
            "logo": {
                "url": "//kigiroku.com/themes/blog_ver2/images/title.svg",
                "width": 200,
                "height": 70
             }
        }
    }
</script>

JSONで記述するべきものは【こちら】に詳しくかいてあります。

entryBodyの設定

entryBody内の【<img />】をすべて【<amp-img></amp-img>】に変更します。
【video】や【iframe】なども【<amp-◯◯>】に変更します。

<!--#include file="/include/unit.html"-->

上記のunit.html内の【img】も変更する必要性があるため複製し、【unit-amp.html】などにし、include文も変更します。

<!--#include file="/include/unit-amp.html"-->

注意

<amp-img>では【width】【height】属性が必須になっています。
ユニットで挿入した画像は自動的に【width】【height】が入りますが、ロゴなど自分でおいた画像は【width】【height】を書いておかないとエラーが出て画像が表示されないので注意が必要です。

uni.htmlの変更

【unit.html】を【unit-amp.html】にリネーム。
変更点は

  • 【<img />】【<amp-img></amp-img>】に変更
  • 【<iframe>< /iframe>】【<amp-iframe></amp-iframe>】に変更

の2点だけで大丈夫なはずです。

AMP HTMLの記事があること認識させる

AMP対応していることを知らせるために【entry.html】【amp.html】それぞれに以下を記述します。

【entry.html】

<link rel="amphtml" href="%{CANONICAL_URL}/tpl/amp.html" />

【amp.html】

<link rel="canonical" href="%{CANONICAL_URL}" />

禁止タグについて

input,textarea,select,optionなどは禁止されています

エラーの確認(Validator)

urlの末尾に【#development=1】を書いて開発者ツールをみるとバリデータが実行され、エラーがある場合はエラーが表示されます。
特に問題がない場合は【AMP validation successful.】と表示されます。


JSON-LDのJSONのチェックはこちらで。


acms
AMP

この記事を読んだ方におすすめ