headの中身を確認してみよう（HTML）

はじめに

headタグの中身、なんとなくで使っているタグないですか？
今回はよく記載されているものを確認していきます。

headの中身を確認してみよう

文字のエンコード

		<meta charset="utf-8">
		

文字コードを指定します。文字化けの原因になるので必ず記載しましょう。

タイトル

		<title>たねっぱ！</title>
		

webサイト・ページのタイトルになります。ブラウザの検索結果や、ブラウザのタブにも表示されます。

ディスクリプションの設定

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

ディスクリプションに記入したテキストは、検索結果に出る文章としても使われます。（使われない場合もあります）

キーワードの設定

		<meta name="keywords" content="キーワード1,キーワード2,キーワード3">
		

サイトに関するキーワードを複数設定できますが、直接的なSEOの効果はありません。

ビューポートの設定

		<meta name="viewport" content="width=device-width, initial-scale=1">
		

スマホやレスポンシブ対応する場合は必須になります。

電話番号などの自動リンク無効化

		<meta name="format-detection" content="telephone=no">
		

ページ内の電話番号（およびその他の番号なども）自動的にリンクしてしまうので、それらを無効化します。

IE対策

		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		

これを入れることで、IE・エッジの最新バージョンで表示されます。互換モードで表示されている場合も、通常表示になります。

SNS対策・OGPの設定

    <!-- OGP -->
    <meta property="og:url" content="ページのURL">
    <meta property="og:type" content="ページの種類">
    <meta property="og:title" content="ページのタイトル">
    <meta property="og:description" content="ページの説明文">
    <meta property="og:image" content="画像のURL">
    <meta property="og:site_name" content="サイトの名前">
    <meta property="og:locale" content="ja_JP">

    <!-- Facebook -->
    <meta property="fb:app_id" content="アプリID">
    <meta property="article:publisher" content="FacebookページのURL" />

    <!-- Twitter -->
    <meta name="twitter:card" content="Twitterカードの種類" />
    <meta name="twitter:site" content="@ユーザー名" />
    <meta name="twitter:creator" content="@ユーザー名">
    <meta name="twitter:title" content="ページのタイトル">
    <meta name="twitter:description" content="ページの説明文">
    <meta name="twitter:image" content="画像のURL">

		

FacebookやTwittertなどでシェアされた時の設定になります。

補足ですが、og:type（ページの種類）は、website・blog・article・profileなどがあります。
twitter:card（カードの種類）は、summaryかsummary_large_imageがあります。

ファビコンの設定

    <!-- icoの場合 -->
    <link rel="icon" href="/favicon.ico">

    <!-- pngの場合 -->
    <link rel="icon" type="image/png" href="/favicon.png">

    <!-- gifの場合 -->
    <link rel="icon" type="image/gif" href="/favicon.gif">
    

CSSの読み込み

    <link rel="stylesheet" href="">
    

JavaScriptの読み込み

    <script src=""></script>
    

最後に

いかがでしたか？headには大事な情報が詰まっているので、しっかり設定していきたいですね(^^)♪