テンプレート処理中にエラーが発生しました。
Java method "com.liferay.portal.json.JSONFactoryImpl.createJSONObject(String)" threw an exception when invoked on com.liferay.portal.json.JSONFactoryImpl object "com.liferay.portal.json.JSONFactoryImpl@51577ebb"; see cause exception in the Java stack trace.

----
FTL stack trace ("~" means nesting-related):
	- Failed at: navigationJSONObject = jsonFactoryUti...  [in template "17855804202317#32484267#LEARN-ARTICLE-NAV" at line 4, column 9]
----
1<#assign 
2	groupFriendlyURL = themeDisplay.getScopeGroup().getFriendlyURL() 
3	groupPathFriendlyURLPublic = themeDisplay.getPathFriendlyURLPublic() + groupFriendlyURL 
4	navigationJSONObject = jsonFactoryUtil.createJSONObject(navigation.getData()) 
5	navigationMenuItems = 
6
7			"Analytics Cloud": { 
8				"image": "/documents/d${groupFriendlyURL}/analytics_c-svg", 
9				"title": "Analytics Cloud", 
10				"url": "analytics-cloud" 
11			}, 
12			"Commerce": { 
13				"image": "/documents/d${groupFriendlyURL}/commerce_product-svg", 
14				"title": "Commerce", 
15				"url": "commerce" 
16			}, 
17			"DXP": { 
18				"image": "/documents/d${groupFriendlyURL}/dxp_p-svg", 
19				"title": "DXP / Portal", 
20				"url": "dxp" 
21			}, 
22			"Liferay Cloud": { 
23				"image": "/documents/d${groupFriendlyURL}/dxp_c-svg", 
24				"title": "Liferay Cloud", 
25				"url": "liferay-cloud" 
26			}, 
27			"Reference": { 
28				"image": "/documents/d${groupFriendlyURL}/reference-svg", 
29				"title": "Reference", 
30				"url": "reference" 
31
32
33 
34	breadcrumbJSONArray = navigationJSONObject.getJSONArray("breadcrumb") 
35	childrenJSONArray = navigationJSONObject.getJSONArray("children") 
36	parentJSONObject = navigationJSONObject.getJSONObject("parent") 
37	productJSONObject = breadcrumbJSONArray.getJSONObject(breadcrumbJSONArray.length()-1)!navigationJSONObject.getJSONObject("self") 
38	siblingsJSONArray = navigationJSONObject.getJSONArray("siblings") 
39/> 
40 
41<div class="learn-article-nav"> 
42	<#if productJSONObject?has_content && productJSONObject.getString("title")?has_content && navigationMenuItems[productJSONObject.getString("title")]?has_content && navigationMenuItems[productJSONObject.getString("title")].title?has_content> 
43		<div 
44			class="dropdown learn-article-nav-root learn-dropdown" 
45
46			<div class="learn-article-nav-item"> 
47				<div class="d-flex"> 
48					<div class="learn-article-nav-image"> 
49						<img 
50							class="lexicon-icon lexicon-icon-caret-bottom product-icon" 
51							role="presentation" 
52							src='${navigationMenuItems[productJSONObject.getString("title")].image}' 
53							viewBox="0 0 512 512" 
54						/> 
55					</div> 
56 
57					<span class="learn-article-nav-text">${navigationMenuItems[productJSONObject.getString("title")].title}</span> 
58				</div> 
59 
60				<div id="dropdown-icon"> 
61					<svg 
62						class="lexicon-icon lexicon-icon-caret-bottom" 
63						role="presentation" 
64						viewBox="0 0 512 512" 
65
66						<use xlink:href="/o/admin-theme/images/clay/icons.svg#caret-bottom"></use> 
67					</svg> 
68				</div> 
69			</div> 
70 
71			<ul class="dropdown-menu learn-dropdown-menu"> 
72				<#list navigationMenuItems as key, value> 
73					<li> 
74						<a 
75							class="dropdown-item learn-article-nav-item" 
76							href="/w/${navigationMenuItems[key].url}/index" 
77							tabindex="4" 
78
79							<span class="d-flex"> 
80								<span class="learn-article-nav-image"> 
81									<img 
82										class="lexicon-icon lexicon-icon-caret-bottom product-icon mt-0 mr-2" 
83										role="presentation" 
84										src="${value.image}"height: 25px; margin-left: 5px; max-width: none; width: 25px; 
85										viewBox="0 0 512 512" 
86									/> 
87								</span> 
88								<span class="learn-article-nav-text">${value.title}</span> 
89							</span> 
90 
91							<#if navigationMenuItems[productJSONObject.getString("title")].url == value.url> 
92								<span> 
93									<@clay["icon"] symbol="check" /> 
94								</span> 
95							</#if> 
96						</a> 
97					</li> 
98				</#list> 
99			</ul> 
100		</div> 
101	</#if> 
102 
103	<div class="learn-article-nav-content"> 
104		<#if parentJSONObject?has_content && parentJSONObject.getString("url")?has_content> 
105			<div class="learn-article-nav-item learn-article-nav-parent liferay-nav-item p-2"> 
106				<div class="mr-2"> 
107					<a 
108						href='${parentJSONObject.getString("url")}' 
109
110						<svg 
111							class="lexicon-icon lexicon-icon-angle-left" 
112							role="presentation" 
113							viewBox="0 0 512 512" 
114
115							<use xlink:href="/o/admin-theme/images/clay/icons.svg#angle-left"></use> 
116						</svg> 
117					</a> 
118				</div> 
119 
120				<span>${parentJSONObject.getString("title")}</span> 
121			</div> 
122		</#if> 
123 
124		<#if childrenJSONArray.length() gt 0> 
125			<ul class="m-0 p-2"> 
126				<#list 0..childrenJSONArray.length()-1 as i> 
127					<li class="learn-article-nav-item"> 
128						<a 
129							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == childrenJSONArray.getJSONObject(i).url)?then("selected", "")}' 
130							href="${childrenJSONArray.getJSONObject(i).url}" 
131
132							<span>${childrenJSONArray.getJSONObject(i).getString("title")}</span> 
133						</a> 
134					</li> 
135				</#list> 
136			</ul> 
137		<#elseif siblingsJSONArray.length() gt 0> 
138			<ul class="m-0 p-2"> 
139				<#list 0..siblingsJSONArray.length()-1 as i> 
140					<li class="learn-article-nav-item"> 
141						<a 
142							class='liferay-nav-item ${(navigationJSONObject.getJSONObject("self").url == siblingsJSONArray.getJSONObject(i).url)?then("selected", "")}' 
143							href="${siblingsJSONArray.getJSONObject(i).url}" 
144
145							<span>${siblingsJSONArray.getJSONObject(i).getString("title")}</span> 
146						</a> 
147					</li> 
148				</#list> 
149			</ul> 
150		</#if> 
151	</div> 
152</div> 

