テンプレート処理中にエラーが発生しました。 
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@2ad66ae2"; 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とアクセシビリティを分析する

Liferay DXP 7.4以降、ページ監査ツールを使用して、ページのSEOとアクセシビリティを調べることができます。 ページ監査ツールは Google PageSpeed Insights サービスを使用して、Liferay DXPに特定の推奨事項を提供します。 このツールを使用すると、コンテンツ作成者は次のことができます。

  • ページが検索エンジンのインデックス作成と可視性のために最適化されていることを確認します。これにより、ページは検索結果で上位にランク付けされ、適切なオーディエンスにリーチできます。
  • ページがアクセシビリティのベストプラクティスに準拠しているかどうかを確認し、すべての個人の使いやすさと全体的なエクスペリエンスを向上させます。
  • 実用的な情報を使用して、ページに影響を与えるSEOとアクセシビリティの問題を修正します。
important

ページ監査ツールはPageSpeed Insightsを使用しているため、一般にアクセス可能なページでのみ機能します。 非公開ページがLiferayシステムで有効になっている場合は、このツールを使用することはできません。

SEOとアクセシビリティのチェック

Liferay DXPのページ監査ツールは、次の要素を評価します。

SEOの問題：

  • 正しくない画像のアスペクト比
  • 欠落しているmeta-description
  • リンクテキスト
  • インデックスからブロックされているページ
  • 無効なhreflang
  • 無効な正規化URL
  • 判読できないフォントサイズ
  • 小さなタップ対象
  • 欠落している<title>要素
  • 一部のクロールできないリンク

アクセシビリティの問題：

  • 低いコントラスト比
  • 欠落しているimg-alt属性
  • 欠落しているinput-alt属性

ページ監査を実行した後、問題を修正するための実用的な情報とともに、各問題の説明を確認できます。 これらの各要素の詳細については、 Google Lighthouseのドキュメンテーション を参照してください。

ページ監査ツールの構成

note

ページ監査ツールを構成するには、Liferay DXPへの管理アクセスが必要です。

ページ監査ツールはデフォルトで有効になっていますが、ページ監査を実行する前にツールの構成を完了する必要があります。 この構成には以下が必要です。

  • PageSpeed Insights APIキー。 Googleでは、PageSpeed Insightsを自動化された方法で使用し、1秒あたり複数のクエリを実行するために、このキーが必要です。 このAPIキーを作成するには、Googleドキュメンテーションの Get Started with the PageSpeed Insights API を参照してください。
  • ページ監査の優先戦略。 デフォルトでは、ページ監査ツールはモバイル戦略を使用しますが、ページを分析するためにデスクトップ戦略を構成することもできます。 モバイル戦略には、小さな画面でコンテンツを監査するための追加のルールが含まれています。 選択した戦略はすべてのページ監査に適用されるため、ページのモバイルバージョンとデスクトップバージョンを監査する場合は、各監査戦略を個別に実行する必要があります。

ページ監査ツールのAPIキーと監査戦略を構成します

ページ監査ツールを構成するには、Liferay DXPでGoogle PageSpeed Insights設定を構成します。 Liferay DXPの他の設定と同様に、さまざまなスコープでページ監査ツールを有効または無効にできます。 これらの構成設定にアクセスするには、管理者権限が必要です。 詳細は、 設定スコープについて を参照してください。

現在のサイトにページ監査ツールを構成する

  1. サイトメニュー（Site Menu）を選択し、［Configuration］ → ［Site Settings］に移動します。

  2. ［コンテンツとデータ］セクションで、 ［Pages］ をクリックします。

  3. ［Site Scope ］セクションで、 ［Google PageSpeed Insights］ をクリックします。

    現在のサイトスコープでGoogle PageSpeed Insights設定を使用して、ページ監査ツールを構成します。

    note

    Google PageSpeed Insights設定は、設定がより高いスコープとして有効になっている場合にのみ、サイトスコープで使用できます。 詳細については、設定スコープについてを参照してください。

  4. ［Enable Google PageSpeed Insights］チェックボックスがオンになっていることを確認します。

  5. Google PageSpeed Insights APIキーをコピーして、このキーを［API Key］フィールドの下に貼り付けます。

  6. PageSpeed Insightsテスト用の優先戦略を選択します。 選択した戦略は、すべてのページ監査に適用されます。

  7. ［保存］ をクリックします。

