ディスプレイページテンプレートの SEO と Open Graph 設定の構成
対応可能:Liferay DXP/Portal 7.3以降
表示ページ テンプレートは、専用の URL で個々のコンテンツ項目を表示するカスタム レイアウトです。 これらのレイアウトはフラグメントとウィジェットの両方を使用し、Web コンテンツの記事、ドキュメント、ブログエントリなど用に作成できます。 各テンプレートには独自の SEO および Open Graph 設定があり、手動または動的に入力できます。
表示ページテンプレートのSEOとOpen Graph設定を構成するには、
-
サイト メニュー (
) を開き、 デザイン → ページ テンプレートに移動して、 ページ テンプレートの表示 タブをクリックします。注他の種類のページ (コンテンツ ページなど) に対して SEO と Open Graph を構成することもできます。 これを行うには、 サイトビルダー → ページ に移動し、設定するページの横にある アクション (
) → 設定をクリックします。 次のステップをスキップして、チュートリアルを通常どおり続行します。
-
目的のテンプレートの アクション (
) をクリックし、 編集を選択します。 テンプレートを編集するときは、アプリケーション バーの オプション (
) をクリックし、 構成 (
) をクリックします。 -
SEO または Open Graph タブに移動し、必要な設定を入力します。
![[SEO]タブと[Open Graph]タブに目的の構成を入力します。](https://resources.learn.liferay.com/images/dxp/latest/en/sites/displaying-content/using-display-page-templates/configuring-seo-and-open-graph-settings-for-display-page-templates/images/02.png)
-
[保存]をクリックします。
重要[SEO]タブと[Open Graph]タブを行き来すると、保存されていない変更は失われます。
SEOとOpen Graphの設定を行う際、値を直接入力したり、フィールドマッピングを使用して動的に値を追加したりすることが可能です。 使用可能なマッピングオプションは、テンプレートのコンテンツタイプとサブタイプによって異なります。 フィールドをマップするには、 フィールド セレクター (
) をクリックし、使用可能なフィールドから選択します。 Liferay DXP 7.4 U1 および Portal 7.4 GA5 以降、この方法で追加されたフィールドは、フィールド参照 ID とフィールド ラベル (${fieldReferenceID:Field Label}) の 2 つの部分を持つ ${} プレースホルダーとして表されます。
以前のバージョンでは、マッピング プレースホルダーにはフィールド参照 ID のみが含まれます (例: ${title}、 ${authorName}、 ${Text84981642})。
Liferay では、カスタム Web コンテンツおよびドキュメント構造内のフィールド参照 ID は人間が判読できないため、管理側でわかりやすくするためにフィールド ラベル値を提供しています (例: ${Text84981642:Contributors})。 このラベルはエンドユーザーには表示されず、マッピングにも影響しないため、ユーザーが自由に編集することができます。 マッピングは、プレースホルダーのフィールド参照IDにのみ依存します。
Liferay は可能な限り、マッピングされたフィールドの翻訳を提供します。 ただし、マッピングされたフィールド以外で提供されたテキストは翻訳されません。
SEO設定の参考
検索エンジン最適化 (SEO) とは、検索エンジン結果ページ (SERP) でのページのランキングを向上させるために使用される方法を指します。 表示ページ テンプレートを使用すると、SEO 向けにコンテンツの表示ページを構成できます。
HTMLタイトル
HTML タイトル フィールドは、表示ページの <title> タグを定義します。 このタイトルは検索エンジンがページのランク付けに使用し、検索エンジンの結果ではページの見出しとして機能します。 デフォルトでは、表示ページ テンプレートはこのフィールドを ${title}にマップします。 この値を直接編集し、フィールド セレクターを使用して追加のマッピングを含めることができます (例: ${title} - ${authorName:Author Name})。
HTMLタイトルの推奨される長さは 60 文字未満です。
SEOとOpenGraphのタイトルを一緒に更新することをお勧めします。

説明
説明フィールドは、表示ページの説明 <meta> タグを定義します。 検索エンジンはこの説明を使用してページのランク付けを行い、検索エンジンの結果にページのプレビューとして表示されます。 デフォルトでは、表示ページ テンプレートはこのフィールドを ${description}にマップします。 この値を直接編集し、フィールド セレクターを使用して追加のマッピングを含めることができます (例: ${description} - ${authorName:Author Name})。
ページの説明に推奨される長さは 155 文字未満です。
SEOとOpenGraphの説明を一緒に更新することをお勧めします。

ロボット
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 サイトマップの設定 」をお読みください。

Open Graph 設定の参考
対応可能:Liferay DXP/Portal 7.3以降
Open Graph は、Facebook、Slack、Twitter など、それをサポートするアプリケーション コンテキストで共有されるサイト コンテンツのプレビューを標準化するインターネット プロトコルです。 これは、 RDFaと同様に、ページ ヘッダーに構造化データを <meta> タグとして埋め込むことによって実現されます。
Liferay DXP を使用すると、ページの Open Graph <meta> タグを動的に構成する表示ページ テンプレートを作成できます。 ここで定義された値は、 サイト レベルで定義されたデフォルト値を上書きします。
Open Graph <meta> タグは、認証されていないユーザーのページ ヘッダーにのみ含まれます。 ユーザーがログインしている場合には含まれません。
タイトル
タイトル フィールドは、表示ページの og:title プロパティを定義します。このプロパティは、リッチ プレビューでコンテンツに表示されるタイトルを定義します。 デフォルトでは、このフィールドは ${title}にマッピングされます。 この値を直接編集し、フィールド セレクターを使用して追加のマッピングを含めることができます (例: ${title} - ${authorName:Author Name})。
SEOとOpenGraphのタイトルを一緒に更新することをお勧めします。

説明
説明フィールドは、表示ページの og:description プロパティを定義します。このプロパティは、リッチ プレビューでコンテンツに表示される説明を決定します。 デフォルトでは、このフィールドは ${description}にマッピングされます。 この値を編集し、フィールド セレクターを使用して追加のマッピングを含めることができます (例: ${description} - ${authorName:Author Name})。
SEOとOpenGraphの説明を一緒に更新することをお勧めします。

画像
画像フィールドは、表示ページの og:image プロパティを定義し、リッチプレビューでコンテンツに表示される画像を構成します。 基本的な画像タグに加えて、DXP は、選択した画像の表示方法を決定する多くの構造化プロパティを自動的に追加します。 画像フィールドは、次の <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" />
デフォルトでは、このフィールドは表示ページ テンプレートではマップされていません。 つまり、別の画像フィールドを選択しない限り、テンプレートはサイト レベルで設定された画像にデフォルト設定されます。

画像の別の説明
画像の代替テキストの説明フィールドは、表示ページの og:image:alt プロパティを定義します。このプロパティは、表示されるコンテンツの og:image プロパティに対してスクリーン リーダーによって読み取られる代替テキストを決定します。
<meta property="og:image:alt" content="This is an example." />
デフォルトでは、このフィールドは表示ページ テンプレートではマップされていません。 つまり、別のテキスト フィールドを選択しない限り、テンプレートはサイト レベルで設定された代替テキストをデフォルトとして使用します。
