JavascriptのHTMLクラス表示について

Q&A 掲示板を作成しているのですが、Javascript で HTML を書き換える際の HTML クラス名についてアドバイス頂きたいのですが、
クラス名にハイフンかアンダーバーを付けることは可能でしょうか？
パターン１かパターン２で parts と title-partial を別クラスとして表示することは出来るようですが、title-partial parts として出力する方法が分からず parts を消すべきか悩んでおります。
SEO を考えて入力画面は title-partial parts として表示しており、非同期通信で切り替えた後のクラスも検索エンジンに乗るのではないかと考えております。

パターン1
－－－－
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
－－－－

パターン２
－－－－
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
－－－－

<!-- 表示したいHTML-->
<div id="confirm_area" style="display: block;">
<div class="title-partial parts"> <!-- title-partial + parts -->
質問タイトルテスト
</div>

<div class="namae-partial parts"> <!-- title-partial + parts -->
名前テスト
</div>

<div class="body-partial parts"><!-- body-partial + parts -->
コメントテスト
</div>

<div class="post-button"><!-- ボタンを押せなくする -->
<button type="button">入力画面へ戻る</button><button type="button" name="output">結果画面へ進む</button>
</div>
</div>
</div>
<!-- type、name、id、valueの順番 -->
</div>
</div>

No.1 ベストアンサー 回答者： Andro 回答日時： 2024/03/11 12:20

## Q&A掲示板におけるHTMLクラス名の書き換えとSEO対策

### クラス名にハイフンとアンダーバーの使用について

**結論:** はい、クラス名にハイフンとアンダーバーの両方を使用することは可能です。どちらを使用しても構いませんが、一貫性のある命名規則を設けることが重要です。

**SEO対策** の観点では、ハイフンの方が検索エンジンに認識されやすいと言われています。これは、ハイフンが単語の区切りを示す役割を果たし、検索エンジンがコンテンツの意味を理解しやすくなるためです。

**参考情報:**

* HTML クラス名と ID 名の命名規則: [無効な URL を削除しました]

### パターン1とパターン2の比較

**パターン1:**

```javascript
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
```

**パターン2:**

```javascript
divTitlePartialParts.classList.add("title-partial", "parts"); // classの追加
```

**結果:**

両方のパターンで、`title-partial` と `parts` という2つのクラスが `divTitlePartialParts` 要素に追加されます。

**違い:**

* パターン1: 2つの `classList.add` メソッドを使用します。
* パターン2: 1つの `classList.add` メソッドで複数のクラス名を指定します。

**どちらのパターンを使用しても問題ありません。** コードの読みやすさを考慮して、適切な方を選択してください。

### SEO対策と非同期通信

非同期通信で切り替えた後のクラスも検索エンジンに認識させるためには、いくつかの対策が必要です。

**対策:**

* **JavaScript でレンダリング:**
* `document.title` を更新する。
* `meta description` を更新する。
* `aria-label` や `aria-labelledby` 属性を使用する。

* **サーバーサイドレンダリング:**
* 最初に表示される HTML にすべてのコンテンツを含める。
* JavaScript を使用してコンテンツを動的に追加する。

**参考情報:**

* SEO と JavaScript: [https://developers.google.com/search/docs/guides …](https://developers.google.com/search/docs/guides …
* サーバーサイドレンダリング: [無効な URL を削除しました]

### parts クラスの削除について

`parts` クラスは、すべての要素に共通するクラスとして使用されているようです。

**parts クラスを削除しても問題ありません。** ただし、`parts` クラスを使用している CSS セレクターがあれば、修正する必要があります。

**結論:**

* クラス名にハイフンとアンダーバーの両方を使用することは可能です。
* SEO対策には、ハイフンの方が検索エンジンに認識されやすいと言われています。
* 非同期通信で切り替えた後のクラスも検索エンジンに認識させるためには、いくつかの対策が必要です。
* `parts` クラスは削除しても問題ありません。

### その他のアドバイス

* コードの読みやすさを考慮して、適切な命名規則を設けましょう。
* SEO対策を意識して、適切なメタデータを設定しましょう。
* テストツールを使用して、検索エンジンがコンテンツをどのように認識しているかを確認しましょう。

この回答へのお礼

**SEO対策** の観点では、ハイフンの方が検索エンジンに認識されやすいと言われています。これは、ハイフンが単語の区切りを示す役割を果たし、検索エンジンがコンテンツの意味を理解しやすくなるためです。

A.アドバイスありがとうございます。ハイフンを優先してクラス命名してみます。


Q.非同期通信で切り替えた後のクラスも検索エンジンに認識させるためには、いくつかの対策が必要です。

A.アドバイスありがとうございます。`parts` クラスは削除しても良いということですが、タイトル、名前、コメントを関連付ける意味で残しておいた方が良いのではないかと判断いたしました。
非同期通信で切り替えた後のクラスについて検索エンジンに認識させるべきか悩んでおります。理由としましては、非同期通信を行う前の入力画面とクラス名を同じにしている為、重複コンテンツと判定されてしまうと SEO に悪影響を与えてしまう可能性があるようです。
クラス名を入力画面（非同期通信前）と確認画面（非同期通信後）で変更して検索エンジンに認識させる、クラス名を変更せずに検索エンジンにも認識させない、どちらの方法をとるべきでしょうか？

※参考サイト
https://www.bricoleur.co.jp/blog/archives/2628

お礼日時：2024/03/11 22:41