<head>とは、そもそも何でどんな時に使うのか？詳しくお話していきます。
- <head>～</head>は見えない情報を設定する場所
- <head>～</head>内に記述する内容
- <meta charset = “UTF-8″>
- <title>～</title>
- <meta name = “description” content=””>
- <meta name = “viewport” content = “width=device-width , initial-scale=1.0”
- <meta name = “robots” content =”index , follow”>
- <meta property = “og:title” content = “”>
- <link rel = “stylesheet” href = “style.css”>
- <script src= “main.js”></script>
- metaってなに？
<head>～</head>は見えない情報を設定する場所
<head>～</head>は、ホームページ上は見えないけど必要な情報を設定する場所です。
ブラウザやGoogleなどの検索エンジンに「このページってこんな設定があるよ！」と教えてあげることが出来ます。
もしも<head>～</head>を設定しない場合、
・文字化け
・検索結果のタイトルが無題
・検索エンジンに正しく評価されない
・スマホの表示が崩れる
などのデメリットが発生します。
<head>～</head>内に記述する内容
<head>～</head>内によく記述するコードを詳しく解説していきます。
<meta charset = “UTF-8″>
文字コードを “UTF-8” に指定する意味があります。
※ UTF-8・・世界で最も広く使われている文字コード。日本語にも対応している。
指定しない場合は文字化けをおこしてしまいます。
<title>～</title>
Googleなどの検索結果やユーザーがブックマークする際に表示されるタイトルです。
本文中のタイトルではないので、混雑しないようにしてください。
検索エンジン・ユーザーが「こんなサイトなんだ！」と分かってもらえる大事な情報。
<meta name = “description” content=””>
Googleなどの検索結果に表示される説明分です。タイトルの下に表示されます。
descriptionは、「説明」という意味があります。
例えば、contentに”ひょーちゃんがWEBデザインの学びを日々発信しているブログです”など記載することが出来ます。
本文中の説明分ではないので、混雑しないようにしてください。
検索エンジン・ユーザーが「こんなサイトなんだ！」と分かってもらえる大事な情報。
<meta name = “viewport” content = “width=device-width , initial-scale=1.0”
表示する画面をレスポンシブ対応（PCやスマホ、タブレットなど、環境に合わせて最適な表示に調整してくれる）する際に必要です。
記述するコードが長いので、それぞれに分けて説明します。
“viewport”
ユーザーが実際に端末で見ている画面の表示領域を表しています。
“width=device-width”
ページを表示した際に、画面の横幅をぴったりと収まるように表示してくれます。
“initial-scale=1.0”
ページを表示した際に、ズームしない状態にしてくれます。
※1.0・・拡大率1倍（100％）
<meta name = “robots” content =”index , follow”>
Googleに「このページを登録してもいいよ！」と伝えることが出来ます。
ページの検索結果に関わります。
記述するコードが長いので、それぞれに分けて説明します。
“robots”
この内容は検索エンジンのロボット（クローラー）向けの指示と伝えることが出来ます。
“index , follow”
indexは「登録してもOKだよ！」という意味です。
followは「他のページもクロール（巡回・収集）してもOKだよ！」という意味です。
<meta property = “og:title” content = “”>
TwitterやFacebookなどのSNSでシャアされた際に、表示内容を設定することが出来ます。
見た目が良くなり、クリックしてもらいやすくなります。
propertyとは情報の種類を指定する際に使います。
今回は、 “og:title”（SNSで表示するタイトル）の情報を指定しています。
contentには、”ひょーちゃんがWEBデザインの学びを日々発信しているブログです”など記載することが出来ます。
<link rel = “stylesheet” href = “style.css”>
見た目などを変化させることが出来るCSSを読み込む際に使用します。
rel = “stylesheet”
relとは「このリンクは何のためのファイルなのか？」関係性を伝えることが出来ます。
なので、このリンクはstylesheet（CSS）と指定しますと伝えています。
href = “style.css”
hrefとは「どのファイルを読み込みこむのか？」場所やURLを伝えることが出来ます。
なので、読み込むデータの場所（style.css）を指定しますと伝えています。
※ この場合は、同じフォルダにあるstyle.cssファイルを読み込む
<script src= “main.js”></script>
動きなどを変化させることが出来るJavascriptを読み込む際に使用します。
src= “main.js”
srcとは「外部から読み込むスクリプトファイル」の場所を伝えています。
なので、読み込むデータの場所（main.js）を指定しますと伝えています。
※ この場合は、同じフォルダにあるmain.jsファイルを読み込む
metaってなに？
<head>～</head>内に記述するコードには、頻繁に「meta」が登場しました。
どんな意味があるのでしょうか？
metaとは、HTML文章に関する追加情報（設計図に書かれるメモ書きみたいなもの）です。
「このページはこんなページなんだよ！」
「このページはこんな設定があるんだよ！」
などなど、Google等の検索エンジンに伝えることが出来ます。
見た目上は分からないけど、ホームページでかなり重要な役割を持っています。
コメント