こんにちは、grillon designです。
「Web制作100日チャレンジ」2日目。
今日もHTMLの基礎を学び直していきます。
今回のテーマは、hタグ（見出しタグ）とSEOの関係について。
ブログを書いている方なら、h1・h2・h3という言葉を一度は聞いたことがあるのではないでしょうか。
私自身、これまでブログを書くときにh2やh3を普通に使ってきました。
でも今回改めて学んでみて、
「知っているつもりだったけど、ちゃんと理解できていなかったかも」
と気づくことがありました。
「なんとなく使っていた」hタグを学び直す
これまでブログ記事を書くとき、見出しは、
「ここは大きい文字にしたいからh2」
「ここはその中の小見出しだからh3」
というくらいの感覚で使っていました。
h2の中にh3を入れる、というような基本的な階層ルールも、なんとなく理解していたつもりです。
大きく崩れているつもりもありませんでした。
でも、HTMLを学び直す中で、
「見出しタグって、ただ文字を大きくするためのものじゃないんだ……」
ということを改めて知りました。
そして、hタグはSEOとも関係しているということも、今回あらためて意識するようになりました。
「ルールとして使えていた」ことと、「なぜそのルールがあるのかを理解している」ことは、やっぱり違うんですね。
hタグとは？h1・h2・h3の役割を確認
まずは基本から整理しました。
HTMLの見出しタグには、h1〜h6があります。
それぞれの役割は、大まかにいうと次のようなものです。
- h1 → ページの主題を示す最も大きな見出し
- h2 → 大きな章・セクションの見出し
- h3 → h2の内容をさらに分ける見出し
- h4〜h6 → さらに細かく分ける見出し
つまり、数字が小さいほど上位の階層になります。
たとえば、
h2：HTMLの基本
└ h3：HTMLとは？
└ h3：HTMLタグとは？
というように、文章の構造を作っていきます。
ここで大事なのは、
hタグは「文字を大きくするためのタグ」ではない
ということ。
CSSを使えば文字の大きさは自由に変えられます。
hタグの役割は、その文章がどの階層にあるのか、どんな内容をまとめているのかを示すことなんですね。
これを知ったとき、
「あ、今まで感覚でやっていたことが、ちゃんとHTMLのルールとして繋がった！」
と感じました。
hタグはSEOにどう関係する？
今回、特に気になったのがhタグとSEOの関係です。
検索エンジンは、ページ内のさまざまな情報を読み取りながら、そのページがどんな内容なのかを理解していきます。
その中で見出しは、ページの構造や各セクションの内容を理解するための手がかりの一つになります。
つまり、
「ここからHTMLについて説明しています」
「ここではhタグについて説明しています」
というように、見出しを適切に設定することで、ページの内容を整理して伝えることができます。
これまで私は、
「見出しをきちんと使う＝読者が読みやすくなるため」
というイメージが強かったんです。
もちろん、それも大切。
でも今回学んで、
「読者だけでなく、検索エンジンにもページの構造を伝える役割がある」
という視点が加わりました。
以前からなんとなくできていたことに、ちゃんと理由があった。
そう思うと、今までやってきたことも少し肯定されたような気持ちになりました。
h1・h2・h3は「見た目」ではなく「文章の構造」で考える
今回の学びで、特に意識したいと思ったのが、
「見た目で見出しを選ばない」
ということです。
たとえば、
「この文字を大きくしたいからh2にする」
という使い方ではなく、
「ここは大きなセクションだからh2」
「この内容は、そのh2の中の一つのテーマだからh3」
というように、文章の構造を基準に考える。
これが本来のhタグの使い方なんですね。
ブログを書いていると、デザインを整えることに意識が向きがちです。
でもHTMLでは、
見た目はCSS、構造はHTML。
この役割を分けて考えることが大切なんだと、改めて感じました。
子育ての合間の学習だからこそ「点と点がつながる」
子どもたちの合間に少しずつ勉強していると、毎日一気に理解できるわけではありません。
以前勉強したことを忘れていたり、
「これって何だったっけ？」
となったりすることもあります。
でも、そんな中で突然、
「あ、これとこれが繋がってたんだ！」
と感じる瞬間があります。
今回のhタグとSEOの関係も、まさにそんな瞬間でした。
以前SEOについて勉強したときは、
「キーワードを入れる」
「検索される言葉を意識する」
ということばかり考えていました。
もちろんキーワードも大切です。
でも今回、HTMLを学び直したことで、
「文章の構造そのものも、Webページを分かりやすくするために重要なんだ」
という新しい視点が加わりました。
家事や育児の合間という限られた時間だからこそ、ただ知識を詰め込むのではなく、
「なぜそうなるのか」
を一つずつ理解していきたいなと思います。
実際に過去記事のhタグを見直してみた
学んだら、すぐに実践。
ということで、過去に書いたブログ記事のhタグを実際に見直してみました。
今回チェックしたのは、この3つです。
- 見出しの階層に不自然な飛びがないか
- h2の内容が適切にh3で整理されているか
- 見た目を整えるためだけにhタグを使っていないか
結果として、大きく崩れている記事はありませんでした。
「ちゃんとできてたじゃん、私！」
と、ちょっと安心。笑
ただ、細かく見ていくと、
「ここはh3じゃなくてもよかったかも」
と思うところはいくつかありました。
ルールを知っているつもりでも、実際の記事を見直してみると、新しい発見がありますね。
hrタグも意識して使ってみたい
そして、もう一つ今回気づいたのが、hrタグです。
hrタグは、HTMLで話題の区切りやテーマの変化を示すために使うタグです。
これまで私は、記事の中で話題が変わるときも、ほとんど見出しだけで区切っていました。
でも、
「ここから話題が変わります」
という場面でhrタグを使うことで、文章の区切りをより分かりやすくできる場合があります。
「見出しの構造は意識していたけど、こういう“区切り”までは考えてなかったな……」
これも、今回HTMLを学び直したからこそ気づけたことでした。
特にブログはスマートフォンで読まれることも多いので、文章が長く続く場合には、読者がどこで話が切り替わったのか分かりやすい構成を意識したいと思います。
もちろん、hrタグも「とりあえず入れればいい」というものではありません。
文章の内容やデザインとのバランスを考えながら、必要な場所で使っていきたいです。
「わかっていたつもり」でも、見直すと新しい発見がある
今回の学びを通して感じたのは、
「基本」と思っていることほど、実は理解が浅いまま通り過ぎていることがある
ということです。
hタグなんて、Web制作を始めた最初の頃に習う基本中の基本。
私もルール自体は知っていました。
でも、
「なぜそのルールがあるのか？」
「何のために使うのか？」
というところまで理解して、初めて本当の意味で使えるようになるんだなと実感しました。
そして、hrタグのように、今まであまり意識していなかった小さな部分にも、まだまだ学ぶことがあります。
知識を増やすだけではなく、今まで知っていたことを深掘りする。
それも「学び直し」の大切な部分なのかもしれません。
Web制作100日チャレンジ、まだまだ続きます
Web制作100日チャレンジ2日目は、hタグとSEO、そしてhrタグについて学びました。
今回の学びで、
「なんとなく使える」から「意味を理解して使える」へ。
少しだけ前進できた気がします。
これからも100日チャレンジを通して、
「わかったつもりだったこと」
「昔覚えたけど、もう一度確認したいこと」
を一つずつ丁寧に見直していきたいと思います。
3人の子育てをしながらの学習なので、毎日完璧に勉強できるわけではありません。
それでも、子どもたちの合間に少しずつ。
1日1つでも「昨日より分かることが増えた」と思えるように、コツコツ続けていきます。
同じようにWeb制作を独学している方や、HTMLを学び直している方、子育てをしながらスキルアップを目指している方の参考になれば嬉しいです。
100日後、今より少し自信を持ってWeb制作ができる自分になれるように。
明日もまた、学びを記録していきます。
コメント