2017.04.03スポンサーリンク皆さんのブログはAMPに対応していますか?僕が使っている「はてなブログ」でも2016年6月よりベータ版として対応されましたが、広告(AdSense)が表示出来ない、CSS、JAVASCRIPTが使えないなど、様々な制約があったので対応せずに今日まで過ごしていました。パソコンページ」と今までの優先順位から逆転する「モバイルファーストインデックス」を導入していく事も発表されました。AMPに対応しているかどうかの記載は特にありませんでしたが、今後はそちらも関連してくるだろうと個人的には思います。今まではAMPに対応せずに、出来る限りページの表示速度を上げようと足掻いては来ましたが、これ以上は難しいところまで来てしまったのでAMPに対応することにしました。表示速度が遅いので改善するまで足掻いてみた!レスポンシブデザインに変更しました!そこで、はてなブログでAMPに対応する上で必要な設定や広告、デザインの注意事項をまとめて紹介したいと思います。目比較(AMP対応:非対応)実際のページを確認CSSについて(4/3更新)広告(AdSense編)アクセス解析(Analytics編)メリット・デメリットまとめはてなブログのAMP対応AMP対応について、レンタルブログサービスならでは制約もあるので、それらを中心に紹介していきます。配信する」にチェックを入れて変更するボタンを押したら完了です。注意事項はてなブログでAMPに対応させる場合、注意事項がたくさんあるのでまずはそちらから紹介します。はてなブログのデザインテーマは反映されないサイドバーモジュールや、HTMLの自由記述(記事上下、ヘッタ、フッタなど)が配信されないstyle属性(CSS)が反映されない記事中のJavaScriptが反映されないはてなスターが反映されないはてなカウンターは非対応(カウントされない)ざっくり説明すると、設定しているテーマやCSS、JAVASCRIPTは反映せず、広告も掲載出来ないのですごくシンプルなページとなります。その結果、無駄な部分が抑えられ劇的に表示スピードが上がるというものですね!(正確にはキャッシュや最適化された軽量HTMLを使っているからです。ヘルプをご覧ください。見た目比較(AMP対応:非対応)ちょっと見にくくて申し訳ありませんが、はてなブログでよく使うツールなどを使用したページでAMP対応と非対応(通常)ページで比較してみました。見てもらうとわかるように、AMP対応では、テーマやCSSが反映されていないので、デザインがかなりあっさりしています。TubeはAMPに対応しているので特にデザインに変化はありませんでした。実際の表示を確認する場合は、記事ページのURLの末尾に「?amp=1」を追加してアクセスすると確認出来ます。配信する」にチェックを入れている場合です。例)◆通常ページwww.aritai.net/entry/my-life◆AMP対応ページwww.aritai.net/entry/my-life?amp=1※現在は対応していません。Tools:100点満点の91点!◆GTmetrix:スコアがAの読み込み速度2秒、リクエスト数10件でした。この数値は本当に凄いです!AMPに対応する前に測定した時と比べると雲泥の差ですwCSSについて(4/3更新)基本としてAMP対応ページではCSSは外部ファイルがNGでファイルの容量も50KBを超えるとエラーとなります。設定しているテーマも反映されないのだと思います。こればかりは、はてなさんが何とかしてくれない限りは現状では難しいでしょうね...。今まで上記のようにCSSが反映されずに薄っぺらいページでしたが2017年3月30日にAMPページにCSSを適用出来るようになりました。これによってデザインが大幅に改善されました。はてなブログのAMP用CSSを試してみました!はてなブログで「AMP用CSS」が設定出来るようになりました。そこでブログをAMP対応する上で、AMP用CSSを使うとデザインがどのようになるのか検証してみました。www.aritai.net広告(AdSense編)デザインがダメならなんとか広告だけでも対応したい所です。広告については、アドネットワークサービスでもAMP対応が進んできています。ブロガーさんがよく使うサービスの中では「i-mobile」や「nend」も対応しています。「AdSense」ももちろん対応しています。広告を表示する方法を説明します。すべてsupport.google.comただAdSenseをAMPページでも表示させるにはAMP対応の広告コード(<amp-ad></amp-ad>)に変更する必要があります。はてなブログのAMPページでもAdSenseを掲載出来ないかと試してみましたが、皆さんが言っているように現状では出来ないようです...。広告についても、デザイン同様に運営側で対応してもらうのを待つしか無いと思います。AMPページにAdSenseを掲載する方法はあるようです。方法はデザイン設定からではなく、記事ページに直接コードを書くようです。はてな側で対応するまでは、諦めていましたがこれはありがたいですね!アクセス解析を見てみても、アクセス数の多いページではAMPページも結構見られているようなので助かります。(id:psne)さんが説明されていますが、この方法は今後使えなくなる可能性もあるようです。すなばいじりなんだか盛り上がってますね。感じたので、短信みたいなメモ。バリデーター(正しいかチェックするやつ)で確認してもらうと分かるのですが、最近見つかった(ように見える)「はてなブログのAMP表示で貼り付け出来るぞ!」なやつは、将来的に表示されなくなる可能性があります。え、何?という方は、チェックできるサイトでペタリと広...psn.hatenablog.jpやはり、はてなさんがしっかりと対応してくれないといろいろと問題はありそうですね...。アクセス解析(Analytics編)注意事項でも書きましたが、はてなブログの「はてなカウンター」はAMPに対応していないので、AMPページが表示されてもカウントされません。Analytics埋め込み」でAnalyticsの「プロパティID」をしっかりと設定していればGoogleアナリティクスではカウントされるので、AMPに対応する場合はしっかり設定をしておきましょう!メリット・デメリットはてなブログにおいてAMPに対応するメリットは、ずばり「検索流入の増加」が見込める点でしょうね!先程も説明したように、GoogleでもAMPページを紹介する専用枠があるので、検索結果に直接の影響がなくても、そこからの流入が増えることが期待できます!そして、ページの表示速度が劇的にアップするので、閲覧者に対してもページの表示速度の遅れからくる不快感(ストレス)を減らすことが出来ると思います。逆にデメリットは、現状では非常に多いですね^^;テーマが反映しないCSSが使えない※対応済みスクリプトが使えない広告が表示できない※一部対応など、他にもいろいろとあると思います。今後、はてなブログのAMP対応が更に進めば状況は変わると思いますが、現状では、AMPに対応してアクセスアップに期待するか、現状を維持しデザイン・収益をとるかというところでしょうね!僕も、このタイミングでAMP対応したのは、一種のギャンブルですねwまとめ2017年4月現在のはてなブログのAMP対応についてまとめると、こんな感じです!検索流入が増える可能性があります。表示速度が凄いです!デザインは諦めて下さいCSSが使えるようになりました。ソーシャルボタンも無理ですはてなスターも使えませんアクセス数はAnalyticsで!広告が掲載出来ないので収入が減る可能性があります。AMPへの対応は、はてなさんも発展途上という感じですが、ブログのアクセスは検索流入からが大半だと思います。その中でもスマートフォンからのアクセスはこれから更に増える可能性もあります。「モバイルファーストインデックス」もそうですが、確実にスマートフォンの検索結果は速度重視へと変わってきていると思います。呼ばれるモバイル端末でのページ表示速度を高速化するプロジェクトに本格的に取り組むようで、検索順位にも影響が出るとか、出ないとか。ブログを運営されている人たちには気になるニュースですね。はてなブログページの表示速度|Googleの指示通りに改善したけどこれがはてなの限界ですか?!はてなブログで最大限にページ読み込み速度を上げようと考えられる全ての方法を試してみました!僕の中ではこれ以上の改善は見込めないと思っています。そこで読み込み速度を改善するために実施してきた改善策を全て紹介したいと思います。はてなブログはてなブログ|管理画面で読者一覧が確認できるようになったよ!はてなブログの管理画面(ダッシュボード)に読者一覧を確認出来るようになったようです。はてなブログはてなブログProに変更しました。変更してよかった!この度、はてなブログProに変更しました。はてなブログproをご存知無い方に簡単に機能の説明を書いておきます。メージとしてはAmazonの商品紹介リンクと同じ感じですね。Amazonの紹介機能は以前よりありましたが、やっと楽天も対応してくれたようです!そこで、楽天の商品を紹介する為の簡単な説明を紹介したいと思います。「はてなフォトライフ2HTML」に大変お世話になりました!はてなブログブログリニューアル!レスポンシブデザインに変更しました!当ブログのデザインをレスポンシブデザインに変更しました!レスポンシブデザインはPCに依存するので、あまり好きではないのですが、はてなブログのスマートフォン専用ページでは機能面でちょっと物足りなく感じる部分があったので思い切ってレスポンシブデザインに変更しました。はてなブログ祝!読者100人達成!皆さんありがとう!はてなブログの運営を開始して6ヶ月。読者さんが100人を突破しました!はてなユーザーさんだけで100人達成出来たことは本当に嬉しい限りです。そこで、読者登録して下さっている方の中から数名の方を紹介させていただきたいと思います。はてなブログはてなブログ|サイドの関連記事を記事下に表示する方法!内部リンク強化にも効果的!はてなブログで関連記事を記事下に表示する方法はいろいろと試してきましたが、Javascriptを使ってHTMLとして表示する一番良い方法を見つけました!はてなブログのAMP用CSSを試してみました!ブログサービスがSSLに対応し始めたので、はてなブログも準備しておいた方が良いかもね!カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。フォローお願いします!スポンサーリンクよく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。2015年11月サイト内検索よく読まれている記事はてなブログをAMPに対応する時の注意点!設定・デザイン・広告まとめ2017.04.032019.08.02はてなブログのAMP用CSSを試してみました!2017.03.312019.08.02はてなブログ|画像の「alt属性」を編集する方法!これでSEO対策もバッチリ!2017.02.242019.08.07はてなブログに楽天商品紹介機能が追加!2016.05.242019.08.07はてなのブログカード風にリンクをカスタマイズする方法!2017.02.092019.08.08ありがとう!はてなブログ。4年間クソお世話になりました!2019.09.12はてなブログ|記事の直下に広告を掲載する方法2016.01.202019.08.07はてなブログの大見出しが<h2>ではなく<h3>なのか?SEO的にも変更すべき!2016.04.132019.08.08はてなブログ|アクセスアップの為にやっておきたいグループ登録2016.01.262019.08.08はてなブログ|表示速度が遅いので改善するまで足掻いてみた!2016.10.262019.08.07新着記事パグ犬よもぎのInstagramとYoutube始めました!2019.10.172019.10.31写真で振り返る、姫路・神戸観光1泊2日の家族旅行2019.09.23自虐ネタで大盛況?姫路セントラルパークの混雑事情2019.09.19ありがとう!はてなブログ。ダイエットAMPプール姫路城メリケンパークパグ犬YoutubePHPInstagram著者カツヲ40代3児の父でサラリーマン。個人事業主でもありアルバイトもしています。しても開業→会社員+個人事業+アルバイトの三足のわらじで生計を立てています。検索タイトルとURLをコピーしました。