聞けないHTMLの基本と、SEOに有効なタグ設定ツイートするSEO2019.02.18Webマーケティングに関わる人なら、HTMLという言葉を一度や二度は耳にしたことがあるでしょう。「HTMLって何?」とあらためて聞かれると、答えに詰まってしまう方も少なくないのではないでしょうか?この記事では、Webサイト構築に無くてはならない要素であり、かつSEO対策においても重要な鍵を握る「HTML」について、マーケ担当者がぜひとも押さえておきたいポイントをご紹介します。Language(ハイパーテキストマークアップ言語)の頭文字を並べたもので、Webページを記述するために使われる一種のプログラミング言語です。EdgeといったWebブラウザ上で表示するコンテンツを作成するために使用するマークアップ言語、ということになるでしょうか。HTMLで記述したコンテンツ(HTML文書)は、Webブラウザを使って、指定したとおりの構造で表示することができます。【図:HTML、Webページ、Webブラウザの関係】HTMLのタグについてHTMLではタグと呼ばれるもので文字列などを囲む形でコンテンツを記述します。/>といった様々なタグが用意されています。タグはそのコンテンツのタイトルを表します。記述しておくと、通常はWebブラウザのタイトルバーに「はじめてのHTML」と表示されます(※1)。※1:「タグには決められた役割がある」と書きましたが、実際にはWebブラウザによって微妙に動作が異なる場合があり、これがいわゆる「ブラウザ間の互換性」という問題を引き起こすことがあります。HTMLとCSS、JavaScriptの関係ここでひとつ注意しておきたいのは、HTMLはあくまでも文書の「構造」、つまり、文書のタイトルや段落、見出し、強調する箇所などを表現するための言語であり、デザインやレイアウトを表現するためのものではないということです。工夫次第ではHTMLを使ってレイアウトを整えたり、デザイン的な要素を実現したりすることも可能です。実際、インターネットが普及し始めた頃は、HTMLのtableタグという表組み用のタグを駆使して複雑なレイアウトを実現するテクニックが流行したことがありました。現在ではこうした使い方は推奨されていません。いうのは、文書構造の定義とレイアウト・デザイン的な要素は分離した方が分かりやすいからです。Webページを制作する際にも、文書の作成作業とデザイン作業とを分業で進めやすくなります。Sheets/カスケーディング・スタイル・シート)です。CSSを使うと、HTML文書内の様々な要素に色付けやフォントサイズ、表示位置の指定などを行うことが可能です。HTML文書と組み合わせて使われる技術としては、JavaScriptも重要です。JavaScriptは簡単にいうとWebページ上で動的な処理を実行させるために使われる技術です。JavaScriptを利用すると、問い合わせフォームの送信ボタンクリック時に入力エラーをチェックしたり、ショッピングカート内で購入数を変更した際に金額を自動計算したりといった動きを実現することが可能です。【図:HTML、CSS、JavaScriptの関係】HTML5についても知っておこうHTMLにはいくつかのバージョンがありますが、現在の最新はHTML5(HTML改訂第5版)とよばれるものです。HTMLが誕生したのは1989年のことですが、1999年2月にHTML4が発表されて依頼、このHTML4が長い間利用されてきました。その後、2014年10月にHTML5が発表され、現在はこのバージョンが多く使われるようになってきています。HTML4とHTML5の違いとしては、文書構造がシンプルになったこと、動画や音声の埋め込みを簡単に行えるようになったこと、新しい要素(タグ)が追加されてより柔軟な表現が可能となったことなどが挙げられます。JavaScriptを使わなければ実現が難しかったような動的な処理を、HTMLだけで実現できるようになったことも大きな変更点だといえるでしょう。HTML5を使えば、画像のポップアップ表示やフェードアウト、ドラッグ&ドロップといった操作をHTMLだけで実現することが可能です。Optimization/サーチエンジン最適化)対策の関係について触れておきましょう。SEO対策ではWebページを検索エンジンに上位表示させるために様々な取り組みを行いますが、中でも重視されるのがHTML文書のチューニングです。SEOとは、突き詰めていえば「検索エンジンにWebページの存在を正しく認知/理解してもらうための活動」です。コンピュータ・プログラムの一種である検索エンジンは、HTMLで書かれたコードを解読することによってWebページの内容を理解しようとします。このため、検索エンジンが正しく理解できるようなHTMLコードを書くことが重要なSEO対策となるのです。ここでは、SEO対策で特に重視されるタグをいくつかご紹介しておきましょう。titleタグtitleタグは文字通り文書のタイトルを定義するためのタグです。タイトルは文書を総括するものであるため、検索エンジンはこのタグを重視すると考えられています。SEO対策としては、titleタグ内に上位表示させたいキーワードを自然な形で含めることが重要だと言われています。h1タグh1タグは文書の大見出しを定義するためのタグです。大見出しは通常、一つのページに一つだけ定義するもので、タイトル同様に文書の概略を表す重要な要素です。検索エンジンが文書の内容を理解する際にもこのタグが重視されると言われています。h1タグの要素におも、上位表示させたいキーワードを自然な形で含めるようにしましょう。共にオプションをつけて使われます。中でも特に重要とされているのがdescriptionというオプションで、その文書の概要を記載しておくのに使います。ここに記載した内容は、検索結果ページにページの説明として表示されます。検索エンジンはこのタグの内容を重視しないという意見もありますが、上記のような理由により、このタグには適切な内容を記述しておくように心がけるべきです。metaタグにはkeywordというオプションがあります。keywordオプションは、そのページにとって重要なキーワードを記述するためのもので、かつては検索順位を上げる上でこのタグが重要視されていたことがありました。現在ではSEO面での効果は低いと考えられています。いえ、このオプションを全く使用しなくても良いということではありません。過剰な対策は不要ですが、ページを表現する適切なキーワードを指定しておくように心がけましょう。SEO対策はリバースエンジニアリングGoogleやYahoo!などの検索エンジンは、表示順位を決定するアルゴリズム(方式)を正式に公開しているわけではありません。このため、SEO対策は実際の表示結果を元に逆引きで検索エンジンの動きを探る、一種のリバースエンジニアリングのような形で行わざるを得ません。検索エンジンのアルゴリズムが予告なく変更される可能性も十分にありえます。上記にて「SEO対策において重視されるタグ」をご紹介しましたが、あくまでも現時点では広く一般にこのように考えられているというレベルの話です。これらのタグについて対策しさえすれば必ず上位表示されるというものではありませんし、人によって異なる解釈がなされている場合も少なくありません。一つの目安として捉えておいてください。まとめ以上、この記事ではHTMLの概要を解説し、SEO対策時に重視されるタグをいくつかご紹介しました。近年になってCMSが普及し、HTMLのコードを手で入力してWebページを作成する機会は減りつつありますが、基本的な知識を押さえておくに越したことはありません。SEO対策に取り組む方には、この記事を手始めとして、HTMLについての知識を深めてみることをお勧めします。/></p><p>大見出しは通常、一つのページに一つだけ定義するもので、タイトル同様に文書の概略を表す重要な要素です。検索エンジンが文書の内容を理解する際にもこのタグが重視されると言われています。h1タグの要素におも、上位表示させたいキーワードを自然な形で含めるようにしましょう。共にオプションをつけて使われます。中でも特に重要とされているのがdescriptionというオプションで、その文書の概要を記載しておくのに使います。/></p><p>ここに記載した内容は、検索結果ページにページの説明として表示されます。検索エンジンはこのタグの内容を重視しないという意見もありますが、上記のような理由により、このタグには適切な内容を記述しておくように心がけるべきです。</p><p>なお、metaタグにはkeywordというタグも存在します。keywordは、そのページにとって重要なキーワードを記述するためのもので、かつては検索順位を上げる上でこのタグが重要視されていたことがありました。現在ではSEO面での効果は低いと考えられています。/></p><h3>SEO対策はリバースエンジニアリング</h3><p>GoogleやYahoo!などの検索エンジンは、表示順位を決定するアルゴリズム(方式)を正式に公開しているわけではありません。このため、SEO対策は実際の表示結果を元に逆引きで検索エンジンの動きを探る、一種のリバースエンジニアリングのような形で行わざるを得ません。検索エンジンのアルゴリズムが予告なく変更される可能性も十分にありえます。</p><p>上記にて「SEO対策において重視されるタグ」をご紹介しましたが、あくまでも現時点では広く一般にこのように考えられているというレベルの話です。これらのタグについて対策しさえすれば必ず上位表示されるというものではありませんし、人によって異なる解釈がなされている場合も少なくありません。一つの目安として捉えておいてください。/></p><h2>まとめ</h2><p>以上、この記事ではHTMLの概要を解説し、SEO対策時に重視されるタグをいくつかご紹介しました。近年になってCMSが普及し、HTMLのコードを手で入力してWebページを作成する機会は減りつつありますが、基本的な知識を押さえておくに越したことはありません。</p><p>特にSEO対策に取り組む方には、この記事を手始めとして、HTMLについての知識を深めてみることをお勧めします。