AEM開発者ブログ by YAMATO

アドビ社のデリバリーパートナー大和株式会社のAEM開発者ブログです。

ページコアコンポーネントの新機能:"Brand Slug"とは

AEM Developerの皆様、こんにちは!
大和株式会社の青葉です。

今回はコアコンポーネント ver. 2.14.0 で新しく追加された、ページコアコンポーネントの "Brand Slug" についてご紹介します。

一言で表すと、SEO関連の機能になります。

そもそも "Slug" とは?

「スラッグ」と読みます。
スペルと読み方も同じである、ナメクジの "Slug" ではありません 笑

SEOの専門用語で、一般的にはURLの一部分を指しています。
例えば以下のようなURLがあります:

https://www.yamato-ltd.com/wcm/

ドメインが終わったところ(yamato-ltd.com)から
最初のスラッシュ(/)の右側にある文字列が "Slug" に該当します。
ここの例では "wcm" が "Slug" ですね。

"Slug" に該当する文字列をシンプルで意味がわかりやすいものにすることによって、
検索エンジンがページの内容を把握しやすいようにします。

AEMにおける "Slug" とは?

AEMの世界だと、"Slug" の意味合いがちょっと異なります。

ページHTMLのタイトル要素に、任意の "Slug" 文字列を追加します。
そのため、ページのURLは一切変更されません。

例:<title>Yamato | WCM Professionals</title>

上記の例だと、"Yamato" はページ作成時に設定されたページタイトルで、
パイプ記号「|」の右側にある "WCM Professionals" は設定された "Slug" 文字列に該当します。

設定方法

まずはコアコンポーネント ver. 2.14.0 以降がAEMにインストールされ、ページコアコンポーネントを継承していることが前提です。

(1) "Slug" を設定したいページのページプロパティを開く
(2) "Basic" タブにて、"Branding" セクションにある "Override" にチェックをつける

ページプロパティ画面でBrand Slugを設定する

(3) 任意の "Slug" 文字列を入力し、保存する

設定したい&quot;Slug&quot;文字列を入力する

上記手順の通りに設定すると、元々設定されているページタイトルの右横にパイプ記号「|」と "Slug" 文字列が追加されます:<title>Yamato | WCM Professionals</title>

ページに "Slug" を設定すると、そのページ以下全てに反映されることも特徴です。

考えられるユースケース

まずはサイト全体に反映されるよう、コンテンツルート(サイトコンソール上の一番左列に表示されているページ)に1つ設定します。

サイト構造によっては、あるページ以下の "Slug" を別のものに変更したいケースもあるかと思います。こちらも、追加カスタマイズなしで実現可能です!

例えば以下のようなサイト構造だとします:

- yamato(コンテンツルート)
    - en
        - about-us
        - services
        - AEM Dev
            - blog 1
            - blog 2
            - blog 3
            - ...
        - partnership
        - recruiting

コンテンツルートにまず "WCM Professionals"という "Slug" 文字列を設定します。
この時点では、全てのページに反映された状態ですね。

ここで、AEM Dev以下のページ全てに "Blogs" という "Slug" 文字列を設定したい場合は、AEM Devのページプロパティを開いて、"Override" にチェックをつけて、"Blogs" と入力して保存するだけです。

さいごに

1ページずつ全て開いて設定する必要がないので、メンテナンスがとても楽だと思います。
常に進化し続けるコアコンポーネント、すばらしいですね!

ぜひ最新のAEM標準機能を活用していきましょう~!