SEOとOpen Graphの設定

利用可能です:Liferay DXP/Portal 7.3+.

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

以下の手順に従って、表示ページテンプレートのSEOとOpen Graphの設定を行います:

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

    Go to the display page templates tab.

  2. 目的のテンプレートの Actions(アクションアイコン)をクリックし、 Edit を選択します。 テンプレートを編集する際には、アプリケーションバーの Options(! Optionsアイコン )をクリックし、 Configure(! Configureアイコン )をクリックします。

  3. [SEO] または [Open Graph] タブに移動し、目的の設定を入力してください。

    Enter the desired configuration in the SEO and Open Graph tabs.

  4. Save]をクリックします。

    important

    SEOタブとオープングラフタブの間を移動すると、保存していない変更が失われます。

SEOとOpen Graphの設定を行う際、値を直接入力したり、フィールドマッピングを使用して動的に値を追加したりすることが可能です。 使用可能なマッピングオプションは、テンプレートのコンテンツタイプとサブタイプによって異なります。 フィールドをマッピングするには、 フィールド・セレクタ ボタン(マッピング・ボタン)をクリックし、利用可能なフィールドから選択する。 Liferay DXP 7.4 U1とPortal 7.4 GA5では、この方法で追加されたフィールドはフィールド参照IDとフィールドラベル(${fieldReferenceID:Field Label})の2つの部分を持つ${}プレースホルダとして表現されます。

以前のバージョンでは、マッピングプレースホルダーはフィールド参照IDのみを含んでいました(例:${title}${authorName}${Text84981642})。

カスタムウェブコンテンツやドキュメント構造のフィールド参照IDは人間が読めるものではないので(例えば${Text84981642:Contributors})、Liferayは管理者側でわかりやすくするためにフィールドラベルの値を提供します。 このラベルはエンドユーザーには表示されず、マッピングにも影響しないため、ユーザーが自由に編集することができます。 マッピングは、プレースホルダーのフィールド参照IDにのみ依存します。

