<!DOCTYPE html>
文書がhtml5で作成されたものであることを宣言している。
(Document Type Definition, DTD, 文書型宣言)
<html>
-
lang属性
<html lang="ja>"
html要素内で使われている言語は日本語です。という意味。
ひとつのタグ内を英語にしたい場合は<p lang="en">というように記述する。Googleはlang属性を無視して文章の解析によって使用言語を自動で判別していると発表したが、非推奨になったわけではない。
2010年時点ではlang属性を参照している翻訳ツールが存在していたので、古い環境を使っているユーザーを考慮するなら、消さずにそのままの方が良い。
参考：lang=jaは今後重要になる(と思っていた) | HTMLとSEOの事情 -
prefix属性
prefix="og: http://ogp.me/ns#"
これからOGPを使うことを宣言。
property属性の親要素に記述されていれば問題ないのでhtmlタグ、headタグどちらに書いても問題ない。
<title>
ここで設定した文言がGoogleの検索結果に表示されるページタイトルになる。
設定していないと正しくタイトルが表示されない。
<meta>
- charset属性
文書の文字エンコーディングを指定する。日本語の文字エンコーディングの値は"utf-8", "shift_jis", "euc-jp"などが挙げられる。
日本語で作成されたページに外国版のブラウザでアクセスした場合に文字化けが起きる場合があるのでできるだけ指定した方が良い。
<meta charset="utf-8">
- description
ここで設定した文章が検索結果ページの説明文として表示される。
設定しないと意図しない文章が表示されてしまう可能性がある。
<meta name="description" content="ページの説明">
- OGP
twitterやfacebookなどでシェアされた際に表示する形式や画像、文章などを設定できる。
<meta property="og:url" content="URL">
<meta property="og:title" content="タイトル">
<meta property="og:description" content="抜粋">
<meta property="og:image" content="画像のURL">
<meta property="og:type" content="タイプ">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP(ページの言語)">
<meta name="twitter:card" content="Twitterに表示するカードの種類">
<meta name="twitter:site" content="Twitterのユーザー名(@xxxx)">
ogで設定している項目はtwitterで省略可能。
- viewport
スマホなどのモバイル端末でページの表示方法をブラウザに指示するためのタグ。
<meta name="viewport" content="width=device-width,initial-scale=1">
よく使われている上記は閲覧している画面サイズに合わせてサイズを変更するという意味。
詳しくは こちら
- robot, googlebot
検索エンジンの動作をコントロールするためのタグ。
robotsは全てのブラウザ、googlebotはGoogleに対して有効である。
<meta name="robots" content="..., ...">
<meta name="googlebot" content="..., ...">
contentの中には以下の値を設定できる。
-
noindex...ページをインデックスに登録しない（検索結果に表示しない）
-
nofollow...クローラーがそのページのリンクを追跡しない
-
nosnippet...検索結果にテキストスニペットや動画プレビューを表示しない
-
noarchive...Googleでページのキャッシュリンクを表示しない
-
noimageindex...Googleの検索結果に表示される画像の参照元ページとしてページを表示しない
-
none...noindex + nofollowと同じ
-
all...index + followと同じ
指定しない場合は"index, follow"や"all"と同じ意味になる。 -
keywords
ページの中で重要なキーワードを記述するタグ。
現在はGoogleはmeta keywordsに書かれている情報を取得していないので必要ない。 -
<meta http-equiv="X-UA-Compatible" content="IE=edge">
IEのために書いておくのがベター。IEには過去のバージョンで表示させる「互換モード」という機能がある。これが厄介で、訪問者が互換モードをよく分からないまま使っていた場合に、ページのデザインが崩れてしまう可能性がある。このメタタグを使うことで、常に標準モードで表示させることができる。
<link>
href属性とrel属性が必須。
rel属性にはリンクタイプを指定する。（現在のファイルとリンク先のファイルとの関係性を表すキーワードを指定する。）
type属性...html文書以外の外部ファイルを指定する際に適切なMIMEタイプをすると、外部ファイルの種類が正しく認識されて誤作動が起きにくくなる。
HTML5ではデフォルトでtext/cssとtext/javascriptが暗黙指定されるため、type属性を指定する必要はない。
<script>
-
上記の通り、type="text/javascript"が暗黙指定されるので、JavaScriptの場合にはtype属性の指定を省略することができます。 スクリプト言語のタイプがtype="text/javascript"以外となる場合にはtype属性は必須です。
-
javascriptファイルを読み込んでいる間は、htmlファイルを読み込まない。なので、ページのレンダリングを行わせてからjavascriptファイルを読み込むことで表示速度を速くする。
-
CSSはheadタグ内に、javascriptはbodyタグの下にまとめて記述することでわかりやすくなる。
ただし、htmlが解析される前に実行されるべきjavascriptファイルなどはheadタグ内に記述するべき。
javascriptファイルのサイズが巨大だった場合、ページの表示に時間がかかることになる。その解決策として、async属性という非同期的にjavascriptファイルを読み込むことができるようになる属性を使う。
ただし、非同期的にjavascriptファイルを読み込むことは、ファイルが複数ある場合にどれが最初に読み込まれるか分からないということ。また、一部ブラウザがasync属性に対応していないらしい。