AMPページ作成でつまずいた所。メモ書きです。
2017/7/12（水）天気 晴れ 暑い暑い、既に夏本番のような暑さです。
朝は墓参り。
メモ的なことを。
リンクばかりになりそうです。
HPの一部からAMP化を図っています。
AMPについては
スマホでのHPの表示を早くさせる仕組みです。
平均でも3秒程度での表示、少し重いページだと５・６・７秒もかかる。
すると見る人は諦めて他のサイトへ行ってしまう。
それを回避するための仕組みです。
詳しくは
→いよいよ導入されるAMP（Accelerated Mobile Pages）の基礎知識から対応方法まで！まとめ
とりあえず1ページだけ既存のページをapmにしてみようと。
基本は今までと同じHTMLで記述で、基本はググってください。
いくらでも出てきます→amp 作成
上記のリンク先がよくまとめられていると思います。
作成してgoogleに登録されたサイトは
→http://www.suga-kenntiku.com/amp/eko/place_gennkann.html
（完成形ではないです。）
自分がやっていてつまずいた所。
「構造化データ」の入れ込みです。
私のページの場合は<head></head>内に
ーーーーーーーーーーーーーーーーーーーーーーーー
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://www.suga-kenntiku.com/eko/place_gennkann.html"
},
"headline": "(エコカラット施工例集 玄関 |エコカラット施工例 |須賀建築)",
"image": {
"@type": "ImageObject",
"url": "http://www.suga-kenntiku.com/amp/logo-amp-min.png",
"height": 187,
"width": 700
},
"datePublished": "2017-07-11T08:00:00+08:00",
"dateModified": "2017-07-11T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "須賀 徹"
},
"publisher": {
"@type": "Organization",
"name": "須賀建築",
"logo": {
"@type": "ImageObject",
"url": "http://www.suga-kenntiku.com/amp/suga-min.png",
"width": 60,
"height": 60
}
},
"description": "(須賀建築が玄関に施工したエコカラットの施工例集です。)"
}
</script>
ーーーーーーーーーーーーーーーーーーーーーーーー
としました。
書式はあっても内容をどうかけばよいのかわからない。
またエラーが帰ってきてしまい。
そのエラーでググると同じような人がいて某所で質問をしていました。
回答は素人が手を出すものではない、他にやるべきっ事がある。というような厳しい返しが。
納得します。
他のところで構造化データは必須では無いというような内容も読みましたが
googleのSearch ConsoleでのAMPテストをすると通らないのです。
もう一度ググる、するとMIYSUE-LINK様のページ→AMP HTMLに構造化データを記述する
上記のページを読んで理解して書き込んでも構造化データのテストを繰り返して上記でOKとなりました。
もう一つの難関はスタイルシートの外部化であり、それをAMPページに読み込ませることです。
AMPページのスタイルシートは直接書き込みが基本ですが。
それだと大量のページを一度に変更する場合、手間が大変です。
（※AMPで使える量は50KBまでですが私の自作程度のHPのスタイルシートの量は調べた所12KBであり直に書き込んでも全く問題が無いです。
スタイルシートで使える属性も決まっていて通常のHTML文書とは少し違う所です。）
これも調べると
ーーーーーーーーーーーーーーーーーーーーーーーー
</style>
ーーーーーーーーーーーーーーーーーーーーーーーー
朝は墓参り。
メモ的なことを。
リンクばかりになりそうです。
HPの一部からAMP化を図っています。
AMPについては
スマホでのHPの表示を早くさせる仕組みです。
平均でも3秒程度での表示、少し重いページだと５・６・７秒もかかる。
すると見る人は諦めて他のサイトへ行ってしまう。
それを回避するための仕組みです。
詳しくは
→いよいよ導入されるAMP（Accelerated Mobile Pages）の基礎知識から対応方法まで！まとめ
とりあえず1ページだけ既存のページをapmにしてみようと。
基本は今までと同じHTMLで記述で、基本はググってください。
いくらでも出てきます→amp 作成
上記のリンク先がよくまとめられていると思います。
作成してgoogleに登録されたサイトは
→http://www.suga-kenntiku.com/amp/eko/place_gennkann.html
（完成形ではないです。）
自分がやっていてつまずいた所。
「構造化データ」の入れ込みです。
私のページの場合は<head></head>内に
ーーーーーーーーーーーーーーーーーーーーーーーー
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "Article",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "http://www.suga-kenntiku.com/eko/place_gennkann.html"
},
"headline": "(エコカラット施工例集 玄関 |エコカラット施工例 |須賀建築)",
"image": {
"@type": "ImageObject",
"url": "http://www.suga-kenntiku.com/amp/logo-amp-min.png",
"height": 187,
"width": 700
},
"datePublished": "2017-07-11T08:00:00+08:00",
"dateModified": "2017-07-11T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "須賀 徹"
},
"publisher": {
"@type": "Organization",
"name": "須賀建築",
"logo": {
"@type": "ImageObject",
"url": "http://www.suga-kenntiku.com/amp/suga-min.png",
"width": 60,
"height": 60
}
},
"description": "(須賀建築が玄関に施工したエコカラットの施工例集です。)"
}
</script>
ーーーーーーーーーーーーーーーーーーーーーーーー
としました。
書式はあっても内容をどうかけばよいのかわからない。
またエラーが帰ってきてしまい。
そのエラーでググると同じような人がいて某所で質問をしていました。
回答は素人が手を出すものではない、他にやるべきっ事がある。というような厳しい返しが。
納得します。
他のところで構造化データは必須では無いというような内容も読みましたが
googleのSearch ConsoleでのAMPテストをすると通らないのです。
もう一度ググる、するとMIYSUE-LINK様のページ→AMP HTMLに構造化データを記述する
上記のページを読んで理解して書き込んでも構造化データのテストを繰り返して上記でOKとなりました。
もう一つの難関はスタイルシートの外部化であり、それをAMPページに読み込ませることです。
AMPページのスタイルシートは直接書き込みが基本ですが。
それだと大量のページを一度に変更する場合、手間が大変です。
（※AMPで使える量は50KBまでですが私の自作程度のHPのスタイルシートの量は調べた所12KBであり直に書き込んでも全く問題が無いです。
スタイルシートで使える属性も決まっていて通常のHTML文書とは少し違う所です。）
これも調べると
ーーーーーーーーーーーーーーーーーーーーーーーー
<style amp-custom>
<?php echo file_get_contents("../style.css");?></style>
ーーーーーーーーーーーーーーーーーーーーーーーー
上記のようにかけばいいと。
（他の書き方もあるそうです、例 <?php include="style.css" ?>）
※１と３行目は基本です。
「PHP」ってなんだ？見たことはあるが使ったことはないそ。
調べてみてもわからない、しかし動けばいいのだ！
これをAMPサイトに記述してページを表示させてみても全く反映しない。
もしかして文字が1文字違うのだろうかとか
変なところにスペースがはいっていないだろうかとか
ダブルクｵーテーションは大文字ではなかろうかとか。
何度やり直してもダメ。
ふと考えたのが「PHP」って通常のHTML文書の中で書き込めさえすれば動くものなのか？
「phpをhtmlで動かす」で調べると出てきました。
「PHP」のバージョンが色々あって自分のサーバーで使えるバージョンを探して
.htaccess内の一行目に
ーーーーーーーーーーーーーーーーーーーーーーーー
AddType application/x-httpd-php .php .html
ーーーーーーーーーーーーーーーーーーーーーーーー
※１と３行目は基本です。
「PHP」ってなんだ？見たことはあるが使ったことはないそ。
調べてみてもわからない、しかし動けばいいのだ！
これをAMPサイトに記述してページを表示させてみても全く反映しない。
もしかして文字が1文字違うのだろうかとか
変なところにスペースがはいっていないだろうかとか
ダブルクｵーテーションは大文字ではなかろうかとか。
何度やり直してもダメ。
ふと考えたのが「PHP」って通常のHTML文書の中で書き込めさえすれば動くものなのか？
「phpをhtmlで動かす」で調べると出てきました。
「PHP」のバージョンが色々あって自分のサーバーで使えるバージョンを探して
.htaccess内の一行目に
ーーーーーーーーーーーーーーーーーーーーーーーー
AddType application/x-httpd-php .php .html
ーーーーーーーーーーーーーーーーーーーーーーーー
上記の一文を加えました。
参考サイトは
→「拡張子.htmlでPHPを実行する方法 – 「htmlをインクルードさせフレーム構造を実現する」です。
これをやってサーバーにアップロードして
作成したAMPページを表示させてみましたが変化は無し。
・・・
少し悩んで、表示させたページは自分のファイルの中のページでありサーバー上のサイトではないのに気づいてサーバー上のサイトを表示をさせると、あら不思議、スタイルシートが効いてきれいなサイトが出現します。
右クリックをしてページのソースを表示させるともっと不思議でスタイルシートがズラズラと出てきます。
これが「PHP」の力なのかと。
Google アナリティクスの設置について
これも間違えました。
正解だけ書きます。
まずは<head></head>内に下記を
ーーーーーーーーーーーーーーーーーーーーーーーー
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<script type="application/json">
{
"vars": {
"account": "◯◯-△△△△△△△-△"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
→「拡張子.htmlでPHPを実行する方法 – 「htmlをインクルードさせフレーム構造を実現する」です。
これをやってサーバーにアップロードして
作成したAMPページを表示させてみましたが変化は無し。
・・・
少し悩んで、表示させたページは自分のファイルの中のページでありサーバー上のサイトではないのに気づいてサーバー上のサイトを表示をさせると、あら不思議、スタイルシートが効いてきれいなサイトが出現します。
右クリックをしてページのソースを表示させるともっと不思議でスタイルシートがズラズラと出てきます。
これが「PHP」の力なのかと。
Google アナリティクスの設置について
これも間違えました。
正解だけ書きます。
まずは<head></head>内に下記を
ーーーーーーーーーーーーーーーーーーーーーーーー
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
ーーーーーーーーーーーーーーーーーーーーーーーー
そして
<body></body>内にそして
ーーーーーーーーーーーーーーーーーーーーーーーー
<amp-analytics type="googleanalytics" id="analytics1"><script type="application/json">
{
"vars": {
"account": "◯◯-△△△△△△△-△"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
ーーーーーーーーーーーーーーーーーーーーーーーー
を。
"◯◯-△△△△△△△-△"の部分はご自分のを使って下さい。
その他に参考にしたページ
AMP 英語が読めて理解ができるならいいのですが日本語になっている部分が少なすぎて参考程度にしました。
リンクをさせて頂いたサイト意外にも沢山のサイト。
ページを読みました。
書いて頂いた方に、感謝します。
ありがとうございます。
もう少し立つとgoogle様がモバイルファーストインデクッスをするそうです。
そのためにも今から少しずつでもしておく必要があるのです。
→https://www.suzukikenichi.com/blog/google-introduces-mobile-first-index/
2017/7/13 追加
AMPページを作成してGoogleに登録されたか否かは下記のサイトで確認でします。
https://ampbyexample.com/advanced/using_the_google_amp_cache/
このあたりはMIYSUE-LINK様のページ→Google AMP Cacheの活用方法
に詳しく載っています。
※内容に間違いがあったらすみません。
昨日と今日の事を思い出しながら書きました。
その筋の専門ではありません。
オッサンと言うよりジジイです。
本業は大工とエコカラットです。
ブツブツ・・・
を。
"◯◯-△△△△△△△-△"の部分はご自分のを使って下さい。
その他に参考にしたページ
AMP 英語が読めて理解ができるならいいのですが日本語になっている部分が少なすぎて参考程度にしました。
リンクをさせて頂いたサイト意外にも沢山のサイト。
ページを読みました。
書いて頂いた方に、感謝します。
ありがとうございます。
もう少し立つとgoogle様がモバイルファーストインデクッスをするそうです。
そのためにも今から少しずつでもしておく必要があるのです。
→https://www.suzukikenichi.com/blog/google-introduces-mobile-first-index/
2017/7/13 追加
AMPページを作成してGoogleに登録されたか否かは下記のサイトで確認でします。
https://ampbyexample.com/advanced/using_the_google_amp_cache/
このあたりはMIYSUE-LINK様のページ→Google AMP Cacheの活用方法
に詳しく載っています。
※内容に間違いがあったらすみません。
昨日と今日の事を思い出しながら書きました。
その筋の専門ではありません。
オッサンと言うよりジジイです。
本業は大工とエコカラットです。
ブツブツ・・・
コメント
コメントを投稿