titleとhead

<title> ページのタイトル</title>
<head>
1. メタファイルの記述
2. Faviconの記述
3. 外部CSSの読み込み
4. WEBFontの読み込み
5. 外部JavaScriptの読み込み
6. Sitemapの読み込み
7. その他(製作者情報など)
</head>

など、データを効率的に管理したり検索したりするための情報(metaファイル)
を、読み込ませるために、記述します。(データーの目次のようなもの)
文字コードの表示:
<meta charset=”utf-8″>
<meta http-equiv=”Content-Type” content=”text/html;
charset=euc-jp” >

上記のいずれか、一つを記述

モバイル機器に対する表示スケール
<meta name=”viewport” content=”width=device-width,
initial-scale=1.0″>

検索に関する情報
<meta name=”description” content=”サイトの紹介”>
<meta name=”keywords” content=”キーワード”>

サイトのアドレス
<meta property=”url” content=”URL”>

画像ホルダーの場所
<meta property=”image” content=”URL/images/”&gt/

Sitemapの読み込み
<link rel=”alternate” type=”application/rss+xml” title=”Atom” href=”sitemap/atom.xml” >
<link rel=”alternate” type=”application/rss+xml” title=”ROR” href=”sitemap/sitemap.xml”>

Favicon
<meta name=”apple-mobile-web-app-title” content=”URL/favicons/favicon.ico”>
<meta name=”application-name” content=”http://URL/favicons/favicon.ico”>

Faviconの色
<meta name=”msapplication-TileColor” content=”#da532c”>
<meta name=”theme-color” content=”#ffffff”>

Favicon
<link href=”URL” rel=”stylesheet” type=”text/css” media=”all”>
<link rel=”apple-touch-icon” sizes=”57×57″ href=”favicons/apple-touch-icon-57×57.png”>
<link rel=”apple-touch-icon” sizes=”60×60″ href=”favicons/apple-touch-icon-60×60.png”>
<link rel=”apple-touch-icon” sizes=”72×72″ href=”favicons/apple-touch-icon-72×72.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”favicons/apple-touch-icon-76×76.png”>
<link rel=”icon” type=”image/png” href=”favicons/favicon-32×32.png” sizes=”32×32″>
<link rel=”icon” type=”image/png” href=”favicons/favicon-16×16.png” sizes=”16×16″>

Faviconのjsonファイルの読み込み
<link rel=”manifest” href=”favicons/manifest.json”>

<meta>情報の一部