SEO対策の一環として、<strong>や<mark>などの意味タグやCSS装飾で文章の強調や装飾を増やしている人は多いでしょう。
でも、その強調や装飾、本当に意味を考えて使っていますか？
何も考えずに<strong>や<mark>などの意味タグや、CSSによる見た目の調整を混同すると、検索エンジンが文章の意味構造を正しく理解しにくくなります。
その結果、SEOにマイナスに働くことも。
本記事では、強調・区別・意味付けをどう使い分けるかを、CSSとHTMLの役割分担として解説します。
強調したいだけなら CSS で十分
単純に目立たせたい、
読み飛ばされないようにしたい、
という目的であれば、HTMLの意味タグを使う必要はありません。
これはあくまで見た目の調整であり、意味構造を変えないため、SEO的にも安全で扱いやすい方法です。
区別したいときは「色・背景・マーカー」
用語、注意点、補足など、他の文章と区別したい場合は、意味タグではなくビジュアルで整理します。
背景色やマーカー表現は、視線誘導として非常に有効です。
ただし多用すると可読性が落ちるため、1セクションに1〜2箇所を目安にします。
リンクに見せたいなら underline は一貫性が命
リンクらしく見せたい場合は、見た目をリンクに寄せます。
重要なのは、「下線＝リンク」という認識を崩さないことです。
リンクでないテキストを下線にすると、ユーザー体験を損ない、間接的にSEOにも悪影響を与える可能性があります。
意味を持たせたいときだけ意味タグを使う
strong や mark は、装飾ではなく「意味を与えるタグ」です。
重要性や文脈上の注目点を示したいときだけ使い、見た目目的での使用は避けます。
- 装飾はCSS
- 意味はHTML
この役割分担を守ることが、
読みやすく、評価される文章の基本設計になります。
付録：<mark> かどうか迷った時の判別フロー
| 状況 | 使うべきタグ | 理由 |
| 「ここ、テストに出るぞ！」と言いたい | <strong> |
文章そのものが持つ「重要性」だから。 |
| 「『絶対』にやめて」と語気を強めたい | <em> |
読み手のアクセント（強調）を変えたいから。 |
| 「検索した単語はここだよ」と示したい | <mark> |
文脈の中で「今」必要な場所を指差しているから。 |
| 「引用文の中で、特にここを議論したい」 | <mark> |
後から注目（参照）させるための目印だから。 |
| 「ただデザイン的に黄色い線を引きたい」 | <span> + CSS |
文章の意味は変わらず、見た目だけの問題だから。 |
-
-
<strong>タグと<mark>タグの違いとは<strong>タグと <mark>タグの違い SEOやAI文脈理解の観点では、<strong>と <mark> は「似ている強調タグ」ではなく、まった ...
続きを見る
