AMP Blogger@ブロギングライフ ブログの特徴

このブログは、Googleが提供するBlogger ブログを使用し、ウェブページを高速で表示するオープンソースの取り組みAMP(Accelerated Mobile Pages)に対応しています。本ブログは、カノニカル(正規)ページもAMPに対応するネイティブAMPのブログです。

本ブログの主な特徴

  • ネイティブAMP
  • AMPの仕様に準拠
  • AMPによる高速表示
  • 低コスト: Blogger利用でサーバー使用料不要
  • 構造化データマークアップ
  • Disqusコメントシステム
  • SNSボタン

ネイティブAMPとは

AMPは、モバイルウェブページを高速に表示させる取り組みとして発足しました。しかし、AMPはモバイルページに限定されているわけではなく、パソコンページでも表示することが可能です。

これまで、通常ページのAMP対応版として別途AMP専用のページを設けて、AMPページの正規ページ(カノニカル)URLをマークアップするのが通常でした。

2019年1月に正式リリースされたWordPress公式AMPプラグイン、AMP for WordPressでは、モバイルとパソコンページ両方でAMPをサポートするネイティブモード機能を備えています。ネイティブモードを使用した場合、パソコンページでもAMPで表示されます。カノニカルURLもAMP対応となります。

ブロギングライフBLOGは、AMP for WordPressを使用してネイティブAMPに対応しています。

AMP 準拠

AMPは、ネットワークの通信速度が遅い場合やパフォーマンスやリソースに制限のあるモバイル端末でも高速で表示させるために、Javaスクリプトを使用しないなどの制限があります。

端末では問題なくページが表示されていても、AMPの仕様を満たしていない場合、AMPページとしてインデックスされて、モバイル端末での検索時にGoogleのキャッシュから表示されることはありません。

AMPの持ち味を活かすためには、AMPの仕様に準拠することが求められます。AMPの仕様に準拠しているかは、AMP テストを行うことで確認できます。

本ブログのページは、仕様を満たしているため、AMPテストを行うと合格します。以下のURLをクリックするとAMPテストが開かれ、本ページのテストを実行して結果が表示されます。

このページのAMPテストを実行する

テストに合格した場合には、以下の様な画面が表示されます。

AMPによって高速でページを表示

AMPに準拠しているページは、GoogleのAMPキャッシュサーバーにページの情報が格納されます。モバイル端末で検索を行った際に、AMPロゴが表示されるページをクリックした場合、そのページはGoogleのキャッシュサーバーから表示されます。オリジナルのページが格納されているサーバーにアクセスするよりも、Googleのキャッシュの情報を表示するほうがより高速にページを表示することができます。

低コストで安心して利用できる

WordPressでサイトを運営する場合には、サーバーをレンタルするか専用のサーバーを自分(自社)で運営する必要があります。そのため、サーバーの利用料が発生します。サーバーは保守管理も必要となります。WordPressは、広く普及しているため、ハッカーなどの攻撃対象になりがちです。セキュリティの対策も求められます。

Bloggerは、Googleが提供するブログサービスです。無料で使用することができます。サーバーの使用料や保守管理費なども必要ありません。Googleの運営するプラットフォームのため、セキュリティも優れています。

ブログサービス側の広告表示はない

はてなブログ、SeeSaaブログ、ライブドアブログなどのブログサービスも無料で利用可能ですが、サービス側で収益を得るために利用者のブログに広告が表示される場合が多いです。(基本的に無料ブログの場合、サービス側から広告が表示されるようになっています。)

Bloggerの場合、サービス側からの広告表示は一切ありません。広告無しで、ブログを運営することができます。また、ブログで収益化を行うために広告を設置することも自由にできます。無料ブログサービスの場合、利用者の広告設置に制限があるところが多いです。

Google推奨構造化データマークに対応


構造化データは、Googleの検索エンジンがコンテンツを適切に認識する手助けとなります。近年、Googleの検索はメディアや付加情報を加えて多彩な形式で、検索結果を表示するようになっています。適切な構造化データの出力(マークアップ)を行うと、リッチな検索結果に表示されやすくなります。

リッチな検索結果の表示例と構造化データについては、Googleの「構造化データ機能を選択する」ページをご覧下さい。


AMP Blogger@ブロギングライフは、Googleが推奨するAMPの記事ページでの構造化データの出力に対応しています。



構造化データを含む AMP: [推奨] 構造化データを含む AMP ページは、トップニュース カルーセル、リッチリザルトのホスト カルーセル、映像ニュース、モバイル検索結果のリッチリザルト内に表示できます。これらの検索結果には、画像、ページのロゴ、その他の魅力的な検索結果機能を含めることができます。



Disqus コメントシステム


AMPでは、仕様上の制限からコメントシステムを実装するのが難しいです。本ブログでは、DisqusのコメントシステムをAMPページに搭載しています。コメントシステム搭載には、amp-iframeを使っています。AMPページでのコメント表示は、amp-iframeを使用して行うのが一般的です。

Disqusはソーシャルメディアとの連携やユーザーエンゲージメントを高める機能を豊富に備えています。システムを実装できない難点があります。AMP Blogger@ブロギングライフでは、高機能なコメントシステム、DisqusをAMP対応させて搭載しています。

関連記事:

Blogger ブログのコメントシステムにDisqusを設定する方法 - Blogger101@ブロギングライフ

備考:
上の記事は、通常ページでのDisqusの実装方法です。AMPページでの実装方法は、異なります。

SNS ボタン

本ブログでは、AMP公式コンポーネントのSNSボタンに加えて、SNS共有ボタンの提供サービス、AddThisを利用しています。AddThisは、公式コンポーネントではサポートされていない「はてな」の共有ボタンもサポートしています。AdThisは、共有についての解析ツールも提供しています。