AMP on qwerty.work

AMPページでCDN経由でFont-Awesomeを読み込むときはホワイトリストに気を付けて！

Wed, 20 Feb 2019 00:24:47 +0900

Googleの検索結果からAMPページが消えた

AMPページでFont-Awesomeのウェブフォントを使うことができるということで、埋め込んでみたところ、テストページではアイコンが正常に表示されたので、公開ページに適用したところ、数日後にGoogleの検索結果からAMPマーク**が表示されなくなりました。

なぜだろう？と、Google Search Consoleを久々に開いてみたところ、AMPページに問題があるというエラーの通知がありました。

「Google検索結果には表示されません」と、無効なAMPページとされていました。

原因はCDN

AMPページでFont-Awesomeを使うために、以下のようなコードでCDN経由のCSSを読み込んでいました。これがいけなかったみたいです。

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.6.3/css/all.min.css">

これの何がいけないかというと、cdn.jsdelivr.netから読み込んでいるということ。本家のuse.fontawesome.comよりもcdn.jsdelivr.netから読み込む方が速いかな？と思って使ったのがいけなかったみたいです。

PC用のページはこれで読み込んでいますが、AMPページではこれが警告の原因となり、Googleの検索結果にAMPマークが表示されなくなりました。

使えるCDNと使えないCDNがある

以下のページを見ると、- タグでFont-Awesomeを読み込む場合はAMPプロジェクトのホワイトリストに登録されたCDNでないと使えないみたいです。

https://www.ampproject.org/ja/docs/design/responsive/custom_fonts https://www.ampproject.org/ja/docs/design/responsive/custom_fonts

スタイルシートで**@font-face**を使えば特に読込先に制限なくWEBフォントを読み込むことができるみたいです。

タグで読込可能なCDN

以下のいずれかのCDNからの読み込みであればタグで読み込んでもエラーが出ずに使えるようです。

https://maxcdn.bootstrapcdn.com https://maxcdn.bootstrapcdn.com

https://use.fontawesome.com

本家から読み込んで解決

以下のページにあるFont-AwesomeのCDNのコードから読込をすることで無事解決できました。

https://fontawesome.com/start https://fontawesome.com/start

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">

Google Search Consoleで再検査したところ有効なAMPページになりました。

AMP対応ページでAmazonアソシエイトのバナーの下に謎の空白・余白ができるとき

Sun, 23 Jul 2017 15:53:12 +0900

AMP対応のページにAmazonアソシエイトのバナーを貼ると、バナーの下に謎の空白というか余白が表示されるということがありました。

原因は layout=“responsive”

AMP対応ページを出力する際、通常のHTMLのページ（非AMP）のソースをスクリプトでAMPページ用にをに置き換えています。このときに加えている**layout=“responsive”**が謎の空白・余白ができる原因でした。

画像やYou-Tubeの動画で使われているを以下のように

<amp-iframe layout="responsive" src="http://exampl.com～" width=300 height=300></amp-iframe>

とすることで画面幅100％に合わせて表示してくれるのでいいのですが、アマゾンのバナーソースのにlayout=“responsiveに使うと、ブラウザはアマゾンのバナーサイズであるwidth=“120” height=“240"が画面幅100％になるようにフレームを拡大して広い表示スペースを取ります。

しかし、レスポンシブで拡大された広いフレームの中に表示されるのは拡大されていない120×240のバナーなので、空白というか余白ができてしまいます。

アマゾンの場合はlayout=“responsive"を付けない

ということで、Amazonアソシエイトバナーの場合はタグ内でlayout=“responsive"を使わないようにしましょう。

アマゾンに限らずiTunesのバナーなど、URL内にw=300&h=250やwidth=120&height=240といったパラメーターでサイズを指定して画像を呼び出しているものは同じようにlayout=“responsive"を削除しておかないと余白や空白ができてしまいますので同じ対応が必要です。

バナーが表示されないとき

もし、****でバナーが表示されないときは以下のように**sandbox=“allow-scripts allow-same-origin allow-popups”**を加えてみると表示されると思います。

<amp-iframe sandbox="allow-scripts allow-same-origin allow-popups" src="http://exampl.com～" width=300 height=300></amp-iframe>

MovableTypeのregex_replaceでシングルクォーテーションの置換えをするとエラーが出るとき

