「HTML - headタグ」の版間の差分

📢 Webサイト閉鎖と移転のお知らせ

このWebサイトは2026年9月に閉鎖いたします。

移転先はhttps://mochiu.net/index.php?title=HTML - headタグです。

新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

← 古い編集

ビジュアルウィキテキスト

@@ 1行目: / 1行目: @@
 == 概要 ==
+headタグは、HTMLドキュメントのメタデータを含む重要なセクションである。<br>
+このタグはbodyタグとは異なり、ページ上には直接表示されない情報を格納する。<br>
+<br>
+headタグの主な役割を以下に示す。<br>
+<br>
+* 文書のタイトル定義
+*: Webブラウザのタブやブックマークに表示される文字列を指定する。
+* 文字エンコーディング指定
+*: これにより文字化けを防いで、正しい文字表示を実現する。
+* 外部リソースの読み込み
+*: スタイルシートやJavaScriptファイルなどの外部リソースを読み込むための記述を行う。
+* 検索エンジン向けの情報提供
+* ビューポート設定
+*: 特に、モバイル端末での表示を制御するための重要な設定である。
+<br>
+重要な点としては、headタグ内の記述順序にも一定の推奨がある。<br>
+通常、文字エンコーディング指定を最初に行い、次に、タイトル、メタ情報、スタイルシート、スクリプトの順で記述することが一般的である。<br>
+<br>
+ただし、パフォーマンスの観点から、JavaScriptの読み込みは特別な理由がない限り、body終了タグの直前に配置することが推奨されている。<br>
+これにより、ページの読み込み速度を向上させることができる。<br>
+<br>
+これらの要素を適切に組み合わせることにより、Webページの基本的な設定や挙動を制御することが可能である。<br>
+<br><br>
+== ブラウザのタブに表示されるタイトル (必須要素) ==
+SEOとユーザビリティの観点から必須である。<br>
+ <syntaxhighlight lang="html">
+ <title>ページタイトル</title>
+ </syntaxhighlight>
+<br><br>
+== 相対URLのベースURLを指定 ==
+ <syntaxhighlight lang="html">
+ <base href="https://example.com/">
+ </syntaxhighlight>
+<br><br>
+== linkタグ ==
+他にも、<link>タグの属性には以下に示すものがある。<br>
+* media
+*: メディアクエリの指定
+* crossorigin
+*: クロスオリジンリソースの制御
+* integrity
+*: サブリソース完全性チェック
+<br>
+==== スタイルシートの読み込みと定義 ====
+CSSの読み込みに必要である。<br>
+ <syntaxhighlight lang="html">
+ <!-- 外部CSSの読み込み -->
+ <link rel="stylesheet" href="styles.css">
+ </syntaxhighlight>
+<br>
+ <syntaxhighlight lang="html">
+ <!-- 直接CSSを記述 -->
+ <style>
+  body { margin: 0; }
+ </style>
+ </syntaxhighlight>
+<br>
+==== リソースのリンク ====
+* ファビコンの指定
+ <syntaxhighlight lang="html">
+ <link rel="icon" href="favicon.ico">
+ </syntaxhighlight>
+<br>
+* iOS用アイコン
+ <syntaxhighlight lang="html">
+ <link rel="apple-touch-icon" href="icon.png">
+ </syntaxhighlight>
+<br>
+* PWAマニフェスト
+ <syntaxhighlight lang="html">
+ <link rel="manifest" href="manifest.json">
+ </syntaxhighlight>
+<br>
+* 正規URL
+ <syntaxhighlight lang="html">
+ <link rel="canonical" href="https://example.com/page">
+ </syntaxhighlight>
+<br>
+* RSSフィード
+ <syntaxhighlight lang="html">
+ <link rel="alternate" href="rss.xml" type="application/rss+xml">
+ </syntaxhighlight>
+<br>
+* 事前接続
+ <syntaxhighlight lang="html">
+ <link rel="preconnect" href="https://example.com">
+ </syntaxhighlight>
+<br>
+* リソースの事前読み込み
+ <syntaxhighlight lang="html">
+ <link rel="preload" href="font.woff2" as="font">
+ </syntaxhighlight>
+<br>
+* DNS事前解決
+ <syntaxhighlight lang="html">
+ <link rel="dns-prefetch" href="https://example.com">
+ </syntaxhighlight>
+<br><br>
+== script ==
+JavaScriptの読み込みと実行に必要である。<br>
+<br>
+他にも、<script>タグに指定できる属性を以下に示す。<br>
+* defer
+*: HTML解析後に実行
+* async
+*: 非同期読み込み
+* type="module"
+*: ESモジュールとして扱う。
+<br>
+ <syntaxhighlight lang="html">
+ <!-- 外部JavaScriptの読み込み -->
+ <script src="script.js"></script>
+ </syntaxhighlight>
+<br>
+ <syntaxhighlight lang="html">
+ <!-- 直接JavaScriptを記述 -->
+ <script>
+  console.log('Hello');
+ </script>
+ </syntaxhighlight>
+<br><br>
+== noscript ==
+ <syntaxhighlight lang="html">
+ <noscript>
+    <!-- JavaScriptが無効な場合に表示される内容 -->
+    このサイトはJavaScriptを有効にする必要があります。
+ </noscript>
+ </syntaxhighlight>
+<br><br>
+== metaタグ ==
 metaタグは、HTMLドキュメントに関するメタデータ (データについてのデータ) を定義するための要素である。<br>
 通常、head要素内に配置されて、ページの内容そのものは表示されないが、Webブラウザや検索エンジンに重要な情報を提供する。<br>
