HTML5とは何か?SEOとの関係・特徴・メリットを説明

HTML5とは何か?SEOとの関係・特徴・メリットを説明

追記:2021年1月にW3Cが定めたHTML5は廃止され、現在はWHATWGが定めたHTML Living Standardが標準になっております。

初心者の方に誤解のないように記載すると、規格が変わっただけで、HTMLの存在そのものは大きくは変わっておりません。

詳しくは下記のブログがわかりやすいです。

参考:どうしてHTML5が廃止されたのか | フューチャー技術ブログ

また、このブログはHTML5があった時代の内容を元に記載しておりますので、その前提で読んでいただけますと幸いです。

 

HTML5の特徴は動画や音声、アニメーションといった要素をウェブページに簡単に実装できることです。

SEOにおいては、HTML5だからといって検索順位に影響はありませんが、よりリッチにコンテンツを表現することができます。HTML5についてタグの具体例をご紹介しながら解説します。

\プロのノウハウを詰め込みました!資料ダウンロードはこちらから/

HTML5とは何か?特徴とメリットを説明

HTMLはブラウザでのテキストの見た目を決める目印

ウェブサイト制作を担当していると必ず耳にするのが「HTML5」という言葉です。HTMLとは「HyperText Markup Language」の略称で、ウェブサイトを表現するために用いられる言語を指します。HTML5はそのHTMLの最新バージョンであり、現在主流の言語として使用されています。

SEOにおいては、HTML5だからといって検索順位に影響があるということはありません。しかし、HTML5を使うとウェブページに動画や音楽を簡単に埋め込むことができ、よりリッチにコンテンツを表現することができます。

またHTML5は従来のHTMLよりも記述がシンプルになるため、ページを軽くできたり修正がやりやすくなったりといったメリットもあります。よって、直接SEO対策にはならなくても、ウェブサイト制作ではできるだけHTML5を用いるほうがいいでしょう。

HTML5とは

HTML5について詳しくご説明します。冒頭でも述べたように、HTMLは「HyperTextMarkup Language」のことで、ウェブページを書くための言語です。「ハイパーテキスト」とはハイパーリンクを埋め込む機能を持ったテキストのことで、「マークアップ」とは目印のことを意味します。見出しや段落、表やリストといった文書の要素がどのように構成されているのかを、目印で表現するという考え方です。

例えば、HTMLで<br>と入力すると、ブラウザ上ではその位置で文章が改行されます。このように「ブラウザでの見た目」を決める目印のことをHTMLタグと呼びます。HTMLタグで記述することにより、コンピュータはその文書をどのようにブラウザ上に表示すればいいのかを理解するのです。

しかし、HTMLはもともとシンプルな文書を記述するために生まれた言語なので、複雑でリッチな表現には向きません。そこでHTMLと組み合わせて用いられてきたのが、CSSやJavaScriptといった別の言語です。HTMLでウェブサイトの骨組みをつくり、CSSやJavaScriptで装飾するという手法がインターネットでは長らく主流だったのです。

HTML5はそんなHTMLの最新規格として2014年に登場しました。HTML5の特徴は動画や音声、アニメーションといった要素をウェブページに簡単に実装できること。これまではJavaScriptなど別の言語に頼っていたリッチな表現がHTMLタグで表現できるようになったのです。なお、従来のHTMLから派生した言語として「XHTML 1.0」というものもあります。HTMLをベースにさまざまな改良が加えられた言語でしたが、HTML5が登場したことで2018年に正式に廃止が決定しており、これから新規に使われることは少なくなるでしょう。

(※HTM5ですべての実装ができるわけではなく、CSSやJavaScriptとHTML5を組み合わせて使うことも多いです。HTML5は従来のHTMLより、ウェブページへの動画などの実装ハードルが下がった、とお考え下さい)

HTML5の特徴

 

HTML5によって変わったルールとSEOの関係

従来のHTMLでは、SEOの観点から守るべきルールというものが存在していました。例えば、「特定のタグを複数回使うとSEOに悪影響を与える」ことから、サイト制作ではそのルールを守ってHTMLを記述していたのです。しかし、HTML5ではそういったタグ設定のルールや、タグの役割そのものが変更されています。冒頭で述べたようにHTML5であること自体はSEOにさほど影響を与えるものではありませんが、タグの役割やルールの変更はSEOに影響する可能性がありますので、しっかりと把握しておくべきです。具体的にいくつかの変更例をご紹介していきましょう。

H1タグは複数使用してOK

これまで、大見出しを表すH1タグは原則として1ページに一つだけ使用することが推奨されていました。しかし、HTML5ではH1タグを複数回使用しても問題ありません。これはGoogleが公式に認めています。ただし、H1タグを複数回使うことでSEOで有利になるわけではありません。あくまで“問題ない”というだけです。

H1タグのスクリーンショット

また、Googleが認めているとはいっても、見境なしにH1を使うのはあまりおすすめできません。H1タグがその記事の主要テーマを表していることは変わりませんから、H1タグを乱発することでクローラーに正しくページの内容が伝わらない恐れがあります。複数回の使用が認められているとはいえ、事情がない限りH1タグは従来通り1ページに一つだけ使用し、H2やH3タグを使用して整理するよう心がけましょう。

H1タグの説明

strongタグの意味

HTMLタグの1つにstrongがあります。strongで指定した文字は太字で表示されます。

▼strongで指定した箇所

strongタグのスクリーンショット

 

例えば、

<strong>SEO</strong>は大切です。

上記のように記述すると「SEO」の部分が太字になります。

