webデザイン100日チャレンジ、今日は「見出しタグ」について学んだ話です。
きっかけは「なんとなく使っていた」ことへの違和感
これまでブログ記事を書くとき、見出しって「なんとなく大きい文字にしたいから」という感覚でh2やh3を使っていました。
見出しの階層自体は、h2の中にh3を入れるというルールはなんとなく理解していて、そこまで大きく崩れているつもりはなかったんです。
でも学習を進める中で、「見出しタグって実はSEOにすごく関係している」ということを知って、「階層のルールは知っていたけど、その意味まではちゃんと理解していなかったな」と気づきました。
hタグって何？基本のところから確認
まず整理したのはこの部分です。
・h1は記事タイトル（1ページ1つが基本）
・h2は大見出し
・h3はh2の中の小見出し
・h4以降はさらに細かい階層
数字が小さいほど重要度が高くて、階層構造を作るためのタグなんですよね。
「見た目を大きくするためのタグ」ではなく、「文章の構造を示すタグ」だという説明を読んだとき、感覚的にわかっていたことが言語化された感じがしました。
SEOとの関係で「なるほど」と思ったこと
一番印象に残ったのは、検索エンジンがhタグを見て「このページは何について書かれているか」を判断しているという話です。
見出し階層を守ること自体はできていたつもりでしたが、それが「読みやすさのため」だけでなく「検索エンジンに内容を正しく伝えるため」でもあるという視点は、今回初めて意識しました。
「なんとなく正しく使えていたこと」に、ちゃんと理由があったんだとわかると、これまでの積み重ねが少し肯定された気分にもなりました。
子育てしながらの学習だからこそ気づけたこと
子供たちの合間に少しずつ勉強していると、一気に理解するのではなく、「あ、これとこれが繋がってたのか」と、点と点が線になる瞬間が何度かあります。
今回のhタグとSEOの関係も、まさにそんな感覚でした。
以前のSEOの勉強をしたときは「キーワードをいれる」ことばかり意識していたけれど、今回学んで「文章構造そのものがSEO対策になる」という視点が新しく加わりました。
家事や育児の合間の限られた時間だからこそ、「なぜそうなるのか」を丁寧に理解する時間を大事にしたいなと改めて思いました。
実際にやったみた見直し作業
学んだことをすぐに試したくて、過去記事のhタグを見直してみました。
やったことはシンプルです。
・見出しの階層に飛びがないか改めて確認
・h2の中身がきちんとh3でまとまっているか確認
・見た目のためだけに使っていた見出しがないかチェック
大きな崩れはなかったものの、細かいところで「ここはh3じゃなくてもよかったかも」という箇所がいくつか見つかりました。
そしてもう一つ気づいたのが、hrタグ(区切り線を入れるためのタグ)をほとんど使えていなかったことです。
見出しで話の区切りをつけているつもりでしたが、話題が大きく変わる場面などでhrタグを使うと、読者にとってもっと視覚的にわかりやすくなるんだなと知りました。
見出しの構造は意識していたのに、こういう「区切り」を演出するタグまでは意識が向いていなかったんですよね。
スマホで読んだときの読みやすさにも関わる部分なので、これも次の記事から意識していきたいなと思いました。
「わかっていたつもり」でも、意識して見直すとまた違う発見があるものですね。
今回学んで感じたこと
今回の学びを通して感じたのは、「基本」と思っていることほど、実は理解が浅いまま通り過ぎていることが多いということです。
hタグなんて、Web制作を始めた最初の頃に習う基本中の基本。
ルールとしては知っていたつもりでも、「なぜそのルールがあるのか」まで理解して初めて、本当の意味で使いこなせるようになるんだなと実感しました。
hrタグのように、意識していなかった小さな部分にも、まだまだ改善の余地があるんだなと感じています。
これからも100日チャレンジを通して、こういう「わかったつもりだったこと」を一つずつ丁寧に見直していきたいと思います。
同じようにWeb制作を独学中の方や、子育てしながら学習している方の参考に少しでもなれば嬉しいです。
コメント