@@ 22行目: / 158行目: @@
 これらのmetaタグを適切に設定することにより、WebサイトのSEO対策、ソーシャルメディアでの表示制御、ブラウザの動作制御等、様々な目的を達成することができる。<br>
 <br>
-特にSEOやスマートフォン対応では、適切なmetaタグの設定が非常に重要となる。<br>
+特に、name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。<br>
-<br><br>
-== metaタグ ==
-name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。<br>
 これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br>
+<br>
+SEOやスマートフォン対応では、適切なmetaタグの設定が非常に重要となる。<br>
 <br>
 <u>※注意</u><br>
@@ 285行目: / 419行目: @@
 ==== SNS最適化 (OGP) 設定 ====
 metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br>
+<br>
+これらの設定は、Open Graph Protocol (OGP) と併用されることが多い。<br>
+Twitter Cardは、OGPの値もフォールバックとして使用する。<br>
+<br>
+設定後は、Twitter Card Validatorでプレビューを確認することができる。<br>
 <br>
 ===== twitter:card =====
@@ 305行目: / 444行目: @@
 ===== twitter:site =====
 Twitterアカウントを指定する。<br>
+アカウント名には、必ず<u>@</u>を付ける必要がある。<br>
   <syntaxhighlight lang="html">
-  <meta name="twitter:site" content="...">
+  <meta name="twitter:site" content="@YourSite">
   </syntaxhighlight>
 <br>
 ===== twitter:creator =====
-作成者のTwitterを指定する。<br>
+記事の著者のTwitterアカウントを指定する。<br>
+アカウント名には、必ず<u>@</u>を付ける必要がある。<br>
+ <syntaxhighlight lang="html">
+ <meta name="twitter:creator" content="@Author">
+ </syntaxhighlight>
+<br>
+===== twitter:title =====
+シェアされる時のタイトルを指定する。<br>
+文字以内が推奨される。<br>
+ <syntaxhighlight lang="html">
+ <meta name="twitter:title" content="タイトル">
+ </syntaxhighlight>
+<br>
+===== twitter:description =====
+シェアされる記事の説明を指定する。<br>
+ <syntaxhighlight lang="html">
+ <meta name="twitter:description" content="ページの説明">
+ </syntaxhighlight>
+<br>
+===== twitter:image =====
+Twitterページの画像を指定する。<br>
   <syntaxhighlight lang="html">
-  <meta name="twitter:creator" content="...">
+  <meta name="twitter:image" content="https://example.com/image.jpg">
   </syntaxhighlight>
 <br>