Liferay DXPシステムにページ監査ツールを構成する

  1. Liferay DXPのグローバルメニュー（Global Menu）をクリックします。

  2. ［コントロールパネル］ タブを選択し、［設定］の下で、 ［System Settings］ をクリックします。

  3. ［コンテンツとデータ］セクションで、 ［Pages］ をクリックします。

  4. 目的のスコープ（システム、仮想インスタンス、またはサイト）の下で、 ［Google PageSpeed Insights］ をクリックします。

  5. ［Enable Google PageSpeed Insights］ チェックボックスをオンまたはオフにして、ページ監査ツールを有効または無効にします。

    システム、仮想インスタンス、またはサイトスコープでページ監査ツール設定を構成します

  6. ［Update］ をクリックします。

ページ監査ツールをグローバルに無効にするには、システムスコープで［Enable Google PageSpeed Insights］オプションをオフにします。

ページ監査ツールへのアクセスとページ監査の実行

  1. 監査するページにアクセスし、アプリケーションバーの ［ページ監査］（Page Audit）ボタンをクリックします。

    ［ページ監査］ボタンをクリックして、新しいページ監査を開始します。

    note

    ページ監査をまだ構成していない場合は、［ページ監査］パネルで構成を完了するように求められます。 この場合は、構成をクリックして 構成を完了 してください。

  2. ［ページ監査］パネルには、［ページ監査の開始］ボタンが表示されます。

  3. ［ページ監査の開始］ をクリックして、ページをGoogle PageSpeed Insightsに接続し、監査プロセスを開始します。

テストを実行した後、ページを開いてページ監査（Page Audit）ボタンをクリックすると、いつでも最後の監査結果を確認できます。

ページ監査ツールでSEOとアクセシビリティの問題を分析する

監査を実行した後、ページ監査ツールには、Google PageSpeed Insightsのルールに従って、ページの問題が表示されます。 テスト名の横の数字は、その特定のテストのエラーの総数を示します（または、テストに100を超えるエラーがある場合は+100）。

問題をクリックすると、次の3つのセクションが表示されます。

Description（C）： 選択した監査テストに関する一般的な情報を提供します。

Tips（D）： エラーソースに関するより具体的な情報と、Liferay DXPでエラーを修正または軽減する方法が含まれています。

Failing Elements（E）： PageSpeed Insightルールを使用してテストに合格しなかったページ要素を一覧表示します。

ページ監査ツールのGUIには、ページの問題の一覧と、問題を修正または軽減するための実用的な情報が表示されます。

ページ監査ツールを使用するときは、次の情報を考慮してください。

  • ページで以前に監査テストを実行したことがある場合、ページ監査ツールは最後のテストの実行時間とテスト結果を表示します。 ページ監査の結果を更新するには、再開する（relaunch）アイコン（A）をクリックして新しいテストを実行します。

  • ページ監査ツールは、特定の時間にSEOとアクセシビリティの問題についてページを分析します。 ページまたはページのコンテンツが変更された場合（たとえば、動的コンテンツを表示した場合）、テスト結果が異なる場合があります。

  • ページ監査は、デフォルトのエクスペリエンスの結果のみを表示します。

  • ページがローカライズされている場合は、言語ごとにページ監査テストを実行できます。 テストを実行する前に、ページ監査ツールの ［フラグ］ ボタンをクリックして言語を選択してください。

    ページ監査ツールのフラグボタンを使用して、監査するページ言語を変更できます。

  • リモート本番環境ステージングを使用してページを公開していて、ステージング環境がインターネットに接続されていない場合、ページ監査ツールは本番環境で使用できますが、問題の修正はステージング環境でのみ行うことができます。

ページ監査パネルエラーのトラブルシューティング

ページを監査する際のエラーを回避するには、有効な Google PageSpeed Insights APIキーを構成 し、監査するページにインターネットからアクセスできることを確認してください。

一般的なエラー

エラー説明
このAPIキーは無効ですGoogle PageSpeed Insights APIキーが無効です。 エラーメッセージの ［APIキーを設定］ ボタンをクリックして、有効なAPIキーを構成します。
APIキーを取得するには、Googleドキュメンテーションの Get Started with the PageSpeed Insights API を参照してください。
このページは監査できません監査しようとしているページは、一般に公開されていません。
予期しないエラーが発生しましたこれは一般的なエラーです。 ページ監査ツールが正しく構成されていること、および監査するページにインターネットからアクセスできることを確認してください。

関連トピック

Capability:
Content Management System
Resource Type:
Official Documentation
Feature:
Accessibility
Content Performance
SEO
Deployment Approach:
Liferay PaaS
Liferay SaaS
Liferay Self-Hosted