Using Display Page Templates
ご覧のページは、お客様の利便性のために一部機械翻訳されています。また、ドキュメントは頻繁に更新が加えられており、翻訳は未完成の部分が含まれることをご了承ください。最新情報は都度公開されておりますため、必ず英語版をご参照ください。翻訳に問題がある場合は、 こちら までご連絡ください。

ディスプレイページテンプレートの SEO と Open Graph 設定の構成

対応可能:Liferay DXP/Portal 7.3以降

表示ページ テンプレートは、専用の URL で個々のコンテンツ項目を表示するカスタム レイアウトです。 これらのレイアウトはフラグメントとウィジェットの両方を使用し、Web コンテンツの記事、ドキュメント、ブログエントリなど用に作成できます。 各テンプレートには独自の SEO および Open Graph 設定があり、手動または動的に入力できます。

表示ページテンプレートのSEOとOpen Graph設定を構成するには、

  1. サイト メニュー (Site Menu) を開き、 デザインページ テンプレートに移動して、 ページ テンプレートの表示 タブをクリックします。

    他の種類のページ (コンテンツ ページなど) に対して SEO と Open Graph を構成することもできます。 これを行うには、 サイトビルダーページ に移動し、設定するページの横にある アクション (Actions icon) → 設定をクリックします。 次のステップをスキップして、チュートリアルを通常どおり続行します。

    表示ページテンプレートのタブに移動します。

  2. 目的のテンプレートの アクション (Actions icon) をクリックし、 編集を選択します。 テンプレートを編集するときは、アプリケーション バーの オプション (Options icon) をクリックし、 構成 (Configure icon) をクリックします。

  3. SEO または Open Graph タブに移動し、必要な設定を入力します。

    [SEO]タブと[Open Graph]タブに目的の構成を入力します。

  4. [保存]をクリックします。

    重要

    [SEO]タブと[Open Graph]タブを行き来すると、保存されていない変更は失われます。

SEOとOpen Graphの設定を行う際、値を直接入力したり、フィールドマッピングを使用して動的に値を追加したりすることが可能です。 使用可能なマッピングオプションは、テンプレートのコンテンツタイプとサブタイプによって異なります。 フィールドをマップするには、 フィールド セレクター (Mapping button) をクリックし、使用可能なフィールドから選択します。 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のタイトルを一緒に更新することをお勧めします。

マッピングされた複数のフィールドを組み合わせて、独自のHTMLタイトルを構築することができます。

説明

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

ページの説明に推奨される長さは 155 文字未満です。

ヒント

SEOとOpenGraphの説明を一緒に更新することをお勧めします。

複数のマッピングされたフィールドを組み合わせて、カスタム HTML の説明を作成します。

ロボット

Robots フィールドは、表示ページの <meta name="robots"> タグを構成します。 このタグは、検索エンジンがページをクロールしてインデックスする方法を制御します。 noindex などの値を指定してページがインデックスに登録されないようにしたり、 nofollow などの値を指定して検索エンジンがページ上のリンクをたどるのを防いだりすることができます。 robots メタタグの詳細については、 robots メタタグ、data-nosnippet、および X-Robots-Tag 仕様を参照してください。

これらの値を指定すると、HTML コード内の robots フィールドは次のようになります。

<meta name="robots" content="noindex, nofollow">

言語フラグを使用してこのフィールドをローカライズすることもできます。

Robots フィールドは、表示ページの robots.txt ルールを構成します。

サイトマップ

sitemap.xml ファイルに表示ページを含めるかどうかを決定し、その優先度フィールドと変更頻度フィールドを設定します。 これらは、表示ページをクロールしてインデックスするかどうか、他のサイトページと比較してどの程度優先順位を付ける必要があるか、およびどのくらいの頻度で更新するかを検索エンジンに通知します。

Liferay DXP 2024.Q2+/Portal GA120+ 「XMLサイトマップに子ページのURLを含める」ボックスをオン/オフにして、XMLマップ上の子ページのインデックス作成を有効/無効にします。 詳細については、「 XML サイトマップの設定 」をお読みください。

sitemap.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:title 値を作成します。

説明

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

ヒント

SEOとOpenGraphの説明を一緒に更新することをお勧めします。

複数のマッピングされたフィールドを組み合わせて、カスタムの og:description 値を作成します。

画像

画像フィールドは、表示ページの 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 プロパティを定義します。

画像の別の説明

画像の代替テキストの説明フィールドは、表示ページの og:image:alt プロパティを定義します。このプロパティは、表示されるコンテンツの og:image プロパティに対してスクリーン リーダーによって読み取られる代替テキストを決定します。

<meta property="og:image:alt" content="This is an example." />

デフォルトでは、このフィールドは表示ページ テンプレートではマップされていません。 つまり、別のテキスト フィールドを選択しない限り、テンプレートはサイト レベルで設定された代替テキストをデフォルトとして使用します。

画像のalt説明フィールドは、表示ページのog:image:altプロパティを定義します。