HTMLを最適化する

HTMLを最適化することは、SEOの観点から重要です。ここでは、一般的に行われているHTMLの最適化について取り扱います。

代替テキスト

代替テキストは、画像の代わりとなるテキストです。img要素に設定します。何らかの要因で画像が表示されないときや、ユーザーが音声ブラウザなどを使用しているときに使用されます。

また、画像を認識できない検索エンジンも代替テキストを使用します。

代替テキストを使用することで、画像を使用できないユーザーにも快適にウェブサイトを使用してもらうことができ、ユーザビリティの向上につながります。

代替テキストはこのように記述します。

<img src="/1.png" alt="代替テキスト" /> <img src="/2.png" alt="代替テキスト">

画像の代わりに使われることを想定して設定するとよいでしょう。

構造化マークアップを使う

構造化マークアップとは、検索エンジンにコンテンツを正しく理解してもらうためのマークアップのことです。

例えば、「わたしは東京都に住む山田太郎です」という文章があったとしましょう。人間はこの意味を容易に理解できますが、検索エンジンはこの文章を誤った意味でとらえてしまうかもしれません。

現在の検索エンジンは改良が続けられており、このようなことが起きることは少ないのですが、検索エンジンは完ぺきではないため、文章の意味を誤認識してしまうこともあります。

構造化マークアップを使うと、「わたしは(日本国の)東京都(地名)に住む山田(姓)太郎(名)です」のように、HTMLの中に文章の意味を埋め込むことができます。

GoogleやBingを開発しているMicrosoftなどがこの構造化マークアップを開発しており、SEOへの効果が期待されています。

しかし、このような構造化データを使用するにはとても多くの時間を必要とします。現時点では、このような構造化マークアップを行うよりも、良質なコンテンツを量産することのほうが重要です。

実際、ビックキーワードで上位表示されているサイトのほとんどが構造化マークアップを行っていません。そのため、構造化マークアップをすることに時間を使うのではなく、良質なコンテンツを作ることに集中すべきです。

パンくずリスト

この記事の下部に表示されている「HOME > … > …」のことをパンくずリスト(Breadcrumb)といいます。HTML5では、パンくずリストを構造化することができます。

パンくずリストを使用すると、検索エンジンにそのページがどの階層に位置するのかを伝え、サイト全体の構造を正しく理解してもらうことができます。また、閲覧している記事のカテゴリーページでほかのページを閲覧することができ、使い勝手も向上するので、必ず設置しておきましょう。

これはパンくずリストのコードの例です。このコードは、「ホーム > ABC > ABCとは」というパンくずリストを表します。内容は独自に変更し、使用してください。

<ul itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<li><a href="/" itemprop="url"><span itemprop="title">ホーム</span></a></li>
<li><a href="/ABC/" itemprop="url"><span itemprop="title">ABC</span></a></li> 
<li>ABCとは</li>
</ul>

このコードを活用し、例えばデジタルカメラを販売するショッピングサイトであれば、「ホーム > 電化製品 > カメラ > デジタルカメラ」などのパンくずリストを作成するとよいでしょう。

HTML5で追加されたタグを使う

HTML5にはさまざまなタグが追加されました。

追加されたタグを使うことで、ウェブページの内容に意味を持たせることができるようになりました。

ここでは、追加された要素とその使用法を解説します。

汎用要素の置き換え

汎用要素とは、<div>要素や<span>要素などの特別な意味を持たないタグのことをいいます。

これまで汎用要素を使って指定していた部分をHTML5で追加されたタグに置き換えることで、よりウェブサイトの構造を理解してもらうことができます。

また、このような要素を使用することで、ブラウザによってはその部分を適切に処理したりすることができるようになります。

以下は実際に当サイトが行ったHTMLの最適化です。

  • <div id=”header”> → <header>
  • <div id=”footer”> → <footer>
  • <div id=”content”> → <main>
  • <div id=”article”> → <article>
  • <div id=”menu”> → <nav>
  • <div id=”copyright”> → <small>
  • <div id=”mail”> → <address>

section

記事に文章の構造を示すための要素を使用することで検索エンジンにサイトの構造を示すことができます。例えば、次のようなコードがあったとしましょう。

<h1>タイトル</h1>
<p>テキスト</p>
<h2>見出し</h2>
<p>テキスト</p>
<h3>小見出し</h3>
<p>テキスト</p>
<p>あとがき</p>

この場合、人間が見たらすぐにあとがきの部分は<h3>とは関係ないと認識することができるでしょう。しかし、検索エンジンはそう認識できないかもしれません。

もしかしたら、この部分は<h3>の小見出しの続きであると勘違いするかもしれません。そこで、次のようなHTML5で追加された要素を使用します。

<section>
 <h3>小見出し</h3>
 <p>テキスト</p>
</section>
<section>
 <p>あとがき</p>
</section>

なお、<section>タグは、その要素でマークアップされた部分が一つの節であることを示す要素です。この要素を使用することで、あとがきと<h3>は無関係であることを示すことができました。

このような便利な要素はほかにもあるので、詳しくはHTML5のリファレンスなどを参照してください。

small

<small>は、HTML5以前では文字を小さくするための要素であり、HTML 4.01では非推奨とされていました。

ですが、HTML5では、<small>要素に「文字を小さくする」という意味はなくなり、<small>は免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用<small>-HTML5タグリファレンスより引用)するための要素になりました。

HTMLのエラーをなくす

HTMLの規格を制定しているW3Cは、HTMLの文法エラーを検証するThe W3C Markup Validation Serviceを提供しています。

このツールを使うことで、HTMLとして正しくない記法を探し出すことができます。

間違った記法がある場合、ブラウザによってはそのウェブサイトを正しく読み込めないこともあります。ですから、エラーがあったときは必ず解消させましょう。

最後に

HTMLを最適化することで、さまざまなメリットが受けられます。また、構造化マークアップされた情報を積極的に使用するブラウザも存在し、構造化マークアップはこれから重要になってくるでしょう。

しかし、それよりも大切なことは、良質なコンテンツを作ることです。構造化マークアップにこだわりすぎてコンテンツの質が下がることは避けなければなりません。

なぜなら、検索エンジンはコンテンツの質を最重要要素として評価しているからです。そのため、構造化マークアップを行うことよりも良質なコンテンツを作ることを優先させましょう。

なお、GoogleはHTMLの読みやすさやエラーの多さを評価対象としていません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です