Thu, 11 May 2017 22:21:55 +0900

MovableTypeでAMP対応のページを書き出すためのテンプレートができてもGoogle Search ConsoleのAccelerated Mobile Pagesで致命的なエラーや警告が次々出てきてHTMLのソースを修正しなければならない部分がたくさん出てきました。

border=“0”やtarget="_blank"とかstyle=""**を使ったらダメとか…。

これらと一つ一つを正規表現で置換をするMT関数のregex_replaceを使って不要な要素を削除することにしました。

ただ、自分は正規表現が苦手でなかなか思った通りの置換や不要な文字列の削除ができませんでした。しかし、なんとか解決できたので参考になった正規表現のサンプルのページやソースをメモ。

正規表現による置換の参考

https://nelog.jp/wordpress-content-to-amp https://nelog.jp/wordpress-content-to-amp

上記のページはWordPress向けにPHPで書かれておりますが、わかりやすかったです。

シングルクォーテーションでエラー

ここまではよかったのですが、シングルクォーテーション（’）でつまずきました。

例えば、borderを消そうとしたとき、**border=“0”やborder=‘0’**のように0をダブルクォーテーションで囲ってある場合と、シングルクォーテーションで囲ってある場合があります。正規表現の検索対象にシングルクォーテーション（’）が含まれていると、DreamWeaverや正規表現の使えるテキストエディタではちゃんと置換ができるのに、全く同じ正規表現をMovableTypeのテンプレートに使うとエラーが出てうまくいきませんでした。ダブルクォーテーション（"）だけだと問題なく置換できました。

エラーが出たソース

