SquarespaceでAMPを使用する

ブログ投稿の軽量バ⁠ージ⁠ョンを作成することで⁠、モバイル端末での読み込みを高速化できます⁠。

最終更新日 2024年8月20日

AMP (⁠Accelerated Mobile Pages⁠) は⁠、Webペ⁠ージの軽量バ⁠ージ⁠ョンを作成して⁠、モバイル端末での読み込みを高速化します⁠。AMPバ⁠ージ⁠ョンのペ⁠ージは⁠、アイキ⁠ャ⁠ッチ画像や見出しとともにGoogleの検索結果に表示されます⁠。訪問者が検索結果をタ⁠ップすると⁠、簡素化されたデザインでモバイルでの読みやすさを優先したAMPバ⁠ージ⁠ョンのペ⁠ージが表示されます⁠。

ヒント

AMPのWebサイトにアクセスして⁠、ブログ投稿の例を参照し⁠、詳細を確認してください⁠。このサイトにはAMPを有効にする手順が記載されていますが⁠、これらはスキ⁠ップできます⁠。AMPは⁠、すべてのSquarespaceサイトで自動的に有効にすることができます⁠。

始める前に

  • AMP形式で表示できるのはブログ投稿のみです⁠。他のペ⁠ージではAMPを利用することができません⁠。
  • AMPはGoogleのモバイル検索結果にのみ表示されます⁠。他のモバイル検索エンジンでは⁠、ブログ投稿の標準モバイル バ⁠ージ⁠ョンへのリンクが表示されます⁠。
  • Googleの検索結果をクリ⁠ックするか⁠、ブラウザ⁠ーにブログ投稿のAMPバ⁠ージ⁠ョンのURLを手動で入力することで⁠、モバイル端末でブログ投稿のAMPバ⁠ージ⁠ョンを表示することができます⁠。他の方法でアクセスした場合⁠、AMPが有効でも⁠、ブログ投稿の外観は変わりません⁠。
  • Squarespace Analyticsは⁠、AMPが有効なブログ ペ⁠ージのトラフ⁠ィ⁠ックを記録しません⁠。

AMPで投稿がどのように変化するか

AMP形式では⁠、ペ⁠ージのHTMLが必要最低限にそぎ落とされます⁠。Squarespaceにおいて⁠、これはAMP投稿では一部のブロ⁠ックが表示されない可能性があることを意味しています⁠。AMPデザインはすべてのブログ投稿の標準であり⁠、サイトのスタイルとは無関係です⁠。

AMPでは⁠、以下のような大きな変化がいくつか発生します⁠。

  • ペ⁠ージの余白が再調整されます⁠。
  • すべてのテキストがMuliフ⁠ォントで表示されます⁠。
  • 対応しているブロ⁠ックは1列にスタ⁠ックされます⁠。これは⁠、AMPが有効にな⁠っていない場合でも⁠、モバイル上のすべてのSquarespaceサイトの標準です⁠。
  • CSSやその他のカスタム コ⁠ードは表示されません⁠。
  • 投稿の下部に⁠、サイト全体にリンクする [⁠も⁠っと見る⁠] リンクが表示されます⁠。

AMP投稿には次のブロ⁠ックが表示されます⁠。

  • オ⁠ーデ⁠ィオ ブロ⁠ック
  • 埋め込みブロ⁠ック
  • ギ⁠ャラリ⁠ー ブロ⁠ック - すべてのギ⁠ャラリ⁠ー ブロ⁠ック タイプはスライドシ⁠ョ⁠ーとして表示されます⁠。
  • 画像ブロ⁠ック
  • 線ブロ⁠ック
  • マ⁠ークダウン ブロ⁠ック
  • 引用ブロ⁠ック
  • テキスト ブロ⁠ック
  • 動画ブロ⁠ック

他のすべてのブロ⁠ックはAMP投稿に表示されません⁠。代わりに⁠、訪問者には⁠、すべてのコンテンツを見るための完全な投稿へのリンクが表示されます⁠。

KB Guide Image

AMP投稿における画像ブロ⁠ック

ブログ投稿にインライン レイアウトの画像ブロ⁠ックが含まれている場合⁠、キ⁠ャプシ⁠ョンはすべてプレ⁠ーン テキストで入力し⁠、余分な書式設定を含めないようにしてください⁠。キ⁠ャプシ⁠ョンに余分な書式設定が含まれていると⁠、投稿がAMP投稿に変換されない可能性があります⁠。