note

Liferay は可能な限り、マッピングされたフィールドの翻訳を提供します。 ただし、マッピングされたフィールド以外で提供されたテキストは翻訳されません。

SEO設定の参考

検索エンジン最適化(SEO)とは、検索エンジンの検索結果ページ(SERP)でページの順位を上げるために使用される方法を指します。 表示ページテンプレートを使えば、SEOのためにコンテンツの表示ページを設定することができます。

HTMLタイトル

HTML Titleフィールドは、表示ページの<title>タグを定義します。 このタイトルは、検索エンジンがあなたのページをランク付けするために使用され、検索エンジンの検索結果でページの見出しとして機能します。 デフォルトでは、表示ページのテンプレートはこのフィールドを ${title} にマップする。 この値を直接編集したり、フィールド・セレクタを使用して追加のマッピングを含めることができます(例:${title} - ${authorName:Author Name})。

推奨される HTMLタイトル の長さは60文字以下です。

tip

SEOとオープングラフのタイトルは一緒に更新するのがベストプラクティスです。

Combine multiple mapped fields to build your own HTML title.

説明

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

ページの説明文の推奨長さは155文字以下です。

tip

SEOとオープングラフの記述を一緒に更新するのがベストプラクティスです。

Combine multiple mapped fields to create a custom HTML description.

ロボット

Robotsフィールドは、表示ページのrobots.txtルールを設定する。 これらのルールは、検索エンジンやその他のツールがあなたのサイトをクロールしてインデックスを作成する際の指示となり、どのパスをクロールすべきか、またはクロールすべきでないかを定義します。 ウェブクローラーは、robots.txtの指示に従う場合もあれば、従わない場合もあることに注意してください。

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

The Robots field configures robots.txt rules for a display page.

サイトマップ

sitemap.xmlファイルに表示ページを含めるかどうかを決定し、Priority(優先度)とChange Frequency(変更頻度)フィールドを設定します。 検索エンジンに、表示ページをクロールしてインデックスさせるかどうか、他のサイトページと比較してどのように優先させるか、どの程度の頻度で更新されるかを知らせる。

Determine whether to include a display page in your sitemap.xml file, as well as set its priority and change frequency.

Open Graph 設定の参考

利用可能です:Liferay DXP/Portal 7.3+.

Open Graph は、Facebook、Slack、Twitterなどのアプリケーション・コンテキストで共有されるサイト・コンテンツのプレビューを標準化するインターネット・プロトコルである。 これは、 RDFa と同様に、構造化データをページヘッダーに <meta> タグとして埋め込むことで実現する。

Liferay DXP では、ページの Open Graph <meta> タグを動的に設定する表示ページテンプレートを作成できます。 ここで定義された値は、 サイト レベルで定義されたデフォルト値を上書きする。

note

オープングラフタグは、認証されていないユーザーにはページヘッダーにのみ含まれます。 ユーザーがログインしているときは含まれない。

タイトル

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

tip

SEOとオープングラフのタイトルは一緒に更新するのがベストプラクティスです。

Combine multiple mapped fields to create a custom og:title value.

説明

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

tip

SEOとオープングラフの記述を一緒に更新するのがベストプラクティスです。

Combine multiple mapped fields to create a custom og:description value.

画像

Imageフィールドは表示ページのog:imageプロパティを定義し、リッチプレビューでコンテンツに表示される画像を設定します。 基本的な画像タグに加えて、DXP は、選択した画像の表示方法を決定する多くの構造化プロパティを自動的に追加します。 Imageフィールドは以下の<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" />

デフォルトでは、このフィールドは表示ページテンプレートではマッピングされていません。 つまり、別の画像フィールドを選択しない限り、テンプレートのデフォルトはサイトレベルで設定された画像になります。

The image field defines a display page's og:image property.

画像の別の説明

Image Alt Descriptionフィールドは、表示ページのog:image:altプロパティを定義し、表示コンテンツのog:imageプロパティに対してスクリーンリーダーが読み取るaltテキストを決定します。

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

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

The image alt description field defines a display page's og:image:alt property

関連トピック

ページのフレンドリーURLの設定

オープングラフの設定