SEOを意識したHTML5を書こう
SEOという言葉をご存じですか？
「検索エンジン最適化」と訳されるのですが、つまりはGoogleなどの検索エンジンの上位に表示させるために、サイトを最適化することを言います。
Webサイトに訪れるユーザーのほどんとは、検索エンジンから訪れています。
なので、いかにして検索エンジンの上位に表示させるかが、Webサイトでは重要なのです。
SEOを考えずにWebサイトの運用をすることは、ほとんどありません。
そのSEOを考えるうえで大切なのが、HTMLです。
HTMLを正しく書くことが、SEOの向上につながります。
Googleなどの検索エンジンは、クローラーというプログラムを使ってWebサイトを巡回しています。
人の目で内容を確認している、という話もありますが、プログラムを使って随時巡回していることは間違いありません。
プログラムに文章の構造を伝えるには、正しくHTMLを使って文章の構造を伝える必要があります。
でたらめなHTMLの使い方をしてしまうと、プログラムが正しく文章を理解してくれないのです。
結果的に、SEOに影響が出てくることになります。
HTML５はタグで囲めばいいわけではない
少しウェブの知識を学んだことがある方は
「HTMLって、タグで囲っていくだけでしょ？」
という感覚をお持ちの方も多いようですが、実はHTMLはとっても奥が深いものです。
HTMLについて正しい知識を持ってコーディングを行わないと、決められたルールが守られていないソースコードとなり、SEO対策（検索エンジンの上位に表示させるための対策）としても不利になります。
正しい記述をするだけで検索順位が上がるというわけではありません。しかし、正しく記述することでクローラーが正しく情報を得る手助けをすることができるのです。
正しい知識を持って、正しくHTMLを記述することによって、結果的にSEO対策が可能となります。
よく間違えてしまうHTMLのルール
正しくHTMLを記述しているつもりが、ついつい忘れてしまっていたり、間違ってしまったりすることがあります。
よく間違えてしまいがちなルールをまとめました。
sectionタグの中にはh*タグが必要
sectionタグはHTML5から登場した新しいタグです。意味付けとしては「節」や「章」の意味があります。ただの文章のグループや、デザインのための囲みで使用してはいけません。その場合はdivタグを使用することになります。
sectionは「節」「章」の意味がありますので、sectionタグの中には必ず見出しを表すh*タグが必要になります。h1~h6までのいずれかのタグです。
紙ベースの本を思い返していただくといいかと思うのですが、節や章が区切られているのに、タイトルがないような構成は見かけません。
何かのテーマを決めて、それについてsectionという「節」「章」で区切ろうとしているはずなので、その内容について端的に説明できるタイトルが必ずあるはずです。
もしそこに、「節」「章」がない場合は、もしかするとsectionではなくdivを使用するべきかもしれません。
- sectionタグ内には見出しを表すh*タグが必要
- もしそのsectionタグに見出しがない場合は、divタグを使うべきではないか見直す
- デザインのためにだけsectionタグを使用している場合は、divを使う
リストの中のリスト リストの入れ子
ulタグの中にulを記述したい（ulの入れ子といいます）場合などは、ulの子要素としてulを記述してはいけません。
<ul>
<li>リスト1</li>
<!-- このulは間違い -->
<ul>
<li>リスト1-1</li>
<li>リスト1-2</li>
</ul>
</ul>あるタグの中にどんなタグを記述することができるか、という決まりを「コンテンツモデル」というのですが、この書き方はコンテンツモデルに違反するためNGです。
ulやolの子要素には、liタグしか入れれません。本来はtemplateタグやscriptタグも入れることは可能なのですが、ほとんど使用する場面はありません。liタグだけ、と覚えておいて差し支えないでしょう。
なのでulタグの入れ子をする場合は、liの要素の中にulを書く必要があります。
<ul>
<li>リスト1</li>
<li>
<ul>
<li>リスト1-1</li>
<li>リスト1-2</li>
</ul>
</li>
</ul>- リストの子要素には基本的にliしか使えないので、入れ子を行うときは注意する。
imgタグにはalt属性を指定する
imgタグは画像を表示するためのタグです。
画像が何らかの影響で表示できなかった場合、代わりに表示するテキストとして用意するのがalt属性です。
<img src="image.jpg" alt="〇〇の写真">このalt属性は画像をテキストで説明することができるため、クローラーが意味を認識しやすいという点もあって重要な属性です。
HTML5では条件付きで省略することが認められているため、（以前は省略は認められていませんでした）alt属性がないからと言って絶対にルールに違反する、というわけではありません。
しかし、ほぼ間違いなく指定するべきだという意図から、間違いの例として挙げておきます。
でも、デザイン目的で画像を配置することもあると思います。
記事の内容には直接には関係ないけれど、装飾したくて・・・といった場合です。
その場合は、alt属性を空白で指定しておけばOKです。
<img src="image2.jpg" alt="">このように記述しておけば、alt属性の指定を忘れているのか、意図的に書いていないのかが明確にもなります。
- imgタグのalt属性は必ず指定しておく
- 装飾目的など、意味のない画像の場合は、alt=””で空白を指定しておく。
h*タグの中にpタグは入れられない
h1~h6タグの中にpタグを入れることはできません。
このルールに違反するサイトをたまに見かけますがこれはNGです。
もしh1~h6タグの中で、文字の大きさを変えたいなどの理由でグループ化したい場合は、pタグではなくspanタグを使用しましょう。
spanタグは利用OKです。
- h1~h6タグ内にpは使用できない
- h1~h6タグ内で一部の文字をグループ化したい場合はspanタグを使用する
SEO対策だけではない、HTML5を正しく記述する理由
また、CSSを記述するうえでも、HTML要素の特徴を知らなければなりません。
よくわかっていないままCSSを記述しても、自分が思ったような表示にならないことも多くあります。
また、CSSを書きながらHTMLを修正することもありますが、よく理解していないままHTMLを修正してしまうと、今までCSSが有効だったものがうまく表示されなくなる可能性もあるのです。
通常はHTMLを記述してからCSSを作るのですが、最初の段階である程度完成度の高いHTMLを記述することが、後々の作業の手間が省けます。
しっかりHTMLを理解して記述することが大切なのです。
実際の作業はHTMLのタグを使って文章を記述することになりますので、「簡単だなぁ」と感じてしまうことも多いようです。
しかし、正しくHTMLを記述することはとても難しい作業です。
気を引き締めて、しっかり学びを進めましょう。
SEOを高めるために大切なタグ
正しいHTMLを記述することはもちろん大切で大前提なのですが、SEOを高めるために特に配慮しないといけないタグがあります。
いくつかピックアップしてご紹介したいと思います。
titleタグ
まずはもちろん、titleタグです。絶対に手を抜けないタグになります。
titleタグはGoogleなどの検索エンジンで、検索結果として表示されるものでもあります。ユーザーが直接目にするものなので、「クリックしてみたいなー」と思ってもらえるようなタイトルにする必要があります。
また、タイトルの長さにも気を配っておく必要があります。30から35文字くらいがいいといわれていますが、これはGoogleのアップデートによって変わる可能性があります。
あまりにも長いタイトルだと、検索結果として表示されるときに省略されてしまう可能性があります。なので、あまり長すぎないタイトルをつけるべきでしょう。
また、省略されてしまう可能性を考えて、ユーザーに伝えたいキーワードや文言はタイトルの前の方になるように記述するとよいでしょう。
metaタグのdescription
metaタグのdescriptionもtitleタグと同様で、検索結果に表示されるものになります。もちろん、ユーザーが直接目にするものです。
なので、そのページの説明文でもあり、ページのアピールポイントを伝える部分でもあります。
descriptionを読んで「このサイトに自分が求める情報があるかな？」と判断してクリックしてきます。なのでdescriptionの文章はしっかり考えて、そのページの魅力が伝わる文章を書きましょう。
またdescriptionも長すぎると途中で省略して表示されてしまいます。
120~150文字くらいにするとよいでしょう。
ただし、こちらもGoogleのアップデートによって変わる可能性はあります。
もちろんtitleと同様、ユーザーに伝えたい言葉は前の方に記述しておいた方がいいです。省略のための備えです。
h1からh6までのhタグ
見出しを表すタグですが、SEO的にも重要なタグです。
特にh1タグは大切で、そのページを端的に表すh1を用意しましょう。
１ページに複数使用することが認められるようになりましたが、1つに絞っていた方がいいようです。
これに関しては、MDNのページにも掲載されています。
<h1>はページまたはビューにつき1つだけ使用してください。内容の全体的な目的を簡潔に記載しなければなりません。
<h1>-<h6>:HTMLの見出し要素 MDN WebDocs より引用
複数の<h1>を使用してもエラーにはなりませんが、これは最善の方法とは見なされていません。これは読み上げソフトや SEO で有利です。
見出しについては、サイトを訪問してくれたユーザーが目にするものなので、titleやdescriptionほどサイトへの流入に影響を与えるとは言えないのですが、文章の構造を正しく表現することができる、という意味では重要だといえます。
aタグ
リンクを配置するための使用するタグです。
別タブで表示させたいときに使用するtarget=”_blank”は、外部へのページを表示する場合や、別のタブで表示したほうがユーザビリティが高まると考えられる場合以外は、使用しないでおきましょう。
ページ内のリンクをクリックするたびにタブが開いてしまうと、ユーザーにもストレスがかかってしまいます。
また、リンク内の文字も「詳しくはこちら」より「メニューの内容はこちら」など、より具体的なテキストのようないいといわれています。
クローラーがリンクの先の情報は何なのか？の判断がしやすいためです。
linkタグのcanonical
サイト内で重複したページがある場合に必ず必要になるタグです。
同じ内容が違うURLで重複して公開されている場合、SEOの評価が下がると言われています。SEOの評価がそれぞれのURLでばらけてしまうので、一つにまとめた方がいいのです。
でもサイトを制作していくうえで、スマフォ用のサイト、PC用のサイトをレスポンシブという技法ではなく、別々に用意したい場合、URLを分けて管理する場面があります。
その際には、同じ情報をそれぞれで掲載することになるわけなので「このページは同じページですよー」とクローラーに教えてあげる必要があるのです。
httpとhttpsが混在している、wwwのありとなしが混在する、という場合も使用するべきです。
ただこちらは、httpsに統一するべきだと思いますし、wwwのあり、なしもサーバーの設定などで可能なので、どちらかに統一しておくとよいと思います。