他のレイアウトの画像ブロ⁠ックでは⁠、キ⁠ャプシ⁠ョンの代わりにタイトルとサブタイトルが使用されます⁠。これらのテキスト フ⁠ィ⁠ールドはAMP投稿には表示されません⁠。訪問者が画像のタイトルとサブタイトルを表示するには⁠、完全なサイトにアクセスする必要があります⁠。

AMP形式を有効にする

AMPを有効にするには⁠、次の手順に従います⁠。

  1. [⁠ブログ設定⁠] パネルを開きます⁠。
  2. [⁠Accelerated Mobile Pages⁠] まで下にスクロ⁠ールします⁠。
  3. [⁠AMPを使用⁠] にチ⁠ェ⁠ックを入れます⁠。

これで⁠、Googleが最適化されたブログ投稿をインデ⁠ックスに登録できるようになりました⁠。Google Search Consoleを使用してインデ⁠ックスの再作成をリクエストすると⁠、このプロセスを高速化できます⁠。

AMP投稿をプレビ⁠ュ⁠ーする

AMPを有効にすると⁠、Googleのモバイル検索結果でAMPバ⁠ージ⁠ョンのURLが自動的に生成されます⁠。投稿のURLを手動で変更する必要はありません⁠。

AMP投稿をプレビ⁠ュ⁠ーするには⁠、投稿のURLの末尾に「⁠⁠?format=amp⁠」を追加します⁠。これにより⁠、コンピ⁠ュ⁠ータ⁠ーまたはモバイル端末でブログ投稿のAMP形式バ⁠ージ⁠ョンが生成されます⁠。

たとえば⁠、標準のブログ投稿URLが次の形式の場合

http⁠://myblog⁠.com/blog/2016/2/19/mypost

AMPバ⁠ージ⁠ョンを表示するには⁠、次のURLを使用します⁠。

http⁠://myblog⁠.com/blog/2016/2/19/mypost⁠?format=amp

このURLを使用してAMP投稿を訪問者と共有することもできますが⁠、サイトにはすでにレスポンシブなモバイル用スタイルが含まれているため⁠、おすすめしません⁠。

ヒント

標準のブログ投稿のURL形式は⁠、[⁠ブログ設定⁠] パネルでカスタマイズできます⁠。

よくある質問

AMP投稿のデザインを変更できますか⁠?

すべてのAMP投稿は⁠、モバイルで最高のビジ⁠ュアル体験を提供するために自動的にフ⁠ォ⁠ーマ⁠ットされており⁠、サイトのデザインに依存しない標準的なスタイルが設定されています⁠。

ブログ投稿エデ⁠ィタ⁠ーを開いてブロ⁠ックを並べ替えることで⁠、ブロ⁠ックの順序を変更することはできます⁠。

Googleの検索結果でAMP形式のブログ投稿が見つからない

AMPが有効にな⁠っていない場合でも⁠、投稿が特定の検索語句の結果として表示されない理由はいくつかあります⁠。まず⁠、[⁠ブログ設定⁠] パネルでAMPが有効にな⁠っていることを確認してから⁠、サイトの表示を妨げている可能性のある一般的なシナリオを確認してください⁠。

投稿の構造化デ⁠ータのテストでロゴ エラ⁠ーが発生した

サイトにロゴがない場合⁠、URLをGoogleのStructured Data Testing Toolでテストすると⁠、ロゴ エラ⁠ーが表示されます⁠。サイトのロゴがなくても⁠、投稿はAMP用にフ⁠ォ⁠ーマ⁠ットされますが⁠、ロゴを追加すると⁠、Googleの検索結果で投稿が上位に表示される可能性があります⁠。

Footer Image
  • コミ⁠ュニテ⁠ィからサポ⁠ートを受ける

  • 高度なカスタマイズについて⁠、コミ⁠ュニテ⁠ィからサポ⁠ートを受けられます⁠。

  • Squarespace Expertを雇う

  • 経験豊富なデザイナ⁠ーや開発者から力を借りて⁠、オンラインで目を引くサイトを構築しまし⁠ょう⁠。