HTMLテクニック

HTMLテクニック

HTMLヘッダのスリム化

HTML5への移行や.htaccessを利用すれば、HTMLヘッダをスリム化する事ができます。
HTML5は元々シンプルな構造でヘッダ部分の記述内容も少なく、さらにヘッダに記述しているいくつかは.htaccessに書く事でも対応できます。
これによりヘッダの記述内容を大幅に減らす事ができますが、文字コードはHTMLで指定しないと文字化けするブラウザもあるので注意してください。
HTML5
.htaccessテクニック
Chromeで文字化けする

HTML高速化

HTMLの処理速度

HTMLも記述の仕方によっては処理速度が変わります。
できるだけスムーズに処理されるような正しくて効率的なコーディングを心がけてください。

コードの配置

一般的にJavaScriptは処理に時間がかかるため、ページの下部に配置するのが良いとされています。
ただし、アクセス解析は解析精度が落ちるので、精度と速度のどちらを重視するかで配置位置も変わります。
精度優先ならページの上部に配置し、速度優先ならページの下部に配置してください。
Webページを速く見せるための5つのちょっとした工夫

  1. JavaScript:ページ下部に配置
  2. アクセス解析:低速度/高精度(ページ上部に配置)、高速度/低精度(ページ下部に配置)

画像のサイズ指定

画像のサイズ指定方法です。
画像サイズをまったく指定しないと遅くなるので、サイズは必ず指定してください。
また、指定サイズと実サイズが違っても遅くなるので、この2つは同じにする必要があります。

  1. 高速表示:実サイズと同じサイズを指定
  2. 低速表示:指定無し、実サイズと異なるサイズを指定

HTML要素の省略

HTMLではコードの省略が可能なものもあります。
コードを省略するとソースの見た目は変わりますが、表示速度が若干アップするようです。
見た目や扱いやすさを考慮するなら省略せず、表示速度を重視するなら省略した方が効果的なようです。
「HTMLのタグは一部省略可能」表示速度はどちらが早いのか調べてみた
終了タグが省略可能な要素
HTML5でタグをどれだけ省略できるか調べてみた

オーディオスプライト

オーディオスプライトはHTML5の技術を利用した音声ファイルの最適化技術です。
複数の音声ファイルを一まとめにして、読み込み時の負荷を軽減する事ができるようです。
HTML5の音声ファイル最適化技術オーディオスプライトとは?

HTMLのSEO対策

ページタイトル(title要素)

最もSEO効果が高いとされるのがページタイトルです。
現在ではHTML要素自体にSEO効果があまりないため、数少ないSEO効果のある要素となっています。

<title>ページタイトル</title>

見出し(h要素)

見出しもかつてはSEO効果の高い要素でしたが、現在ではその効果はあまりないと言われています。
「h」の次の部分には「1~6」の数字を入れますが、両サイドの数字は合わせて記述します。
HTML4までは「h1」は複数使用できませんでしたが、HTML5からは複数使用が可能になったようです。
なお、h要素を利用すると文字サイズが大きくなりますが、CSSで整形すると通常の文字サイズで利用できます。

<h1~6>見出し</h1~6>

画像のオプション要素(alt要素、title要素)

画像にテキスト要素を付加するコードで、それぞれのコードには以下のような特性があります。
altは画像の代わりに表示される代替テキストで、titleはカーソルを画像に移動した際に表示されるポップアップテキストです。
なお、W3Cでは画像を使用する場合はalt属性が必須なので、何も表示しない場合でも「alt=""」のように空で作成しないと減点になります。

  1. 役割:alt(代替テキスト)、title(ポップアップテキスト)
  2. 検索:alt(ヒットする)、title(ヒットしない)
  3. 条件:alt(画像利用時は必須)、title(画像利用時でも必須ではない)

<img src="画像ファイルのパス" alt="画像のタイトル" title="画像のタイトル">

META要素について

従来ではMETA要素が重要視されており、SEOの効果もありましたが、現在では大手サイトをはじめいくつものサイトが廃止しています。
その理由は主要な検索エンジンがMETA要素を重視しておらず、効果がほとんど無いためです。
ただし、SNS対策としてのOGPでは現在でも活用されているようです。

Open Graph Protocol

Open Graph Protocol(OGP)はSNS上でシェアされた時に、Webページの情報を効率的に伝えるための記述です。
以下のコードはHTML5用ですが、「?」の部分はサイトのタイプに合わせて文字を選択してください。
記述位置は最初の一行をheadタグ内に記述し、META要素はヘッダ内に記述すれば良いようです。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# : http://ogp.me/ns/#">

<meta property="og:title" content="タイトル">
<meta property="og:type" content="">
<meta property="og:url" content="URL">
<meta property="og:image" content="画像ファイル">
<meta property="og:site_name" content="サイト名">
<meta property="og:description" content="サイト概要">

  1. ウェブサイト:website
  2. ブログ(トップページ):blog
  3. ブログ(記事ページ):article
オンラインPC館
トップページテクニックインターネット → HTMLテクニック