HTMLファイルを作成する際、ヘッダー部分に記述するコードをまとめました。
紹介するコードを、状況に応じて調整し利用してください。
コピペOK！よく利用するヘッダー要素のまとめ
htmlファイルを作成する際に記載すべき内容をまとめました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<meta name="description" content="">
<link rel="icon" href="">
<link rel="apple-touch-icon-precomposed" href="">
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:image" content="">
<meta name="twitter:card" content="">
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="">
<meta name="twitter:image:src" content="">
<link rel="stylesheet" type="text/css" href="">
<script>
</script>
</head>記載内容をグルーピングして解説していきます。
必ず書くお作法として書く記述（厳密にはヘッダー外）
<!DOCTYPE html>文章型宣言-HTML５で書かれたドキュメントであることを表します。
<html lang="ja">要素内で使用されている言語を示します。Ja=日本語。
必ずヘッダーに記述
<meta charset="UTF-8">文字のコードを指定します。基本的にUTF-8でOKです。
<meta name="viewport" content="width=device-width, initial-scale=1.0">ビューポートの設定。レスポンシブサイトを作成する際に記述します。
検索エンジンにページの情報を伝える記述
<title></title>ページのタイトルを入力します。30文字前後で文字が省略されてしまうので、30文字前後で記載するようにしましょう。
<meta name="description" content="">ページの説明文を入力できます。Googleからランキング要因には影響しない。ということが明言されていますが、検索トラフィックの質と量の改善に役立つ可能性があります。SP50文字、PC120文字くらいが表示される目安です。
サイトアイコンに関わる記述
<link rel="icon" href="">ファビコンを設定します。ブックマーク時のアイコンやブラウザタブに表示されるアイコンに利用されます。
<link rel="apple-touch-icon-precomposed" href="">iPhoneのアイコンで利用します。実はアンドロイドのchromeブラウザで表示する際もこっそりこちらを参照しているので、ひとまずこの設定をしておけばOKです。
SNS用の記述（OGタグ関連）
<meta property="og:type" content="">
<meta property="og:title" content="">
<meta property="og:description" content="">
<meta property="og:url" content="">
<meta property="og:site_name" content="">
<meta property="og:image" content="">フェイスブック等のSNSでページや記事がシェアされた際、表示される情報を設定します。
上から順に、ページのタイプ、ページのタイトル、ページの説明文、ページのURL、サイト名、サムネイル画像を設定します。URLは必ず絶対パスで記入しましょう。
Twitter用には以下を記述しましょう。
<meta name="twitter:card" content="">
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="">
<meta name="twitter:image:src" content="">
上から順に、Twitterシェア時の表示方法の設定、ページのタイトル、ページの説明文、サムネイル画像が設定できます。
外部読み込みファイルの記述
<link rel="stylesheet" type="text/css" href="">
<script></script>CSSやJavascript、その他解析タグ等を設置します。必要に応じて読み込むファイルを設定してください。上に書いたものが先に読み込まれていきます。
まとめ
HTMLファイルを作成する際、ヘッダー部分に記述するコードをまとめました。HTMLを作る際の参考や、各構成要素の役割を確認したいときに利用してください。
