Q&A 掲示板を作成しているのですが、Javascript で HTML を書き換える際の HTML クラス名についてアドバイス頂きたいのですが、
クラス名にハイフンかアンダーバーを付けることは可能でしょうか?
パターン1かパターン2で parts と title-partial を別クラスとして表示することは出来るようですが、title-partial parts として出力する方法が分からず parts を消すべきか悩んでおります。
SEO を考えて入力画面は title-partial parts として表示しており、非同期通信で切り替えた後のクラスも検索エンジンに乗るのではないかと考えております。
パターン1
----
divTitlePartialParts.classList.add("title-partial"); // classの追加
divTitlePartialParts.classList.add("parts"); // classの追加
----
パターン2
----
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ベストアンサー
- 回答日時:
## 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
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 変数名をどのようにつけるのが良いかアドバイスお願い致します 4 2024/02/28 19:44
- JavaScript JavascriptでDom XSSの脆弱性対策を行いたい 2 2023/09/24 21:20
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript disabled プロパティが表示されない原因が分からない 2 2024/02/10 21:44
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript JavaScriptで作ったアプリが正常に動作しない。改善したい。 3 2024/01/06 16:33
このQ&Aを見た人はこんなQ&Aも見ています
-
プロが教えるわが家の防犯対策術!
ホームセキュリティのプロが、家庭の防犯対策を真剣に考える 2組のご夫婦へ実際の防犯対策術をご紹介!どうすれば家と家族を守れるのかを教えます!
-
Javascriptエラーの原因が分からない
JavaScript
-
HTMLタグに複数のクラスを設定する方法がわからない
JavaScript
-
disabled プロパティが表示されない原因が分からない
JavaScript
-
-
4
ボタンを押したあとに画像を表示させる方法についてアドバイスお願い致します
JavaScript
-
5
変数名をどのようにつけるのが良いかアドバイスお願い致します
JavaScript
-
6
Javascript で共通の処理をどこまでまとめるべきか分からないのでアドバイスお願い致します
JavaScript
-
7
JavaScript 超初心者です。 Document.writeがなぜか反映されません。何が間違っ
JavaScript
-
8
質問です。 配列が100以上の場合は、100単位で繰り返し処理を実行したいのですが、どのように処理を
Java
-
9
HTMLとJavaScriptで作ったタイマーアプリで時間分の設定方法がわからない
JavaScript
-
10
HTMLとJavaScriptで作った表示して検索するWebアプリが正常に動かない
JavaScript
-
11
かっこいいウェブを作るテク
HTML・CSS
-
12
HTMLとJavaScriptで作ったタイマーアプリが正常に動作しない
JavaScript
-
13
Cookieに保存されない
JavaScript
-
14
JavaScriptで作ったアプリが正常に動作しない。改善したい。
JavaScript
-
15
HTMLで作った時報アプリが動きません
JavaScript
-
16
入力フォームの空白や改行を制限したい
PHP
-
17
var exports = exports || {}; ← この意味を教えてください。
JavaScript
-
18
PythonやJavaScriptのように実質的に数の桁数を無限に扱える言語と、全く無限に使えない言
JavaScript
-
19
アマゾンのような評価の星を選択した情報を確認画面でも表示させたいです。
PHP
-
20
SQLの中上級者へのレベルアップ方法について
Oracle
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
動画の上に広告をオーバーレイ...
-
時間帯によってclass名を変更し...
-
macかwinか判別しスタイルシー...
-
Q&A掲示板の入力フォームに文字...
-
3重のクォーテーション
-
javascriptでの(-)ハイフンの処...
-
CSSでreadonlyの機能はあり...
-
mouseoverで、リンクをずらす。
-
JspにIf条件を追加したいのです...
-
「ご処理進めて頂きますようお...
-
エクセルで、日付を入力すると...
-
Excelシート上のマクロを登録し...
-
EXCEL VBA マクロ 実行する度に...
-
switch の範囲指定
-
【Excel】特定の文字を含むセル...
-
CloseとDisposeの違い
-
VBAでループ内で使う変数名を可...
-
インタラクティブの反対語は?
-
「PC Helpsoft Driver Updated...
-
エクセルVBAで、MsgBox やInput...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Q&A掲示板の入力フォームに文字...
-
JavascriptでDom XSSの脆弱性対...
-
【JavaScript】検索がヒットし...
-
CSSでreadonlyの機能はあり...
-
JavascriptでXSSの脆弱性への対...
-
formのsubmitを押すとモーダル...
-
確認ダイアログを次からは表示...
-
特定の条件のHTML要素を一括で...
-
JavascriptのHTMLクラス表示に...
-
jQueryでのドラッグアンドドロ...
-
javascriptで複数の表示・非表...
-
jqueryを使ったスムーススクロ...
-
javascriptのエラーで質問です。
-
jqueryアコーディオンの上部の...
-
JavaScriptのdiv.style属性の変...
-
2回目以降のページロード時には...
-
改行をしたいが、<br>と...
-
jQueryのCSSで値に変数を使う方法
-
クリックすると、色が変わるよ...
-
動画の上に広告をオーバーレイ...
おすすめ情報