BricksBuilderを使っていると「Attributes」に「rel・aria-label・title」を入力する項目があります。ただ、ここはなんとなくで設定すると危険 or 効果なしになりやすいポイントです。
この記事では、実務ベースで「何を入れるべきか」「どう書くべきか」をわかりやすく解説します。
rel属性とは？
relは「リンク先との関係」を指定する属性です。
特に重要なのはセキュリティとSEOです。
よく使う値一覧
| 値 | 意味 |
|---|---|
| noopener | 別タブ時のセキュリティ対策 |
| noreferrer | リファラー情報を送らない |
| nofollow | SEO評価を渡さない |
| sponsored | 広告・アフィリエイト |
| ugc | ユーザー投稿 |
複数指定の書き方（重要）
CSSで「rel=”noopener nofollow”」と書くように複数入力する場合は、スペースで区切ります。
良くある間違いとしてカンマ区切りではありませんので、ご注意ください。
Open in new tab との違い
BricksBuilderには「Open in new tab」というチェックがあります。
これは新しいタブで開く設定です。
CSSでは「target=”_blank”」と書きます。
「rel=”noopener”」はセキュリティ対策です。
target=”_blank” だけだと… 開いたページから元ページを操作されるリスクあります。
正しいセットは、
target="_blank"
rel="noopener noreferrer"この２つはセットで使うのが基本です。
aria-labelとは？
aria-labelは画面に表示されない説明文です。
主にスクリーンリーダー（音声読み上げ）用。
使うべきケース
- アイコンボタン
- 「詳しくはこちら」など曖昧なリンク
- 意味が分かりにくいUI
良い例
aria-label=”お問い合わせページへ移動”
つまり、「何をするか」を具体的に書くと良いと思います。
ただし、「お問い合わせ」など明確なテキストリンクの場合など、不要なケースもあるので、ご注意ください。
title属性とは？
title属性とは「マウスホバー時に表示される補足テキスト」です。
たとえば、CSSでは「title=”詳しくはこちら”」と入力します。
注意点
- SEO効果はほぼない
- スマホでは表示されない
- 入れすぎるとUX低下
基本は不要ですので、必要な時だけ使うと良いでしょう。
BricksBuilderでの具体的な入力方法
BricksのAttributesはKey / Value形式で入力します。
rel の設定
| Key | Value |
|---|---|
| rel | noopener nofollow |
aria-label の設定
| Key | Value |
|---|---|
| aria-label | サービス詳細ページへ移動 |
title の設定（任意）
| Key | Value |
|---|---|
| title | 詳しくはこちら |
target=”_blank” の設定
「Open in new tab」をONにするだけです。外部サイトへのリンクはONにすると良いでしょう。
実務でよく使うテンプレ
外部リンク（安全な基本形）
Open in new tab：ON rel = noopener noreferrer
aria-label = ○○公式サイトへ（別タブで開く）
アフィリエイトリンク
Open in new tab：ON rel = nofollow sponsored noopener noreferrer
内部リンク
基本不要
まとめ
rel→ SEO＋セキュリティ（重要）aria-label→ アクセシビリティ（重要）title→ おまけ（基本不要）target="_blank"→ 開き方の指定
