HubSpot の CMS では、ランディングページとウェブサイトページを作成できます。ウェブサイトページは、会社のウェブサイトおよび詳細メニューの構成要素です。ランディングページは通常、フォームでのコンバージョンを促すためのコンテンツオファーを作成するために使用されます。
新しいページの作成を開始する前に、必要なアセットがすべて揃っていることを確認してください。デザインマネージャーツールでテンプレートを作成するか、マーケットプレイスからテンプレートを見つけまます。サイトアセットをファイルマネージャーにアップロードして、会社のブランディングで設定をカスタマイズします。
デザインのインスピレーションを求めている場合は、アカデミーとデザインフォーラムから顧客の例をご覧ください。
新規ページを作成する
1 から新しいページを作成するには、次の手順に従います。- HubSpot アカウントで、ランディングページまたはウェブサイトページに移動します。
- [ランディングページを作成]/[ウェブサイトページを作成] をクリックします。
- テンプレートをクリックして、新しいページのレイアウトとして使用します。
- ページに名前を付け、[ページを作成] をクリックします。
既存のページを編集するには、次の手順を実行します。
- HubSpot アカウントで、ランディングページまたはウェブサイトページに移動します。
- ダッシュボードで既存のページの上にカーソルを置き、[編集] をクリックします。
ページコンテンツを編集する
ページエディターに移動したら、コンテンツの編集と最適化を開始できます。
ページのコンテンツを編集するには、次の手順を実行します。
- モジュールの上にカーソルを置き、鉛筆アイコンをクリックして、コンテンツやスタイルを変更します。モジュールアイコンをクリックしてページのモジュールのリストを開き、テンプレートのモジュールのリストを開いてサイドバーエディターで編集することもできます。
- 編集するモジュールをクリックします。
- サイドバーエディターで変更を行います。
- [適用] をクリックして、ページエディターで作業中の変更が反映されるのを確認します。
- 編集が完了したら、[保存してモジュールリストに移動] をクリックします。
リッチテキスト、ヘッダー、単行テキストのモジュールは、すべてページエディターで直接変更できます。残りのモジュールタイプは、スライドインモジュールのサイドバーエディターで編集できます。テンプレートにフレキシブルカラムが含まれている場合、ページエディターまたはモジュールサイドバーでモジュールを編集または再配置できます。
モジュールは既定で、ページに適用されるスタイルシートに基づいてスタイル設定されますが、コンテンツエディターでカスタムインラインスタイルを適用することもできます。
そのためには、次の手順を実行します。
- スタイル設定するモジュールの上にカーソルを置きます。
- 一番上にあるペイントブラシアイコンをクリックします。サイドバーペインが表示され、そのモジュールのスタイル設定オプションが表示されます。
ページ設定を編集する
ページ設定を編集するには、ページエディターの一番上にある [設定] タブをクリックして、基本的なページ情報を追加します。
- 内部ページ名: これは、ページの内部名です。最初にページを作成したときに追加した名前を反映していますが、ここで編集できます。参照用のみの内部名であり、ウェブサイト訪問者にはこの名前は表示されません。
- ページタイトル: これは、ページが読み込まれるときにウェブブラウザーの一番上のタブに表示される語句です。
- ページ URL: これは、ページの URL です。訪問者がこのページに移動すると、ブラウザー内の URL バーに表示されます。公開された後であっても、ページ URL は編集できます。
- メニューにページを追加: これにより、コンテンツ設定の新規または既存の詳細メニューに、現在作業中のウェブサイトページを追加できます。
- メタディスクリブション: これは、ページタイトルの下で検索結果に表示されるコンテンツです。
- キャンペーン: このドロップダウンメニューを使用して、ページを HubSpot キャンペーンに関連付けます。[新規追加] を選択すれば、新しいキャンペーンを作成できます。
- サムネイル画像: ソーシャルメディアでページが共有される際に特定の画像をサムネイル表示するには、このスイッチをオンに切り替えます。コンピューターから画像を選択するには [アップロード] をクリックし、ファイルマネージャーから画像を選択するには [画像を参照] をクリックします。
詳細オプション
[詳細オプション] をクリックして、さらにページの設定をカスタマイズします。これらの設定は、ページを公開するために必要なわけではありません。
- ページを表示するのにパスワードを必須とする: このチェックボックスをクリックして、訪問者がページコンテンツにアクセスするために必要なパスワードを追加します。
- 特定の日にページを失効させる: このチェックボックスをクリックして、特定の日に失効してリダイレクトするようにページをスケジュールします。
- 追加のコードスニペット: ここで、[ヘッド HTML] フィールドまたは [フッター HTML] フィールドにコードスニペットを追加できます。これは、生の HTML またはトラッキング
コード をページの タグまたは
- HubDB: 動的データベースを管理するために HubDB テーブルを使用している場合は、ここでページに追加できます。
- テンプレート: ページに適用されたテンプレートを確認します。テンプレートプレビューをクリックしてテンプレートを編集するか、[別のテンプレートを選択] をクリックしてページに新しいテンプレートを適用します。
- スタイルシート: ページに添付されるスタイルシートを管理します。ドロップダウンメニューを使用して、既定のスタイルシートを有効にするか、無効にするか、または既定設定を使用するかを選択します。[スタイルシートを添付] をクリックして、ドロップダウンメニューを使用してページに新しいスタイルシートを追加します。
- 正規 URL: 詳細設定の一番下に、ページの正規 URL をカスタマイズするフィールドがあります。これは、サイトの他のページに類似したコンテンツがあり、検索結果でどのページを上位にランク付けするか検索エンジンに指示する場合に便利です。
SEO のためにページを最適化する
サイドバーナビゲーションの棒グラフアイコンをクリックして、SEO オプティマイザーを開きます。ここでは、ページをトピックのいずれかに添付したり、コンテンツを改善するための推奨事項を確認したりできます。
ページをプレビューする
目アイコンをクリックして、プレビューオプションを表示します。ここから、次の内容を更新できます。
- デバイスのプレビュー: デバイスタイプアイコンのいずれかをクリックして、特定のデバイスおよび方向についてページエディターでページのプレビューを確認します。
- スマートプレビュー: [指定のコンタクトとしてページをプレビュー] ドロップダウンメニューを使用し、コンタクトデータベースからコンタクトを選択します。これにより、その訪問者にページコンテンツがどのように表示されるかを確認できるため、ページでのパーソナライゼーションやスマートコンテンツのプレビューに役立ちます。
- 共有プレビュー: [新しいウィンドウで開く] をクリックして、ブラウザーでページのライブプレビューを確認します。このプレビューリンクは、ページが実際に公開されるまで有効です。[コピー] をクリックして、クリップボードにリンクをコピーしてチームと共有します。
ページを公開またはスケジュールを設定する
コンテンツを追加し、検索エンジン向けに最適化して、ページプレビューを確認したら、コンテンツを公開する準備が整います。[公開またはスケジュール] をクリックして、今すぐページを公開するか、後の予定として公開をスケジュールするかを選択します。[後の予定としてスケジュール] を選択した場合、必ず予定の日時を更新してください。選択が完了したら、[スケジュール] または [公開] をクリックします。
