セマンティックHTMLとは | 長期有給インターン生の日常|株式会社ガーディアン | 成果を上げるサブスク型ホームページ制作|日本屈指5万サイトの実績|東京のガーディアン

こんにちは、

今日はHTMLの基礎を学習し直していました。

というのも昨日までは思い通りのサイトを表示する、

という"実装優先"の取り組みでCSSを主に学習していたのですが、

HTMLをもう少しちゃんと勉強しようということで

"理解優先"で進めました。

HTMLにもよしあしがある

同じ表示ならサイトの価値は同じかというとそうではありません。

実はインターネット上ではクローラーというものが巡回していて、

WEBサイトを見ては情報を収集しています。

そしてそのクローラーがそのサイトに何が書いてあるのか判断します。

誰かがWEBを検索したときには、クローラーが読み取った内容と

検索エンジンに入れた内容が近いようなWEBサイトを表示します。

ここで関連用語を検索した人にサイトが表示されやすくすることを

「SEOを上げる」と言います。

さて、クローラーはロボットなのでCSSなどで書いたUIを見ることはできません。

HTMLのコードを見てどんなサイトか判断します。

この時HTMLのタグがめちゃくちゃで、階層構造も見た目と違う、

となるとどうなるでしょう？

サイト制作側が重要だと思って強調しているところを

クローラーは重要だと判断してくれなくなります。

という知識を手にしたところで私が昨日まで書いたコードを見てみましょう…

...divとspanばっかですね。てかbrbrbrはやばい。

これではクローラー君が理解してくれるはずもありません。

CSSで見た目を整えるだけではなくて、

HTMLでSEO対策をするのも重要だと学んだ一日でした。