更新日時 2021年 3月 4日
新しいページを作成して、検索エンジン向けに最適化してからウェブサイトで公開する方法を説明します。ランディングページを使用することにより、新しい訪問者をサイトに惹きつけるコンテンツオファーを提供できます。ウェブサイトページのツールでは、HubSpot上に置かれた自社サイトのすべてのコンテンツを管理できます。
始める前に
- どのタイプのページコンテンツを編集する場合でも、ユーザー権限として書き込みアクセス権が必要です。ランディングページまたはウェブサイトページを公開するには、ユーザー権限として公開アクセス権が必要です。
- 公開用のページドメインがHubSpotに接続されていることを確認してください。無料のランディング ページ ビルダーを使用している場合、すぐに公開できる状態のHubSpotブランドのドメインがアカウントに含まれています。
- 幅広いコンテンツ戦略の観点から、執筆する記事のトピックを特定します。コンテンツを戦略的に編成して相互にリンクすることで、ハイパーリンクを設定したキーワードに関して検索エンジンでの順位が向上します。ページを最適化する方法をご覧ください。
ページテンプレートのタイプ
ページのコンテンツ、レイアウト、スタイルの編集オプションは、使用するテンプレートのタイプによって異なります。
- スターターテンプレートには、ドラッグ＆ドロップ操作による編集機能と、フォント、色、ボタンのスタイルをカスタマイズするためのシンプルなインターフェイスが組み込まれています。
- テーマテンプレートには、ドラッグ＆ドロップ操作による編集機能、専用のテーマモジュール、テーマ設定が備わっています。
- カスタムテンプレートを使用する場合は、開発者と協力して、HubSpot開発者向けCMSドキュメントを参考に、コードテンプレートを作成します。開発者がデザイン マネージャー ツールを使用してレイアウトテンプレートを作成することもできます。
- アセットマーケットプレイスには、他にもページテンプレートがあります。
注：ページエディターと［デザイン］タブ内で使用できるオプションは、すべてのスターターテンプレートで共通しています。アセットマーケットプレイスから購入したコードテンプレート、レイアウトテンプレート、テーマテンプレート、およびテンプレートには、開発者によるスタイルオプションが組み込まれています。
ページエディターに進む
新規ページを作成する
ランディングページまたはウェブページをゼロから作成するには、次の手順に従います。
- HubSpotアカウントで、［マーケティング］>［ウェブサイト］>［ランディングページ］または［ウェブサイトページ］の順に進みます。
- 右上の［作成］ドロップダウンメニューをクリックし、ウェブサイトページまたはランディングページを選択します。
- テンプレートの上にカーソルを置き、右上の［プレビュー］をクリックして、デスクトップまたはモバイルデバイスでの表示を確認します。このテンプレートを使用して新しいページを作成するには、右上の［テンプレートを使用］をクリックします。
- ページに内部ページ名を付け、［ページを作成］をクリックします。
注：ページを公開する前にページ設定でページの公開タイトルを設定する必要があります。
既存のページを編集する
既存のページを編集するには、次の手順に従います。
- HubSpotアカウントで、ランディングページまたはウェブサイトページに進みます。
- ダッシュボードで既存のページの上にカーソルを置き、［編集］をクリックします。
ページコンテンツを編集する
ページエディター内で、テンプレートに含まれる各モジュールのコンテンツを編集できます。ページエディター内でページのレイアウトの編集または新しいモジュールの追加を行うには、ページテンプレートにドラッグ＆ドロップエリアを追加します。
モジュールのコンテンツを編集する
左側の［コンテンツ］タブで、ページテンプレートのすべてのモジュールを表示したり編集したりできます。ページにグローバルコンテンツ（ページヘッダーなど）が含まれている場合は、グローバル コンテンツ エディター内でそのコンテンツを編集します。
注：開発者がテンプレートをどのようにコーディングしたかによって、各モジュールのコンテンツに使用できるオプションは異なります。
モジュールのコンテンツを編集するには、モジュールの上にカーソルを重ねて鉛筆アイコンをクリックします。
モジュールタイプによっては（見出しなど）、ページプレビューで直接編集できます。また、モジュールをクリックすると、左側のパネルに編集オプションが表示されます。モジュールタイプに共通のコンテンツ編集オプションの詳細をご覧ください。
ページ上のすべてのモジュールを網羅したリストを表示するには、左側のパネルの［コンテンツ］タブをクリックします。表示されたリストから、コンテンツオプションを編集するモジュールをクリックします。
テンプレートにドラッグ＆ドロップエリアまたはフレキシブルカラムが含まれている場合、ページエディターでモジュールを追加または再配置することができます。
ページエディターでアクションを元に戻す場合、またはやり直す場合は、左上の元に戻すアイコンまたはやり直しアイコンをクリックします。
注：元に戻したりやり直したりできるのは、ウェブブラウザーの現在のセッションで加えた編集のみです。ページエディターを更新すると、以前の編集操作はなくなります。
モジュールに適用されるスタイルを編集する
ボタンや見出しなど、ページ上で何度も繰り返されるモジュールには、多くの場合、テンプレートのスタイルシートやウェブサイトのテーマ設定に基づく既定のスタイルがあります。これらのスタイルに変更を加えると、通常は同じテンプレートを使用している他のページにも影響します。
注：各モジュールで使用できるスタイル設定オプションは、ページテンプレートによって異なる場合があります。
検索エンジン向けにページを最適化する
上部のナビゲーションから、［最適化］タブをクリックしてSEOの最適化ツールを開きます。ここでは、ページをトピックのいずれかに添付したり、コンテンツを改善するための推奨事項を確認したりできます。
ページ設定を編集する
ページ設定を編集し、基本的なページ情報を追加するには、ページエディターの最上部にある［設定］タブをクリックします。
- 内部ページ名：内部ページ名は、最初にページを作成した時点に追加し、ダッシュボード内での参照時に表示される名前です。訪問者には表示されません。
- ページタイトル：ページが読み込まれるとウェブブラウザーの最上部のタブに表示されるタイトル。
- ページURL：ページのURL。訪問者がこのページに移動すると、ブラウザー内のURLバーにこのURLが表示されます。公開後でも、ページURLは編集できます。
- メニューにページを追加：コンテンツ設定の新規または既存の詳細メニューに、現在作業中のウェブサイトページを追加します。
- メタディスクリブション：検索結果で、ページタイトルの下に表示されるコンテンツ。
- キャンペーン：ページをHubSpotキャンペーンに関連付けます。新しいキャンペーンを作成するには、［新規追加］を選択します。
- キービジュアル：ソーシャルメディアでのページ共有時に特定のキービジュアルを使用するには、このスイッチをクリックしてオンに切り替えます。［アップロード］をクリックしてコンピューターから画像を選択するか、［画像を参照］をクリックしてファイルツールから画像を選択します。
詳細オプション
注：［詳細オプション］セクションは、スターターテンプレートでは使用できません。
［詳細オプション］をクリックして、さらにページの設定をカスタマイズします。ページを公開する上で、これらの設定は必須ではありません。
- 特定の日にページを失効させる：このチェックボックスは、特定の日に失効してリダイレクトされるようにページをスケジュールする場合に選択してオンにします。
- ページのオーディエンスアクセスを管理：このページのオーディエンスアクセス管理のためのオプションを選択します。
- 訪問者がページコンテンツにアクセスするために必要なパスワードを追加するには、［非公開 - パスワードが必要］を選択します。
- ページを表示する前に訪問者がサイトに登録できるようにするには、［非公開 - 登録が必要］を選択します（CMS Hub Enterpriseのみ）。オーディエンスアクセスの制御に関する詳細をご覧ください。
- 追加のコードスニペット：［ヘッダーHTML］フィールドまたは［フッターHTML］フィールドにコードスニペットを追加します。これは、未加工のHTMLまたはトラッキング
コード をページの<head>タグまたは<footer>タグに追加する場合に便利です。
- HubDB：動的なデータベースコンテンツ用としてウェブ開発者がHubDBテーブルをセットアップした場合は、ここでHubDBテーブルにページを追加できます。［テーブルを選択］をクリックしてからテーブルを選択して、このページをデータベースに追加します。
- テンプレート：ページに適用されているテンプレートを表示します。［別のテンプレートを使用］をクリックして新しいテンプレートをページに適用するか、または［このテンプレートを編集］をクリックしてテンプレートを編集します。
注：テンプレートの入れ替えは、テンプレートタイプが同じ場合にのみ可能です。
- スタイルシート：ページに添付するスタイルシートを管理します。既定のスタイルシートを有効にするか、無効にするか、それとも既定の設定に従うかを選択するには、ドロップダウンメニューをクリックしていずれかのオプションをクリックします。［スタイルシートを添付］をクリックし、ページに添付する既存のスタイルシートを選択します。スタイルシートはテーマテンプレートには適用されません。
- canonical URL：ページのcanonical URLをカスタマイズします。
ページをプレビューする
右上の［プレビュー］をクリックして、ページがさまざまなデバイスタイプ上でどう表示されるかを確認します。プレビューでパーソナライゼーションとスマートコンテンツをテストすることもできます。モバイルデバイス上でのページの外観をカスタマイズする方法をご覧ください。
- デバイスプレビュー：［新しいウィンドウで開く］をクリックして、ブラウザーの新しいタブでページのライブプレビューを確認します。このプレビューリンクは、ページが実際に公開される前でも有効です。チームで共有するためのリンクをクリップボードにコピーするには、［共有可能なリンクをコピー］をクリックします。プレビューリンクを表示するチームメイトは、HubSpotにログインしている必要があります。
- スマートプレビュー：［プレビュー動作］ドロップダウンメニューをクリックして、データベース内のさまざまなコンタクトに対してページがどう表示されるかをプレビューします。
- コンタクトを選択して、その特定のコンタクトのプロパティー値に基づいてパーソナライゼーションがどのように表示されるかをプレビューします。2番目のドロップダウンメニューをクリックして、データベースから特定のコンタクトを選択します。
- スマートルールを選択して、条件を満たすコンタクトに対してページのスマートコンテンツがどう表示されるかをプレビューします。2番目のドロップダウンメニューをクリックして、プレビューする特定のスマートルールを選択します。
- デバイスタイプ：［モバイル+タブレット］をクリックして、スマートフォンまたはタブレットデバイス上でのページのライブプレビューを表示します。［デスクトップ］をクリックして、ウェブブラウザーでページがどのように表示されるかを確認します。
ページを公開またはスケジュールを設定する
コンテンツを追加して、検索エンジン用に最適化し、訪問者に対してどう表示されるかをプレビューしたら、ページ公開の準備完了です。
- ［公開またはスケジュール］タブをクリックし、今すぐ公開する場合は［今すぐ公開］を選択します。また後で特定の日時にこのページを公開する場合は［後の予定としてスケジュール］をクリックします。
- ページの必須項目が欠落している場合は、［公開］ボタンの右上にアラートが表示されます。
- ページの必須項目がすべて完了したら、［公開］をクリックします。
