メインコンテンツにスキップ
お客さまへの大切なお知らせ:膨大なサポート情報を少しでも早くお客さまにお届けするため、本コンテンツの日本語版は人間の翻訳者を介さない自動翻訳で提供されております。正確な最新情報については本コンテンツの英語版をご覧ください。
Blog

ブログで加速されたモバイルページ(AMP)を使用する

更新日時 2021年 6月 18日

対象製品

Marketing Hub  Professional, Enterprise
CMS Hub  Professional, Enterprise
Marketing Hub Basic(旧製品)

AMPつまり加速されたモバイルページは、モバイルデバイスにほぼ瞬時に読み込まれモバイル固有のページ形式です。コンテンツをすばやく読み込めるように、ブログ記事のAMPバージョンは、Javascript ファイル、スタイルシート、HubSpotフォーム、ヘッドHTML、フッターHTMLを読み込みません。

AMPの使用には次のような制限事項があります。

  • 現時点では、AMPをHubSpotランディングページやウェブサイトページで使用することはできません。
  • AMPが有効になったブログ投稿記事のサムネイル画像は、少なくとも1200ピクセル幅でなければなりません。
  • AMP対応コンテンツの閲覧数はコンタクトのタイムラインでトラッキングされません。これは、HubSpotトラッキングコードに含まれるJavaScriptがAMPによってブロックされるためです。

ブログのすべての投稿記事、または特定の投稿記事に関してAMPをオンにすることができます。 

すべてのブログ投稿記事にAMPを適用する

注:HubSpotでホストされている複数のブログでAMPをオンにする場合は、各ブログについてこれらの手順を繰り返す必要があります。

  • HubSpotアカウントにて、ナビゲーションバーに表示される[設定アイコン settings]をクリックします。
  • 左のサイドバーメニューで、[ウェブサイト]>[ブログ]の順に進みます。
  • 複数のブログがある場合は、[修正するブログを選択]ドロップダウンメニューをクリックしてブログを選択します。
  • [Google AMP]タブに移動します。
  • [Google AMPフォーマットのページを有効にする]スイッチをクリックしてオンに切り替えます。

enable-amp

  • Google AMPページのロゴ、フォント、およびフォントの色をカスタマイズします。このコンテンツに関するGoogleの推奨事項をご覧ください。
  • [保存]をクリックします。 
HubSpotはブログのテンプレートの各ブログ投稿記事を検証します。Googleが次回にブログ投稿記事をクロールするとき、AMPバージョンがキャッシュされます。AMPバージョンにエラーがある場合、GoogleはEメールを直接送信して知らせます。

特定のブログ投稿記事にAMPを適用する

注:このオプションは、ブログ設定でAMPが有効になっていない場合にのみ使用できます。


  • HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • ブログ記事の上にカーソルを置き、[編集]をクリックします。
  • [スケジュール]タブに移動します。
  • [Google AMP]セクションで、[このブログ記事のためだけにGoogle AMPを有効にする]チェックボックスを選択します。

enable-google-amp-for-this-post

  • 右上の[更新]または[公開]をクリックして、変更内容を稼働状態にします。

HubSpotはこの特定のブログ記事を検証します。Googleが次回にブログ投稿記事をクロールするとき、AMPバージョンがキャッシュされます。AMPバージョンにエラーがある場合、GoogleはEメールを直接送信して知らせます。

AMPの問題のトラブルシューティング

Google Search ConsoleのレポートでAMPページに問題がある場合は、HubSpotは[AMP検証]ツールを確認することを推奨します。このツールでは、エラーについて説明するメッセージが表示され、エラーの位置が特定されます。 

[URL]フィールドにAMP形式のURL(param hs_amp=true)を入力する必要があります。ブログ記事のAMP プレビュー URLを見つけるには、次の手順を実行します。

  • HubSpotアカウントにて、[マーケティング] > [ウェブサイト] > [ブログ]の順に進みます。
  • ブログ記事の名前をクリックします。
  • 記事の詳細ページで、[詳細を表示]をクリックします。
  • 右側のパネルで、[AMPプレビュー]セクションまでスクロールダウンします。

AMP%20preview

最も一般的なAMPエラーの原因には次があります。

  • 属性'style'が<div>タグで表示されない:これは、多くの場合、AMPページではまだサポートされていないWistia埋め込みコードに起因しています。 
  • 特定の形式を除き <script>タグを使用できない:これは、多くの場合、AMPページではまだサポートされていないWistia埋め込みコードに起因しています。
  • 属性'style'が<span>タグで表示されない:これは、多くの場合、AMPページではまだサポートされていないWistia埋め込みコードに起因しています。
  • <a>タグの属性'href'に対する不正なURL '...':記事本文にあるリンクURLが不適切にフォーマットされます。
  • <a>タグの属性'href'に対する無効なURLプロトコル '...':記事本文にあるリンクURLが不適切にフォーマットされます。
  • AMP向けの画像は、少なくとも1200ピクセルの幅が必要です。ブログ記事には、幅が少なくとも1200ピクセルのサムネイル画像がありません。