<$mt:Var name='regex_0' value='/( border| target| style| onclick)=["'](.*?)["']/g'$>
<$mt:Var name='regex_1' value=''$>
<MTUnless regex_replace="$regex_0","$regex_1">
<mt:EntryBody>
<mt:EntryMore>
</MTUnless>

["’]のように****のvalueの値にシングルクォーテーション（’）を含まれているとエラーが出ます。シングルクォーテーション（’）に¥マークを付けて**¥’**とエスケープしてもダメでした。

原因は変数の使い方

原因はMTのテンプレート内で使う変数をセットする書き方（）が悪かったようで、以下のページ内にもあるように**～**を使って変数に正規表現の検索対象を入れて使うと解決できました。

http://www.skyarc.co.jp/engineerblog/entry/regex_replace_1.html http://www.skyarc.co.jp/engineerblog/entry/regex_replace_1.html

ダブルクォーテーション（"）は特に問題ないのですが、シングルクォーテーション（’）は注意が必要です。

うまくいったソース

<MTSetVarBlock name="regex_0">/( border| target| style| onclick)=["'](.*?)["']/g</MTSetVarBlock>
<MTSetVarBlock name="regex_1"></MTSetVarBlock>
<MTUnless regex_replace="$regex_0","$regex_1">
<mt:EntryBody>
<mt:EntryMore>
</MTUnless>

これで、border=""、target=""、style=’’、 onclick=’‘など、ダブルクォーテーションとシングルクォーテーションのどちらで囲ってあっても全部削除できます。

その他参考ページ

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

Tue, 09 May 2017 19:42:31 +0900

MovableTypeのブログをAMP対応にするため、AmpConvertというプラグインを入れています。You-Tube埋め込み用のiframeタグはamp-youtubeに変換してくれますが。それ以外のiframeタグはamp-frameにしてくれませんでした。

そこでテンプレート側で正規表現で置き換える方法で対応したのでメモ。

例えばGoogle Maps

例えばGoogleマップの地図をページを埋め込むためのタグが以下だったとします。

<iframe src="https://www.google.com/maps/embed?mid=0123456789" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>

このを以下のようにしたいのです。

<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups" src="https://www.google.com/maps/d/embed?mid=mid=0123456789" width="640" height="480"></amp-iframe>

AMP用テンプレートのソース

MovableTypeのAMP用に作ったテンプレートの本文の部分を以下のようにしました。

<mt:AmpConvert fix_img_size="1" base_url="https://qwerty.work">
    <$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
    <$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>
    <mt:For regex_replace="$regex">
        <mt:EntryBody>
        <mt:EntryMore>
    </mt:For>
</mt:AmpConvert>

以下が正規表現でiframeをamp-iframeに置換前と置換後を指定している部分です。

<$mt:Var name='regex[0]' value='/<iframe(.*?)<\/iframe>/g'$>
<$mt:Var name='regex[1]' value='<amp-iframe layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"$1</amp-iframe>'$>

Googleマップの場合、amp-iframeに置き換えるだけなく、**sandbox=“allow-scripts allow-same-origin allow-popups”**がないとAMPページで地図が表示されませんでした。

sandboxについては以下参考

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

Wed, 26 Apr 2017 21:06:27 +0900

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

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

https://www.ampproject.org/ https://www.ampproject.org/

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

AMPページでは

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

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

テンプレートのソース

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

参考ページ

https://mbdb.jp/hacks/movable-type-coping-with-amp.html https://mbdb.jp/hacks/movable-type-coping-with-amp.html

https://www.brain-solution.net/blog/seo/amp-html/ https://www.brain-solution.net/blog/seo/amp-html/

https://mbdb.jp/hacks/movable-type-coping-with-amp.html https://mbdb.jp/hacks/movable-type-coping-with-amp.html

https://www.cherry-pick.jp/blog/movable-type/amp.php https://www.cherry-pick.jp/blog/movable-type/amp.php

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

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

amp/%y%/m%-f

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

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

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

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

https://github.com/ARK-Web/mt_plugin_AmpConvert https://github.com/ARK-Web/mt_plugin_AmpConvert

使い方

AMP用のコードに変換したいコードを**～**で囲みます。

<mt:AmpConvert>
	<mt:EntryBody>
	<mt:EntryMore>
</mt:AmpConvert>

これだけでimgをamp-imgに、YouTubeのiflameをamp-youtubeに変換してくれます。

AdSenseのコード

～に以下を追加

<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 <br>	height=250 <br>	type="adsense" <br>	data-ad-client="ca-pub-1234567891234567" <br>	data-ad-slot="1234567890"
</amp-ad>

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

https://support.google.com/adsense/answer/7183212?hl=ja https://support.google.com/adsense/answer/7183212?hl=ja

Analyticsのコード

～に以下を追加

<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"><br><script type="application/json"><br>{<br>  "vars": {<br>    "account": "UA-XXXXX-Y"<br>  },<br>  "triggers": {<br>    "trackPageview": {<br>      "on": "visible",<br>      "request": "pageview"<br>    }<br>  }<br>}<br></script><br></amp-analytics>

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

https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=ja

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のサンプルは以下を参考にしてみてください。

http://jsonld.com/blog-post/ http://jsonld.com/blog-post/

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

https://search.google.com/structured-data/testing-tool https://search.google.com/structured-data/testing-tool

AMP用ページのテスト

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

Googleの検証サイト

https://search.google.com/search-console/amp https://search.google.com/search-console/amp

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

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

AMP Projectの検証ツール

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

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

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

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

https://www.google.com/webmasters/tools/accelerated-mobile-pages https://www.google.com/webmasters/tools/accelerated-mobile-pages

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

AMP on qwerty.work

AMPページでCDN経由でFont-Awesomeを読み込むときはホワイトリストに気を付けて！

Googleの検索結果からAMPページが消えた

原因はCDN

使えるCDNと使えないCDNがある

タグで読込可能なCDN

本家から読み込んで解決

AMP対応ページでAmazonアソシエイトのバナーの下に謎の空白・余白ができるとき

原因は layout=“responsive”

アマゾンの場合はlayout=“responsive"を付けない

バナーが表示されないとき

MovableTypeのregex_replaceでシングルクォーテーションの置換えをするとエラーが出るとき

正規表現による置換の参考

シングルクォーテーションでエラー

エラーが出たソース

原因は変数の使い方

うまくいったソース

その他参考ページ

MovableTypeでAMPページ用にiframeをamp-iframeに置き換えて書き出す

例えばGoogle Maps

AMP用テンプレートのソース

sandboxについては以下参考

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

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

テンプレートのソース

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

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

使い方

AdSenseのコード

～に以下を追加

AMP用のAdSenseコード

Analyticsのコード

～に以下を追加

AMP用のAnalyticsコード

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

AMPページ

通常ページ（Non AMPページ）

構造化データについて

AMP用ページのテスト

Googleの検証サイト

AMP Projectの検証ツール

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

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