本機能は提供を終了しました。
「はてなブログMedia」では、記事をAMPで配信することができます。
AMPとは
AMPは、モバイル環境でWebコンテンツの表示を高速化する仕組みです。GoogleなどWeb業界各社の協力により、世界中から多くのコンテンツ企業やテクノロジー企業が参加しています。
AMPで配信されたコンテンツは、AMPの表示に対応したモバイルのサイト・アプリで利用されます。AMPに対応したGoogle検索などのサービスが、AMPで配信されたページのデータをクロールすると、モバイル環境のアプリ内ブラウザなどでそのデータを利用して、通常のWebページより高速に表示します。
詳細は以下をご確認ください。
-
AMP - a web component framework to easily create user-first web experiencest
-
Google Developers Japan: Accelerated Mobile Pages プロジェクトについて -- 導入ガイド日本語版を本日公開しました
AMPコンテンツをクロールするタイミングやキャッシュの利用については、AMPを利用する各サービスによります。オプションを有効にしてもすぐにクロールされるとは限りませんし、オプションを無効にしたのにAMPで表示され続けることもあります。
AMPに対応していないサービスや、モバイルのブラウザでブログを直接閲覧する場合には、ブログの設定に応じた通常のモバイル表示になります。
「はてなブログMedia」をAMPで配信するメリット・デメリット
| メリット | デメリット |
|---|---|
|
デザイン上のカスタマイズなど、ブログの表現に制限があります |
AMPを配信する方法
管理画面 > [設定] > [詳細設定]の「AMPを配信する(β版)」にチェックをいれると、AMPが配信されます。
AMPは開発が進行中のプロジェクトのため、本機能もβ版として提供しています。AMPの仕組み等をご理解のうえ、ご利用ください。
AMP用の解析タグやCSSを設定する
管理画面 > [デザイン] > [カスタマイズ]からAMPに関する設定ができます。
設定できる各項目と説明は以下です。
| 項目 | 説明 |
|---|---|
| AMP用headタグ内 | ペイウォールとサブスクリプションタグを記述できます。 |
| AMP用bodyタグ内 | 解析タグを記述できます。 |
| AMP用CSS*1 | CSSを直接記述し、AMPで記事が配信される際のデザインをカスタマイズできます。 |
*1 AMPのCSSにはいくつかの制約があります。AMPプロジェクトのWebサイトなどを参考にしてください。なお、デザインやレイアウトのカスタマイズに関しては、「はてなブログMedia」のサポート対象外となります。
AMPの表示をプレビューする
記事編集画面（PC版）の「プレビュー」タブで、「スマートフォン (AMP)」タブに切り替えて、AMPでの表示をプレビューすることができます。
AMPを配信停止する方法
管理画面 > [設定] > [詳細設定]の「AMPを配信する(β版)」に入っているチェックをはずすと、AMPの配信が停止されます。
これによりAMPHTMLは302のステータスコードを返しますので、google 検索においては キャッシュされたAMPも消えます。
AMPを利用する際の注意点
- デザイン設定でカスタマイズできるサイドバーモジュールや、HTMLの自由記述（記事上下、ヘッタ、フッタなど）は配信されません
- 記事中の
style属性など、スタイル関連のHTMLは反映されません - 記事中のJavaScriptは反映されません（このため広告などが表示されないことがあります）
- （HTTPSでなく）HTTPで配信されている画像は表示されません（はてなフォトライフやInstagramなどはHTTPSに対応しています）
「はてなブログMedia」のその他の設定項目との関係
AMPの利用において、「はてなブログMedia」のその他の設定項目とも次のような関係があります。
- AMPへのアクセスは、「詳細設定」画面の「Google Analytics埋め込み」で設定されたGoogleアナリティクスのプロパティに記録されます
- 「詳細設定」画面の「はてなによる広告を表示しない」をチェックしている場合、AMPページでもはてなによる広告は表示しません
- スマートフォンアプリではAMP配信を設定できませんが、スマートフォン向けブラウザ版ダッシュボードでは設定できます