headタグの書き方って難しいよね。。。
分かりやすく教えるよ！では見てみよう♪
HTMLのheadタグCODE（コピペ用）
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="robots" content="noindex,nofollow" />
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<!-- meta情報 -->
<title>タイトル</title>
<meta name="description" content="説明" />
<meta name="keywords" content="" />
<!-- ogp -->
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="アドレス" />
<meta property="og:image" content="ogの画像" />
<meta property="og:site_name" content="タイトル" />
<meta property="og:description" content="説明" />
<meta name="twitter:card" content="summary" />
<!-- ファビコン -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- アップルタッチアイコン -->
<link rel="apple-touch-icon" href="apple-touch-icon.png" />
<!-- Google Fonts -->
<!-- Google Fontsはご自身コードを入れてください。 -->
<!-- FontAwesome -->
<!-- FontAwesomeはご自身コードを入れてください。 -->
<!-- css -->
<!-- scssはご自身コードを入れてください。 -->
<link rel="stylesheet" href="/css/style.css" />
<!-- JavaScript -->
<!-- jqueryやスライダーなどはご自身コードを入れてください。 -->
<script src="/js/script.js" defer></script>
</head>
<body>
<header>
<h1>ウェブサイトのタイトル</h1>
<nav>
<ul>
<li><a href="index.html">ホーム</a></li>
<li><a href="about.html">私たちについて</a></li>
<li><a href="services.html">サービス</a></li>
<li><a href="contact.html">お問い合わせ</a></li>
</ul>
</nav>
</header>
<!-- ページのメインコンテンツ -->
<main>
<!-- コンテンツ -->
</main>
<!-- ページのフッター -->
<footer>
<!-- フッター情報 -->
</footer>
</body>
</html>head内に記述する最小限の構成
meta charset: Webページの文字セットを定義。utf-8が標準meta name="viewport": スマホに最適化されたビューポートを設定device-width: このキーワードは100vwで、ビューポート幅の100%に設定 (スマホに最適！)initial-scale=1: ページをロードしたときの表示倍率、1はズームなしを意味します
head内の要素
Validな<head>要素には、meta, link, title, style, script, noscript, baseがあります
これらの要素はWebテクノロジー（ブラウザ・検索エンジン、ロボットなど）によってドキュメントがどのように認識され、どのようにレンダリングされるかについての情報を提供します
HTMLタグの解説
DOCTYPE宣言
<!DOCTYPE html>これはHTMLタグではなくDOCTYPE宣言というものになります
文書がHTML5で作成されたものであることを宣言するために書くものとされていますが、現在HTML5は廃止され『HTML Living Standard』になっています
HTML Living Standardとは、Apple・Mozilla・Operaの開発者によって設立されたWHATWGという組織が策定するHTMLの仕様のことです
例えば、これまではW3Cという組織が策定したHTML5やHTML5.1、HTML5.2がHTMLの標準仕様でした
このHTMLの標準仕様をW3Cでなく、WHATWGという組織が取り決めることになりました
この組織が取り決めるHTMLの標準仕様が、HTML Living Standardというわけなので、これまで通り1行目にはこれを書いておきましょう
htmlタグ
<html lang="ja">
--- 中略 ---
</html>これはHTML文書の基点であることを示すタグで、他のHTMLタグ（headタグやbodyタグ）は全てhtmlタグの中に入れます
lang="ja"はlang属性というもので、ページがどのような言語で書かれているかを表して、日本語の場合はlang="ja"で、英語の場合はlang="en"などになります
これは翻訳ツールや読み上げソフトなどで使われる事があるものなので、ちゃんと設定しておきましょう
headタグ
<head>
<meta charset="UTF-8" />
--- 中略 ---
<!-- JavaScript -->
<!-- jqueryやスライダーなどはご自身コードを入れてください。 -->
<script src="/js/script.js" defer></script>
</head>headはページが読み込まれてもウェブブラウザーには表示されない部分です
この部分には、例えば、 title といった情報や CSS へのリンク（HTML を CSS で修飾する場合）、独自のファビコンへのリンク、そしてほかのメタデータ（HTML を誰が書いたのかとかその HTML を表現する重要なキーワードなど）の情報を含んでいます
HTML 文書を正しく描画するために使用します
<head>と<header>を間違える人もいるのでご注意下さい（全く別物です!!!）
metaタグ
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<meta name="format-detection" content="telephone=no" />
<!-- meta情報 -->
<title>タイトル</title>
<meta name="description" content="説明" />
<meta name="keywords" content="キーワード" />メタタグは、Webページの品質や評価に関わる重要な要素です
検索エンジンやブラウザなどにWebページの情報を伝える役割を果たし、SEO対策やレスポンシブデザインなどにも影響を与えます
charset種類
- UTF-8
- Shift_JIS
- EUC-JP
などありますが、特に理由がなければ『UTF-8』で大丈夫です
viewport
『width=device-width』は表示領域の幅をPCやスマホなどの端末画面の幅に合わせるという意味で、『initial-scale=1』は初期のズーム倍率を表します
これはGoogleが推奨している書き方なので、これも特に理由がなければこのまま書きます
format-detection
これはHTML内の電話番号を自動でリンク設定にしないようにするタグです。
content=”address=no,email=no”でメールのリンクも無効化できます
titleタグ
これはそのままですがページのタイトルになります
description
検索した時に表示されるページの説明文になります
keywords
現在、meta keywordsは重要視されていません
OGPタグ
<!-- ogp -->
<meta property="og:title" content="タイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="アドレス" />
<meta property="og:image" content="ogの画像" />
<meta property="og:site_name" content="タイトル" />
<meta property="og:description" content="説明" />
<meta name="twitter:card" content="summary" />title
ページのタイトルを設定します
一般的にはサイトの〜と同じ内容を設定しますが、サイト名などのブランド情報を含まないtitleを20文字以内で設定することが好ましいとされています
type
ページのタイプを設定します
このタイプを設定することにより、SNS上での表示形式が変わってきます
トップページなら『website』、トップページ以外なら『article』になります
url
ページのURLを設定します
URLは絶対パスで記述をします
image
SNSなどでシェアされた時に表示されるサムネイルを設定します
サイズは最低でも600 × 315px以上、推奨サイズは1200 × 630px以上、比率で「1.91：1」となりますcontentには画像の絶対パスを記述をします
site_name
ページのサイト名を記述します
サイト名やブランド情報は「og:title」ではなく、この「og:site_neme」に設定します
og:titleはページタイトルでしたが、これはサイト名なので全ページ共通でOKです
description
ページの概要（説明文）を設定します
文字数は80〜90文字程度が推奨です
ファビコン
<!-- ファビコン -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />ファビコンとはブラウザのタブなどに表示されるアイコンになります
アップルタッチアイコン
<link rel="apple-touch-icon" href="apple-touch-icon.png" />Google Fonts FontAwesome
<!-- Google Fonts -->
<!-- Google Fontsはご自身コードを入れてください。 -->
<!-- FontAwesome -->
<!-- FontAwesomeはご自身コードを入れてください。 -->ご使用によりご自由に入れてください
CSS
<!-- css -->
<!-- scssはご自身コードを入れてください。 -->
<link rel="stylesheet" href="/css/style.css" />CSSファイルの読み込みです
上記は『index.html』と同じ階層にcssフォルダあり、その中に『style.css』がある場合になります
SCSSが必要な場合もご自由にですが。。。CSSより上にご記入ください
JavaScript
<!-- JavaScript -->
<!-- jqueryやスライダーなどはご自身コードを入れてください。 -->
<script src="/js/script.js" defer></script>JavaScriptファイルの読み込みです
普通ですと</body>の前に記入する場合もありますが。。。deferを入れることによりheadに入れることができます
jqueryやスライダーやGSAPなど入れる場合はSCSS同様、オリジナルJavaScriptの上に記入してください
きちんと書けそうな気がしてきた♪
これからも色々教えるよ！