HEADに入れるTAG

SEO対策（SEO measures）

作成したWEBページをたくさんの人達に見てもらう為にはSEO対策が大切です。
SEOとは「Search Engine Optimization」の略称で日本語にすると「検索エンジン最適化」といいます。
自分のWebサイトの内容を、Googleなどの検索エンジンに理解しやすいように最適化すること、自分が伝えたい情報をユーザーにきちんと届けられるように検索エンジンが理解しやすいように最適化することです。
SEO対策のページ


META TAG

メタタグとはWebページの情報を、検索エンジンやブラウザなどに伝えるタグのことです。HTMLのheadタグ内に書きます。
ブラウザからは見えない「システムのためのタグ」です。

head：<head>...</head>ではさまれた部分。訪問者に直接は見えないタグを入れる

body：<body>...</body>ではさまれた部分。訪問者に見える部分がここに書かれる

<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>


CSSをリンクさせる場合、CSSファイル一行目へ書いておく
@charset "utf-8";


headタグ内には主にmetaタグとlinkタグを入れる

metaタグと呼ばれるものをheadタグ内に書くことで、文字コードの指定や、ブラウザでの表示のさせ方、検索エンジンへのインデックス（掲載）有無の指定をします。

linkタグと呼ばれるものをhead内に書くことで、CSSファイルの読み込み指定をしたり、ページ同士の関係性を検索エンジンに伝えたりすることができます。


headタグ内に入れるもの一覧

文字のエンコード

important　文字コードを指定するためものです。

<meta charset="utf-8">


viewportの設定

important　スマホ・タブレット表示にも対応した「レスポンシブデザイン」のサイトを作るためには、viewport設定タグを書いておく必要があります。

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


タイトルタグ

important　titleタグ内で指定したテキストは、検索結果やブラウザのタブに表示されます。

<title>ページタイトル</title>


メタディスクリプション

ページの内容を表す文章を100字以下程度で書きます。このタグで指定した文章は、検索結果のタイトル下に表示されます。

<meta name="description" content="ページの説明文など" />


meta robots

検索エンジンに対して、このページをインデックス（掲載）しないでほしい時にだけ入れます。

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


URLの正規化（URL normalization）

こちらはSEO対策としても重要です。内容が重複するページが複数生まれてしまった場合にも「これが正規のURLだよ」と検索エンジンに示すことで、ページの評価を集中させることができます。

<link rel="canonical" href="正規化するURL" />


ブラウザタブのアイコン

png１つで作成する
アイコンを色々なブラウザに合わせて何個も作成するのが面倒な場合
48 x 48px のicon.pngを１つ作るだけでOK　（192 x 192px　でもOK ）

<link rel="icon" href="icon.png">

ファビコン(favicon)
ファビコンとは、Webブラウザでページを開いた際、タブ部分に表示されるアイコンを指します。
アップルタッチアイコンと併用

<link rel="icon" href="favicon.ico">
<link rel="icon" href="icon.png">

アップルタッチアイコン(apple-touch-icon)
iPhone や iPad の safari や、Android で Web サイトをホーム画面に追加した時に表示される
ファビコンアイコンと併用

<link rel="apple-touch-icon" href="icon.png">
<link rel="icon" href="favicon.ico">


デフォルトCSSをリセット

ブラウザによって見え方が違うのでリセットCSSを自作のCSSの上へ書く
リセットCSSの使い方は２つあります。
１．CSSファイルをダウンロードして使う方法

normalize.cssファイルを読み込む場合normalize.cssファイルDLしてファイルへ入れてリンクを作成
<link rel="stylesheet" href="normalize.css">

２．CDNを使う方法
ress.cssをリンクして読み込む場合
<link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">

destyle.css（CSSを1から書いていきたい場合）
<link rel="stylesheet" href="https://unpkg.com/destyle.css@1.0.5/destyle.css">


CSSやJavaScriptファイルの読み込み

外部のスタイルシート（CSS）やスクリプトを読み込むためのタグ

<link rel="stylesheet" href="CSSファイルのURL">
<script src="JavaScriptファイルのURL"></script>


Internet Explorer用の設定

IEには過去のバージョンで表示させる「互換モード」という機能があります。訪問者がこれを有効にしている場合に、古いIEと同じように表示され、デザインが崩れてしまう場合があります。
こちらのmetaタグを指定することで、常に標準モードで表示させることができます。

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