この表示からもわかるように、従来のstrongタグには「強調」という意味がありました。近い意味のタグに「em」がありますが、strongはそれよりもよりテキストの重要性を高めたいときに使います。HTML5でも太字表示は同じですが、strongタグの意味が「重要」に変更されました。

つまり、ただ強調するだけでなく「その文章のなかでより重要であることを伝えたい箇所」に対して使用するタグになったのです。

strongタグの使用で注意すべきなのは、使いすぎないということです。テキストのなかで何度もstrongタグを使用すると太字ばかりになってしまい、読みにくくなります。また、検索エンジンのクローラーにも本当に重要な箇所が何なのか伝わりにくくなる可能性があります。strongはあくまでもその文章のなかで特に重要な部分に絞って使うようにしましょう。

また、H1のような見出しタグのなかでstrongタグを使ってはいけません。H1はそれ自体がすでに強調の意味を含むタグですから、そこにstrongを重ねるのはルール違反となります。

ちなみにSEOではstrongタグはそれほど大きな効果はないとされています。しかし、そのページのどの部分が重要なのかを検索エンジンに伝える効果があるのは事実です。使いすぎを避けて適切に使用しましょう。

strongタグの意味

bタグの意味

strongと同じく文章を太字で表示するタグにbがあります。

以下のようにHTMLを記載します。

<b>りんご</b>は大切です。

上記の例ですとbタグで囲んだ「りんご」という部分が太字となります。

bタグのbは「Bold(太字)」のことです。よくstrongと混同されがちですが、bタグには「強調」や「重要」という意味はありません。「強調したり重要だと伝えたりしたいわけではないけれど、単純に見栄えとして太字にしたい箇所」に使用します。実はbタグは従来のHTMLでは非推奨とされていました。しかし、HTML5では非推奨の対象からは外され、使用しても問題のないタグとなっています。

もっとも、HTML5においてもH1~H6の見出しタグやstrongタグなどを優先したほうがいいのは変わりません。また、SEOの観点からもbタグにはそれほど有効性は認められていません。

bタグの意味

\プロのノウハウを詰め込みました!資料ダウンロードはこちらから/

HTML5かどうか確認する方法

自社サイトがHTML5で記述されているかどうかを見分けるにはどうすればいいのでしょうか。注目するのはウェブページのHTMLの最初の部分です。HTMLでは最初の部分に「DOCTYPE宣言」を記述します。DOCTYPE宣言とはHTMLのバージョンを示す宣言で、バージョンによって内容が異なります。

従来のHTML4.01では以下のように記述していました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

一方、HTML5では以下のように記述します。

<!DOCTYPE html>

HTML5の記述はとてもシンプルです。

HTMLソースを開き、DOCTYPE宣言を確認すれば自社サイトがHTML5でつくられているのか、それとも従来のHTML4.01でつくられているのかが一目でわかるのです。

▼ナイルのSEO相談室のソースコード。1行目に「<!DOCTYPE html>」の記載があります。

HTMLソースコード

サイト制作で優位性があるHTML5を活用していこう

HTML5は現状では直接的にSEO効果を高めるものではありません。しかし、サイト制作の面ではさまざまな優位性があります。動画や音楽、アニメーションなどリッチなコンテンツをウェブサイトで表現したい場合はHTML5が欠かせません。スマートフォンをはじめデバイスが多様化し、今後はさらにユーザー環境の変化が加速していくことが予想されます。変化への対応に有利なのは当然、最新の規格です。新たにサイトを制作する際やリニューアルの際には、HTML5の導入を検討してみてはいかがでしょうか。

編集者情報

金子 光
金子 光(かねこ ひかる)
新卒で楽天グループ株式会社に入社。
営業管理として40人規模のチームをマネジメント。その後社員3人のベンチャー企業に入社し新規事業立ち上げを経験。
現在はナイルのマーケティング相談室編集長として、Webマーケティングに従事している。
無料相談はこちらから

監修者情報

ナイル編集部
ナイル編集部

2007年に創業し、約15年間で累計2,000社以上の会社にマーケティング支援を行う。また、会社としても様々な本を出版しており、業界へのノウハウ浸透に貢献している。(実績・事例はこちら

PIVOTにもスポンサード出演しました!

PIVOTにもスポンサード出演しました!
チャンネル登録者数が100万人を超えるYoutubeチャンネルPIVOTにスポンサード出演しました!
動画内では、マーケティング組織立ち上げのための新しい手段についてお話しています。
マーケティング組織に課題がある方はぜひご覧下さい。
動画を見る

関連記事

meta-keywords(メタキーワード)過去の使われ方から学ぶ不要になった背景

meta keywords(メタキーワード)過去の使われ方から学ぶ不要になった背景

サブドメインとは?知っておくべき基礎知識から取得方法まで解説

サブドメインとは?知っておくべき基礎知識から取得方法まで解説

SEOポイズニングとは? 手口と対策を徹底解説

【注意】SEOポイズニングの特徴や手口は?5つの対策を徹底解説!

新着記事

動画で学ぶコンテンツマーケティング

【第2回】動画で学ぶWebマーケティング【コンテンツマーケティング編】

【厳選】被リンクチェックツールのおすすめ8選!確認手順やポイント、リンク獲得対策までわかりやすく解説

【厳選】被リンクチェックツールのおすすめ8選!確認手順やポイント、リンク獲得対策までわかりやすく解説

構造化データのマークアップとは?知っておくべき10種類や設定方法をプロが解説

構造化データのマークアップとは?知っておくべき10種類や設定方法をプロが解説

もっと効果的な集客施策
してみませんか?

Web戦略の情報を
定期的に受け取りたい方

取材・メディア掲載に関するお問い合わせは、こちらからお問い合わせください。