今アナタがご覧になっている、このオンズのウェブサイトでは読み込み速度のスピードアップや各種マークアップのクオリティ維持のために随時徹底した改善作業を行っています。
これまでも本ブログにて様々なテクニックを紹介してきましたが、今日は<head>〜</head>タグ内のコードにフォーカスして、弊社が実際に行っているHTMLマークアップの考え方を紹介していきます。
ブラウザで「要素を検証」して実際にコードを見てもらうのが手っ取り早いのですが、参考までに以下にコードをコピーして記載します。
今日（2016年1月20日）現在のオンズのウェブサイトの<head>〜</head>タグは次のように記載されています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="//on-ze.com"> <meta name="description" content="ホームページで「集客UP・売上UP・利益UP」の仕組みを作り、経営に関わるすべての問題をデザインのチカラで解決します。直感で「…！！」や「…？？」と感じたら、今すぐオンズにご相談ください。茨城県つくば市｜株式会社オンズ"> <meta name="format-detection" content="telephone=no,address=no,email=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel="publisher" href="//plus.google.com/00000000000"> <link rel="canonical" href="https://on-ze.com"> <link rel="icon" href="/icon/favicon.ico"> <link rel="apple-touch-icon" href="/icon/icon.png"> <link rel="alternate" type="application/rss+xml" href="https://on-ze.com/feed"> <link rel="stylesheet" href="/style.css"> <title>ONZE - オンズ</title> </head>
↑このコード「美しい」と感じませんか？
最低限度の記述でシンプル。コメントタグも一切ナシ。わずか20行で収まっています。
慎重に必要なタグを厳選して、不必要なタグは躊躇せずに削除。そしてタイトルにあるとおりタグを配置する順番にも気を遣いました。
試行錯誤の末に辿り着いたオンズ流のフォーマットで、現状ではコレが最善の設定というワケです。
当然、サイトのカテゴリーや運営スタイルなどによって必要になるタグは変わってきます。
よって、すべてのウェブサイトで真似をするようにはオススメできません。
しかし「必要なタグ」と「不必要なタグ」とを見極める良い参考材料になると思います。
目次
- <head>〜</head> タグ内のコードを解説
- <!DOCTYPE html>
- <html lang="ja">
- <meta charset="UTF-8">
- <meta name="author" content="//on-ze.com">
- <meta name="description" content="...">
- <meta name="format-detection" content="telephone=no,address=no,email=no">
- <meta name="viewport" content="width=device-width,initial-scale=1.0">
- <link rel="publisher" href="//plus.google.com/00000000000">
- <link rel="canonical" href="https://on-ze.com">
- <link rel="icon" href="/icon/favicon.ico">
- <link rel="apple-touch-icon" href="/icon/icon.png">
- <link rel="alternate" type="application/rss+xml" href="https://on-ze.com/feed">
- <link rel="stylesheet" href="/style.css">
- <title>ONZE - オンズ</title>
- スクリプトタグはHTMLの最下部へ
- トップページ以外では？
- <meta name="keywords">は……？
- まとめ
<head>〜</head> タグ内のコードを解説
以下、それぞれのコードを1行づつ解説していきます
<!DOCTYPE html>
まずは基本。HTML5でマークアップするための「DOCTYPE宣言」です。
大文字と小文字は区別されないので <!doctype html> などと記述してもOKです。
旧バージョンのHTML4.01では次のように記述する必要がありましたから、ずいぶんシンプルになりましたね。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
なおHTML文書では必ず最初に「DOCTYPE宣言」を記述する必要があります。
<html lang="ja">
lang属性で『"ja"』を指定することで「このHTML文書は日本語で書かれていますよ」という意味を与えています。
WordPressではテンプレートタグの「language_attributes();」を使うことで自動で出力されます。
<html <?php language_attributes(); ?>>
<meta charset="UTF-8">
続いては文字エンコーディングの指定です。
日本語の文字コードの値としては「UTF-8」の他に「SHIFT_JIS」と「EUC-JP」を使う機会が多いでしょう。こちらも大文字と小文字の違いは区別されません。
文字エンコーディングを指定しないと、英語版のブラウザで日本語で作成されたウェブページにアクセスした場合などに文字化けが起きる可能性があります。ほぼ必須のタグなので忘れずに指定しましょう。
Appleのウェブサイトで<meta name="Author" content="Apple Inc." />との記述があったので真似しました。
唯一このタグだけが完全に自己満足の領域です。→その後削除し、現在は記述していません。
SEO的には <meta name="author"> を記載しても効果は無いというのが一般的な意見です。
知人のプログラマーさんが「検索エンジンが著者情報（meta name="author"）を拾っているかも？」なんて仰っていましたが、こればかりは検証しようが無いですね。
追記（2017年12月）：その後の検証で、どうやらこのタグは無意味のようなので削除しました。
<meta name="description" content="...">
検索エンジンの検索結果にも引用される重要なタグで、キーワードを効果的に散りばめて記述すればそれだけでもSEO的な効果が期待できます。
ディスクリプションを記載していない場合は、検索エンジンはページの本文テキストや画像のalt属性から検索ワードに関する単語部分を抽出して検索結果に反映させます。
文字数は120文字以内に収めるのが良さそうです。
<meta name="format-detection" content="telephone=no,address=no,email=no">
各種スマートフォンやタブレット端末では、電話番号や住所またはメールアドレスだと推測される文字列があると自動でリンクが貼られます。
この機能を制御するのが「format-detection」タグです。
オンズのウェブサイトでは「telephone=no,address=no,email=no」として、すべての自動リンクを無効化しています。
<meta name="viewport" content="width=device-width,initial-scale=1.0">
各種ブラウザのウィンドウサイズにデザインを最適化させるための設定です。
ここでは「width=device-width」を指定しているのでviewportの幅は端末や各種ブラウザのウィンドウの横幅に依存します。
<link rel="publisher" href="//plus.google.com/00000000000">
「rel="publisher"」はウェブサイトとサイトの所有者・発行者と紐付ける機能で、具体的にはGoogle+のアカウントIDを指定して使います。
実はまだ公式にはGoogleによる発表がなく、テストとして試している段階です。
追記：Googleからの公式のアナウンスはありませんが、2014年以降頃から検索結果に反映されなくなったので廃止されたかもしれません。
オンズでも現在はこのタグを削除しています。
<link rel="canonical" href="https://on-ze.com">
ウェブサイトを運営するとき、不本意にも同一内容の複数のページが存在してしまうケースがあります。これは「重複コンテンツ」と呼ばれる問題で、よくある例としては「www」や「index.html」の有無による複数URLが挙げられます。
例えば以下のURLは、いずれも同じ内容が表示されます。
- http://example.com
- http://www.example.com
- http://example.com/index.html
- http://www.example.com/index.html
どのURLをクリックしても同じウェブページを閲覧できますが、GoogleやBingなどの検索エンジンからは、異なる4つのページが存在すると認識されてしまい、
SEOの観点では好ましくありません。
この問題を解決して、URLを正規化するのが「カノニカル」タグです。
必ず全ページで正しく出力されているかチェックしておきましょう。
<link rel="icon" href="/icon/favicon.ico">
ファビコンを指定するためのタグです。
<link rel="apple-touch-icon" href="/icon/icon.png">
こちらは iPhone や iPad などのiOS端末で、ウェブサイトを「ホーム画面に追加」したときに表示されるアイコンを指定します。
<link rel="alternate" type="application/rss+xml" href="https://on-ze.com/feed">
RSSフィードのURLです。
WordPressではテンプレートタグ <?php bloginfo('rss2_url'); ?> で出力可能です。
<link rel="stylesheet" href="/style.css">
読み込むスタイルシートの数が増えると、それだけウェブサイトの表示速度も遅くなっていきます。
特にWordPressでプラグインを多用する場合や、EC-CUBEの運用、その他Movable Type等のCMSや、各種フリーブログでは使用するスタイルシートが増加しがちです。表示速度の改善のために、なるべく1つにまとめましょう。
<title>ONZE - オンズ</title>
最後にタイトルです。これも極めて重要なタグですが、生成は WordPress 4.1 から導入された新機能 add_theme_support ('title-tag'); に任せて自動で出力させています。
スクリプトタグはHTMLの最下部へ
お気づきかと思いますが「script」タグは <head>〜</head> 内には記述していません。
これもウェブサイトの表示速度改善のためで、すべてのスクリプトはHTMLの最下部、閉じる</body>タグの末尾にまとめて記述しています。
トップページ以外では？
全ページで上記の書式のコードを記載しているワケではなく、ブログの各投稿記事では少し違ったフォーマットを使っています。
<head> <meta charset="UTF-8"> <meta name="author" content="著者情報"> <meta name="description" content="記事の概要"> <meta name="format-detection" content="telephone=no,address=no,email=no"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="twitter:card" content="summary"> <meta name="twitter:site" content="@twitter"> <meta property="twitter:account_id" content="00000000000"> <meta property="fb:admins" content="00000000000"> <meta property="fb:app_id" content="00000000000"> <meta property="article:publisher" content="http://www.facebook.com/00000000000"gt; <meta property="article:author" content="http://www.facebook.com/00000000000"gt; <meta property="og:description" content="記事の概要"> <meta property="og:title" content="記事タイトル"> <meta property="og:url" content="http://example.com"> <meta property="og:image" content="http://example.com/images/thumbnail.png"> <meta property="og:type" content="article"> <meta property="og:site_name" content="EXAMPLE"> <link rel="publisher" href="//plus.google.com/00000000000"> <link rel="icon" href="/icon/favicon.ico"> <link rel="apple-touch-icon" href="/icon/icon.png"> <link rel="alternate" type="application/rss+xml" href="http://example.com/feed"> <link rel="stylesheet" href="//example.com/style.css"> <title>記事タイトル</title> </head>
さすがにトップページと同じように短くするのは難しいですが、それでも余分なタグが一切ないシンプルなマークアップになっています。
追加された要素は以下。
- meta name="twitter:card"
- meta name="twitter:site"
- meta property="twitter:account_id"
- meta property="fb:admins"
- meta property="fb:app_id"
- meta property="article:publisher"
- meta property="article:author"
- meta property="og:description"
- meta property="og:title"
- meta property="og:url"
- meta property="og:image"
- meta property="og:type"
- meta property="og:site_name"
すべてTwitterとFacebookによる記事リンクの拡散を視野に入れたものです。
逆にブログの記事ページ以外では「SNSで拡散しなくてもよい」と潔く割り切っているため、上記コードは敢えて記載していません。
<meta name="keywords">は……？
メタタグで「keywords」を記述することはSEOの基礎。…と思っている方へ。
それ、今となってはガセネタですから！
当然 <meta name="keywords"> は記述していません。
詳しくは下記リンク先の記事をご覧ください。
まだキーワード設定で消耗してるの？ : https://on-ze.com/blog/2144
まとめ
<head>〜</head> 内で使われるタグは、主に「meta」「link」「title」「script」の4つ。
このうち、文字コードを指定する「meta charset」以外はどんな順番で書いても差し支えありません。
しかし、どうせなら最適なパフォーマンスを発揮できる順序で記述したいものです。
そこで重要なのがJavaScriptの扱い方。ウェブブラウザは、ソースを読み込んだ後に上から順番にコードを評価・解釈していきます。
スクリプトの実行中は次のタグの処理がストップしてしまうので、基本的には <head>〜</head> 内には「script」タグは記述しないようにしましょう。
また、少しでもHTTPリクエストを減らすために、CSSもJavaScriptもなるべく1つにまとめるようにします。
何度も指摘しますが <head>〜</head>内の各タグはSEO的にも極めて重要です。
細かな部分にもメスを入れて最善の解決策を模索してみてください。
ウェブサイトでお困りのときはオンズにお任せください！
