HTML5となんちゃってHTML5

HTML5となんちゃってHTML5

webのあれこれ
2018/07/18
0
vanillaice (Akira)
vanillaice (Akira)
EducationHTMLSEO初心者向け

「html5で構成されている」ことと「html5が使えるようになっている」のとでは全く違います。自身の利用テンプレートをhtml4からhtml5へ切り替える際には概ね2つのパターンを選択します。

  1. html5に準拠するマークアップに全て書き換える
  2. DOCTYPE宣言(Document Type Definition) だけをhtml5に書き換える

1を選択する場合には「テンプレートを変更する」のが一番の近道ですね。2の場合には既存テンプレートをそのまま流用したい場合に選択することがあります。

1が html5、2が なんちゃってhtml5 です。

html4とhtml5のDOCTYPE宣言の違い

html4(transitional(移行型))

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

html4(strict(厳密型))

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

html5

<!DOCTYPE html>

一般ブログでhtml4の strict 指定はまず無いと思います。strict DTDの場合、W3Cが「非推奨」と認定した要素の一切は利用できません。なので融通の効く transitional を用いる場合がほとんどです。

html4のテンプレートを html5を使える状態にする にはこの部位を変更するだけです。ただしそれは html5を「使えるようには成った」というだけであって、html5に「成った」わけではありません。

* DTD = document type definition
* W3C = World Wide Web Consortium = htmlやCSSなどweb上の技術の標準化を推進する非営利団体

正統かなんちゃってか

どんな場合にどちらの選択をするかについてはたぶんこんな感じかなぁ、と思います。

html5 なんちゃってhtml5
テンプレートを変更しても構わない
html5の知識が有る
将来的だけでなく現在も含め、マークアップの正統性を確保する
テンプレートを変更したくない
html5の知識が無い
将来的なリソースを見据え、とりあえずhtml5新要素が使える状態にだけはしておく

「なんちゃって」という表現は若干失礼な気もしますが、DTDだけをhtml5にしたところで、マークアップにhtml5で定められた要素を用いていなければ「html5で構成している」とは言えません。 故に「なんちゃって」

html5のことはよくわからないけど、今後使う可能性のある プラグインやウィジェットなどがhtml5である場合に備え、とりあえずそれらの新しい技術を 使えるようにだけはしておきたい、といった場合にDTDの書き換えは有効と言えます。

2018年現在ではhtml5が勧告(web標準・水準認定)されて既に4年ほど経過しています。つまりhtml5以前のhtmlは水準以下(旧仕様)となっています。現段階で SEOなどの観点から見ても正統とされる技術を用いたい と思う場合にはDTDを書き換えただけでは終わりません。html5新要素を用いて初めて「html5構成である」と言えます。

htmlとは文書構造に意味や定義を与えるもの

ブログで記事を書くとGoogleなどの検索ロボット(クローラー, bot)が巡回し、その内容を読み取ります。ただしbotは人間ではなくロボットなのですから、人間の言語を理解することはできません。この時点では書いてある文字列は単なる文字の羅列です。その文字列に意味や定義を与えるために用いるのが htmlタグ です。

旧来のhtml4ではそのほとんどが div要素 で構成されるような内容でした。

<div id="container">
  <div id="navigation">
    <ul>
      <li><a href="">リンク1</a></li>
      <li><a href="">リンク2</a></li>
      <li><a href="">リンク3</a></li>
    </ul>
  </div>
  <div id="main">
    記事内容
  </div>
</div>

こんな感じでしょうか。 divタグは定義を持っていません。 ソースコード内はdivだらけなのですが、divというのは特に意味を持たない数少ないhtmlタグなので、botが見た時に「ナビゲーションがどこに有るのか」「ページ内で最も重要な文章内容はどこにあるのか」を瞬時に判断することができません。ただしbotのアルゴリズムは大変優れていますし経験値というのがありますので、ある程度の予測は立てられます。

一方html5では概ね以下のような内容になります。

<div id="container">
  <nav id="navigation">
    <ul>
      <li><a href="">リンク1</a></li>
      <li><a href="">リンク2</a></li>
      <li><a href="">リンク3</a></li>
    </ul>
  </nav>
  <main id="main">
    記事内容
  </main>
</div>

ソースコード内の <nav> <main> はhtml5新要素で、html4時代には存在しなかった要素です。botは nav を発見すればそれが「ナビゲーション」であると判断し、main を発見すれば「メインコンテンツ」であると判断することになるでしょう。

つまりhtml5新要素を使うことで、文書構造をより素早くより明確・的確に伝えることができるようになるわけです。botが瞬時に定義を理解すればクロールの効率化・リソースの削減に繋がります。意味の無いdivだらけのhtmlよりも明確な定義づけが行われているhtmlの方がロボットにとっては親切だということです。html5はこのための15年ぶりの大改革なんですよ。

ここまででおわかりのように、「現在」を軸にすれば DTDを変更しただけでは何の意味もない ということになります。DTD変更だけのhtml5は「新技術への便宜を図るだけで実が伴っていない」という言い方をしても決して乱暴すぎることはないと思います。

まとめ

FC2ブログの公式配布ページで提供される「なんちゃって」html5テンプレートはほぼありません。「ほぼ」というのは私が全てのテンプレートのソースを開いて確認したわけではないからです。ですからhtml4からhtml5へ変更したい、という気持ちの有る方は、なんのために?(What for?) を自問されまして、最適と思われる方法を選んでください。そして自身で修正ができないのであれば、素直にテンプレートを選び直すことをおすすめします(但しFC2ブログテンプレートの「SEO対策済」はあまり過信しない)
「SEOのことを考えてhtml5に修正しました!」(実際はDTDを変えただけ)
という場面に出くわすたびもの悲しい気分になります(笑)

Related post

Comments  0

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)