metaタグに必須の項目

 HTML5になってから、head内の記述がシンプルになりました。

 冒頭で指定するDOCTYPEも、HTML5では、

<!DOCTYPE html>

のみでOKとなりました。

 今回は、metaタグに記述する内容をまとめてみました。

コンテンツの言語指定と文字コード設定

 HTML5以前のコンテンツの言語指定は、metaタグ内でhttp-equivでcontent-languageを指定していましたが、

<html lang="ja">

と<html>タグ内での指定でOKとなっています。

 文字コードの設定も以下のとおり簡略化されています。

<meta charset="UTF-8">
<meta charset="Shift_JIS">
<meta charset="euc-jp">
<meta charset="iso-2022-jp">

基本的に文字コードは、UTF-8を指定することが多いと思います。

http-equivの記述

 http-equiv content="text/html...の記述が不要となっています。

これまでは、

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

などの記述が必要でしたが、

<meta charset="UTF-8">

文字コード設定のとおり、のcharsetのみ指定でOK。

スタイルシートとjaveスクリプトの記述が必要でしたが、HTML5では不要に。

 必須だった以下の2行がHTML5では不要になりました。

<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">

スクリプトタグの記述も、

<script type="text/javascript"></script>

から、

<script></script>

でtype指定が不要になっています。

meta name="" で使用するのは、description、keyword、robotsのみ

 name で使用するのは、descriptionとkeywordとrobotsのみです。

 それ以外は記述しても検索結果への効果はありません。制作上必要ならば記載すればよろしいかと。

description

<meta name="description" content="">

 効果的な書き方は、126文字以内。63文字以内にキーワードを入れると尚良い。←スマホで表示されるのは約73文字(Google)、62文字(Yahoo)。パソコン表示は、120~127文字(Yahoo)、110~124文字(Google)。

 最近は、スマートフォンからのアクセスの方が多いので、検索結果を意識して書いた方が良さそうです。

keywords

<meta name="keywords" content="">

 最近はほとんど意識されていません。Googleもkeywordsは見ていないと明言しています。

 他の検索クローラは見ているかもしませんが。

robots

 時々使います。

<meta name="robots" content="noindex,nofollow">

 リンク集のページのインデックス、フォロー拒否で使ったりします。

記述しても特に意味のないもの。

author 著者

copyright 著作権表示(フッターなど見えるように記載するのがよろしいかと)

generator 使用したソフト

rating 対象年齢層 child,general,adult,safe for kids 

coverage 対象国 content="Japan"

classfication  カテゴリ general, business, computers, entertainment, internet, miscellaneous, personal

launguage 言語 指定済み

まとめ とりあえずこれだけ書いておけばOK

<!DOCTYPE html>
<html lang="ja>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="name content="">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="favicon.ico">
<title></title>
</head>

必要に応じて、scheme.orgの構造化データの記述を。