ページ設定をカスタマイズする

CMS ダッシュボードとデザイナー キャンバスでコンテンツをパーソナライズするだけでなく、ページのスラッグ (URL)、ページ レベルの SEO 構成、Open Graph 構成をカスタマイズすることもできます。デフォルトでは、Web サイトの各ページはプライマリ ロケールから構成を取得しますが、セカンダリ ロケールでこれらを変更することもできます。 

開始前に： ローカリゼーションの概要を調べて、ローカリゼーションについて詳しく理解してください。 

注記： 一部のローカリゼーション機能は、特定のローカリゼーション プランでのみアクセスできます。 ローカリゼーションプランと機能の比較を総合的にご覧ください. 

このガイドでは、次の内容について説明します。 

1. ページレベルの SEO と Open Graph 構成をカスタマイズする方法
2. カスタムコードを調整する方法

ページレベルの SEO と Open Graph 構成のカスタマイズ

各ページの SEO および Open Graph 構成をカスタマイズするには: 

1. を押す ロケールビュー 上部バーのドロップダウン
2. ご希望の地域を選択してください
3. アクセス ページパネル
4. 設定を変更したいページにマウスを移動します 
5. 設定をクリックします。歯車” アイコン 

その後、手動で調整することができます SEO構成 そして オープングラフ構成 通常通り、または各フィールドにマウスを移動して「グローブ” アイコンをクリックすると、テキストが機械翻訳されます。 

SEO のカスタマイズについて詳しくご覧ください。

インサイダーヒント: コレクション ページでは、コレクション フィールドを SEO 構成と Open Graph 構成に統合するオプションがあります。 

カスタムコードを調整する方法

他の設計要素 (要素とコンポーネントのレイアウトなど) と同様に、セカンダリ ロケールのカスタム コードはプライマリ ロケールから継承されます。セカンダリ ロケールでは、カスタム コードを追加または削除することはできません。 

特定のロケールにのみ影響するカスタム コードを作成する場合は、次のように HTML lang 属性をセレクターとして使用してロケールをターゲットにすることをお勧めします。

<script>
// Obtain the lang attribute from the HTML element
const htmlLang = document.documentElement.lang;

// Inspect the lang attribute and carry out a script accordingly
if (htmlLang === 'en') {
console.log('This page is in English. You can execute English-specific code here.');
// Insert your English-specific code here
} else if (htmlLang === 'fr') {
console.log('This page is in French. You can execute French-specific code here.');
// Insert your French-specific code here
} else {
console.log('This page is in a language other than English or French.');
// Incorporate code for other languages here
}
</script>

あるいは、動的 CSS の場合: 

/* Custom styles for all languages */
p {
font-size: 16px;
color: black;
}

/* Styles for English content */
:lang(en) p {
font-weight: bold;
}

/* Styles for French content */
:lang(fr) p {
font-style: italic;
}

/* Include additional language-specific styles as necessary */