ページ設定UIリファレンス
ニーズに合わせて個々のページを設定できます。 この方法で行われたすべての変更は、選択したページに限定されます。
特定のページを構成するには、 サイト メニュー (
) を開き、 サイト ビルダー → ページに移動します。 次に、カスタマイズするページの アクション (
) をクリックし、 構成を選択します。
または、アプリケーション バーの右上にある オプション (
) → 構成 (
) をクリックして、一般的なページ設定にアクセスすることもできます。
これらの設定は、以下のタブに整理されています。
これらの設定の多くは、ユーザーのロケールに応じた翻訳を提供するためにローカライズすることができます。 詳細については、 初期インスタンスのローカライズ および ローカライズ可能なサイト フィールドの変更 を参照してください。
共通
ここでは、ページの名前、フレンドリー URL、レイアウトなど、ページの基本情報を設定できます。
基本情報
名前フィールドを使用して、サイトナビゲーションに使用され、ブラウザのタイトルバーに表示されるページのタイトルを設定します。 ページ階層を表示するように設定されている場合、メニュー表示からページを非表示にすることができます。 有効にすると、非表示のページが他のナビゲーション メニューに追加された場合、そのページも表示されます。 詳細については、 ページ階層の管理 を参照してください。
子ページは親ページの表示を継承します。 また、非表示のページはデフォルトのナビゲーション メニューには表示されませんが、作成された他のナビゲーション メニューには表示できます。
URL
フレンドリー URL フィールドを使用してページの新しい URL を設定するか、 復元 アイコン (
) をクリックして、以前使用した URL を表示して復元します。 詳細については、 ページのフレンドリー URL の設定 を参照してください。
URL の末尾にスラッシュが含まれていないことを確認してください。 たとえば、 https://example.com/product/item1/の代わりに、 https://example.com/product/item1を使用します。
他のパラメータが指定されていない場合にページのデフォルトパラメータを設定するには、 クエリ文字列 を使用します。 クエリ文字列は、Web コンテンツ テンプレート内で大きな利点をもたらします。 さらに、リンクを新しいタブで開くか、特定のフレーム内で開くかなどの属性を持つ「ターゲット タイプ」フィールドを使用して、ページ リンクの動作を制御することもできます。
ページの名前とフレンドリー URL は、ページの作成時に最初は一緒に定義されますが、その後は個別に構成されます。 両者が一致するように、一緒に更新するのがベストプラクティスです。
ページレイアウト
レイアウト テンプレートは、ウィジェット ページ上のウィジェットを配置できる場所を指定します。 グローバル テンプレートまたはカスタム ページ テンプレートを使用して作成された基本ウィジェット ページの場合、ユーザーは、ページが 選択したテンプレートに加えられた変更 を継承するかどうかを決定できます。 ページが変更を継承しない場合は、カスタム レイアウトを選択して、ウィジェットの行と列のコンテナーを定義します。
カテゴリ設定
トピック と タグ を使用してページのコンテンツを分類し、ユーザーが簡単に見つけられるようにします。 タグとカテゴリの使用に関する詳細については、「 タグとカテゴリを使用したコンテンツの整理」を参照してください。
タグに特殊文字を使用すると、インデックス作成、コンテンツの取得、ページ構成の保存で問題が発生する可能性があるため、タグに特殊文字を使用しないでください。 一般的に制限される文字は次のとおりです: &、 '、 @、 \、 ]、 }、 :、 、、 =、 >、 /、 <、 [、 {、 %、 |、 +、 #、 `、 ?、 "、 、、 *、 ~、および改行 (\n) や復帰 (\r) などの空白文字。
カスタマイズの設定
ウィジェット ページの列がユーザーに対して カスタマイズ可能 かどうかを決定します。 カスタマイズが有効な場合、ユーザーがカスタマイズできる列を指定します。 詳細については、「 ウィジェット ページのユーザー パーソナライズの有効化 」を参照してください。
デザイン
ここで、ページのテーマを設定し、デザイン、CSS、JavaScript をカスタマイズできます。 ページ セットの構成ページでもこのエディターにアクセスすることができます。
テーマ
ここでは、ページ セットのテーマ設定を使用したり、ページのカスタム テーマを定義したりできます。 ページのテーマをカスタマイズすることを選択した場合、さまざまなテーマ設定を切り替えることができます。
基本設定
ここでは、ページのデザイン システムとスタイルのいくつかの領域を変更できます。
ファビコン: テーマから適用されたデフォルトのファビコンを変更します。
マスター: マスターページテンプレートを変更します。 詳細については、 マスター ページ テンプレート を参照してください。
スタイルブック: テーマから適用されたデフォルトのスタイルブックを変更します。 詳細については、「 スタイル ブックを使用してサイトの外観を標準化する 」を参照してください。
アイコン: サイトのナビゲーション メニューでページ名と一緒に表示するアイコンを選択します。
コンテンツ ページには、[ページ デザイン オプション] (
) の [編集] サイドバー メニューにマスターとスタイル ブックの設定も含まれます。
カスタマイズ
また、CSS エディターや JavaScript エディターにアクセスして、ページにカスタム コードを追加することもできます。
テーマ CSS クライアント拡張: テーマ CSS クライアント拡張 を追加して、テーマに含まれるデフォルトの CSS を完全に置き換えます。
CSS クライアント拡張: CSS クライアント拡張 を追加して、クライアント拡張を使用してページの CSS を拡張します。 これらは、テーマ CSS とマスター拡張機能の後に読み込まれます。
カスタム CSS: カスタム CSS を適用でき、テーマの後に読み込まれます。
JavaScript クライアント拡張機能とカスタム JavaScript: JavaScript クライアント拡張機能 を追加すると、このマスター ページ テンプレートを使用するページにアクセスしたときに JavaScript が実行されるようにすることができます。 カスタム JavaScript コードを追加して、ページの下部で実行することもできます。
サイトのテーマで JavaScript が使用されている場合は、個々のページまたはページ セットではなく、テーマにカスタム JavaScript コードを追加することをお勧めします。 これにより、サイトの JavaScript コードが 1 か所に保持されます。 テーマで JavaScript を使用していない場合は、サイトのすべての JavaScript コードをここに配置します。
詳細設定
追加の設定にアクセスして、ページのコンテンツと機能をカスタマイズします。
カスタム フィールド: サイト ページに定義したカスタム フィールドを表示および構成します。 詳細については、 カスタム フィールド を参照してください。
埋め込みウィジェット: Web コンテンツ テンプレート、 ページ フラグメント、または テーマを使用してページに埋め込んだウィジェットにアクセスします。
モバイル デバイスのルール: ページがページ セットの モバイル デバイスのルール を使用するか、独自に構成されているかを決定します。 これらのルールは、ページのコンテンツがさまざまな種類のモバイル デバイスでどのようにレンダリングされるかを決定します。
カスタム フィールド セクションと 埋め込みウィジェット セクションは、ページにカスタム フィールドと埋め込みウィジェットを作成した場合にのみ表示されます。
SEO
検索エンジン最適化 (SEO) とは、検索エンジン結果ページ (SERP) でのページのランキングを向上させるために使用される方法を指します。 SEO タブでは、ページのコンテンツを最適化するために使用できる設定に簡単にアクセスできます。 詳細については、 SEO およびメタデータ構成リファレンス を参照してください。
HTMLタイトル
HTML タイトル フィールドを使用して、ページの <title> タグを定義します。 このタイトルは検索エンジンがページのランク付けに使用し、検索エンジンの結果でページの見出しとして機能しますが、ページの 名前を置き換えることはありません。 HTMLタイトルの推奨される長さは 60 文字未満です。
説明
説明フィールドを使用して、ページの <description> タグを定義します。 この説明は、検索エンジンがページのランク付けに使用し、ページの検索結果プレビューにも表示されます。 説明文の推奨される長さは155文字未満です。
カスタム正規化URL
Liferay DXP 2024.Q2+/ポータル GA120+
正規ページは、類似または同一のコンテンツを持つ複数のバージョンの中から、Web ページの優先バージョンを識別します。 正規ページを選択すると、検索エンジンは、どのバージョンのページがインデックスされて検索結果にランク付けされる主要なバージョンであるかを理解できるようになります。 また、重複コンテンツによる検索ランキングの低下を防ぎ、ユーザーが最も関連性の高いコンテンツを見つけやすくします。
正規 URL をカスタマイズおよびローカライズするには、 カスタム正規 URL を使用する フィールドをオンにします。
カスタム正規 URL は、 表示ページ テンプレートではサポートされていません。
カスタム正規 URL を持つページは、 サイトマップから除外されます。
キーワード
ページのコンテンツを検索するときにユーザーが使用する可能性のある単語をリストします。 これらのキーワードはページのランキングに貢献します。 キーワードを別の行に分けるか、コンマ区切りのリストに分割します。
タイトル、見出し、説明、段落、画像の代替テキストなど、ページのコンテンツ全体でキーワードを頻繁に使用します。
プレビュー
HTML タイトル、説明、カスタム URL の設定に基づいて、検索エンジン結果ページ (SERP) にページがどのように表示されるかをプレビューします。
ロボット
Robots フィールドは、ページの <meta name="robots"> タグを構成します。 このタグは、検索エンジンがページをクロールしてインデックスする方法を制御します。 noindex などの値を指定してページがインデックスに登録されないようにしたり、 nofollow などの値を指定して検索エンジンがページ上のリンクをたどるのを防いだりすることができます。 robots メタタグの詳細については、 robots メタタグ、data-nosnippet、および X-Robots-Tag 仕様を参照してください。
これらの値を指定すると、HTML コード内の robots フィールドは次のようになります。
<meta name="robots" content="noindex, nofollow">
言語フラグを使用してこのフィールドをローカライズすることもできます。
サイトマップ
sitemap.xml ファイルに表示ページを含めるかどうかを決定し、その優先度フィールドと変更頻度フィールドを設定します。 これらは、表示ページをクロールしてインデックスするかどうか、他のサイトページと比較してどの程度優先順位を付ける必要があるか、およびどのくらいの頻度で更新するかを検索エンジンに通知します。
Liferay DXP 2024.Q2+/Portal GA120+ 「XMLサイトマップに子ページのURLを含める」ボックスをオン/オフにして、XMLマップ上の子ページのインデックス作成を有効/無効にします。 詳細については、「 XML サイトマップの設定 」をお読みください。
ページの優先度
ページの優先度を 0.0 から 1.0 に設定します。 これにより、サイトをクロールしてインデックスするツールに、サイト内の他のページと比較してページをどのように優先させるかが通知されます。
定期更新
ドロップダウン メニューを使用して、サイトをクロールおよびインデックスするツールにページが更新される頻度を通知します。
Open Graph
対応可能：Liferay DXP/Portal 7.3以降
Open Graph は、Twitter、Facebook、LinkedIn など、それをサポートするアプリケーション コンテキストで共有されるサイト コンテンツのプレビューを標準化するインターネット プロトコルです。 これは、 RDFaと同様に、ページ ヘッダーに構造化データを <meta> タグとして埋め込むことによって実現されます。
Open Graph タブでは、Open Graph <meta> タグを使用してページのメタデータを定義し、コンテンツの魅力的な表現を作成できます。 ここで定義された値は、 サイト レベルで定義されたデフォルト値を上書きします。
Open Graph <meta> タグは、認証されていないユーザーのページ ヘッダーにのみ含まれます。 ユーザーがログインしている場合には含まれません。
画像
画像フィールドを使用して、ページの次の Open Graph <meta> プロパティを定義します。
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
画像の別の説明
画像の alt 説明フィールドを使用して、ページの og:image:alt プロパティを定義します。 ［言語フラグ］ボタンを使用して画像の別の説明をローカライズすることもできます。
カスタムタイトルと説明文
カスタム タイトルと説明フィールドを使用して、 og:title および og:description プロパティを定義します。 これらのプロパティは、ページの HTML タイトルと説明の代わりにリッチ プレビューに使用されるカスタム テキストを作成します。 また、これらの値は、 ［言語フラグ］ ボタンでローカライズすることができます。
Open Graphのページ表示のプレビュー
ページの Open Graph 構成をプレビューします。 このセクションでは、プロトコルをサポートするコンテキストでページの URL が共有されたときに、ページのコンテンツがどのように表示されるかを表示します。 ただし、画像の比率はURLが掲載されている場所によって変わることがあります。
カスタムメタタグ
ここで、ページの <head> にカスタム <meta> タグを追加できます。 これらのタグはページの HTML ソース コードでのみ表示され、ページのデータを記述し、検索エンジンの結果やソーシャル メディアの投稿などのさまざまなコンテキストでそのデータがどのように表示されるかを決定するために使用されます。 各タグはプロパティ属性とコンテンツ属性で定義されます。
カスタム <meta> タグは、認証されていないユーザーのページ ヘッダーにのみ含まれます。 ユーザーがログインしている場合には含まれません。
