MochiuWiki : SUSE, EC, PCB

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

📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）

ビジュアルウィキテキスト
ページの作成:「== 概要 == <br><br> == metaタグ == 大文字・小文字は区別されない。<br> これらは全て同じように機能する。<br> * name="viewport" * name="Viewport" * name="VIEWPORT" <br> ==== 予約語 ==== metaタグのname要素で使用される予約語を、以下に示す。<br> <br> ===== viewport ===== モバイルデバイスにおいて、Webページの表示方法を制御する重要な設定を行う。<br> これは、モバイルブラ…」
 
 
(同じ利用者による、間の7版が非表示)
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>
<br><br>


== metaタグ ==
== metaタグ ==
大文字・小文字は区別されない。<br>
metaタグは、HTMLドキュメントに関するメタデータ (データについてのデータ) を定義するための要素である。<br>
これらは全て同じように機能する。<br>
通常、head要素内に配置されて、ページの内容そのものは表示されないが、Webブラウザや検索エンジンに重要な情報を提供する。<br>
<br>
基本的な書式を以下に示す。<br>
<syntaxhighlight lang="html">
<meta name="キー名" content="値">
<meta http-equiv="キー名" content="値">
<meta property="キー名" content="値">
</syntaxhighlight>
<br>
主な用途として、文字エンコーディングの指定がある。<br>
<syntaxhighlight lang="html">
<meta charset="UTF-8">
</syntaxhighlight>
<br>
また、ページの自動リフレッシュやリダイレクトにも使用できる。<br>
<syntaxhighlight lang="html">
<meta http-equiv="refresh" content="5;url=https://example.com">
</syntaxhighlight>
<br>
これらのmetaタグを適切に設定することにより、WebサイトのSEO対策、ソーシャルメディアでの表示制御、ブラウザの動作制御等、様々な目的を達成することができる。<br>
<br>
特に、name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。<br>
これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br>
<br>
SEOやスマートフォン対応では、適切なmetaタグの設定が非常に重要となる。<br>
<br>
<u>※注意</u><br>
<u>新しい予約語は随時追加される可能性がある。</u><br>
<u>特に、SNSやモバイル関連の機能で新しい予約語が登場することがある。</u><br>
<br>
また、属性の値において、大文字・小文字は区別されない。<br>
以下に示す記述は、全て同じように機能する。<br>
* name="viewport"
* name="viewport"
* name="Viewport"
* name="Viewport"
* name="VIEWPORT"
* name="VIEWPORT"
<br>
<br>
==== 予約語 ====
==== 文字エンコーディングの指定 ====
metaタグのname要素で使用される予約語を、以下に示す。<br>
文字エンコーディングを指定する設定である。<br>
UTF-8は、世界中のほぼ全ての文字 (日本語、英語、絵文字等) を扱えるUnicodeの実装方式である。<br>
<br>
この設定が無い場合、日本語等が文字化けする可能性があるため、head要素の最初に記述することが推奨されている。<br>
<syntaxhighlight lang="html">
<meta charset="UTF-8">
</syntaxhighlight>
<br>
==== Open Graph Protocol ====
Open Graph Protocol (OGP) の設定を指定する。<br>
FacebookやTwitter等のSNSでページがシェアされた時に、どのように表示されるかを制御する。<br>
<br>
* og:title
*: シェア時に表示される見出し
* og:description
*: シェア時に表示される説明文
* og:image
*: シェア時に表示されるサムネイル画像
<br>
<syntaxhighlight lang="html">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明">
<meta property="og:image" content="シェア時の画像URL">
</syntaxhighlight>
<br>
==== ページの自動リフレッシュやリダイレクト ====
自動的なページリダイレクトを設定する。<br>
<br>
以下の例では、5秒後にhttps://example.comへ自動的にリダイレクト (移動) する。<br>
数字の部分を変更することにより、リダイレクトまでの待機時間を調整できる。<br>
<syntaxhighlight lang="html">
<meta http-equiv="refresh" content="5;url=https://example.com">
</syntaxhighlight>
<br>
==== キャッシュの制御 ====
Webブラウザのキャッシュ動作を制御する設定である。<br>
<br>
主な設定値を以下に示す。<br>
* no-cache
*: キャッシュを使用前に必ずサーバに確認
* no-store
*: キャッシュを一切保存しない。
* must-revalidate
*: キャッシュ使用時に必ずサーバで検証する。
<br>
特に、セキュリティが重要なページや頻繁に更新される動的なコンテンツを扱うページでは、適切なキャッシュ制御が重要になる。<br>
<br>
以下の例では、no-cacheを指定しており、ページを常に最新の状態で表示するよう指示している。<br>
<syntaxhighlight lang="html">
<meta http-equiv="cache-control" content="no-cache">
</syntaxhighlight>
<br>
==== 表示設定 ====
metaタグのname属性で使用される表示設定の予約語を、以下に示す。<br>
<br>
<br>
===== viewport =====
===== viewport =====
49行目: 266行目:
<u>ただし、アクセシビリティの観点から、ユーザのズーム操作を制限する設定 (maximum-scaleやuser-scalable=no) は推奨されない。</u><br>
<u>ただし、アクセシビリティの観点から、ユーザのズーム操作を制限する設定 (maximum-scaleやuser-scalable=no) は推奨されない。</u><br>
<u>これは、視覚に障害のあるユーザが必要に応じて拡大できるようにすることが望ましいとされているからである。</u><br>
<u>これは、視覚に障害のあるユーザが必要に応じて拡大できるようにすることが望ましいとされているからである。</u><br>
<br>
===== format-detection =====
電話番号・メールなどの自動リンク設定を指定する。<br>
<syntaxhighlight lang="html">
<meta name="format-detection" content="...">
</syntaxhighlight>
<br>
===== handheldfriendly =====
古い携帯端末向け設定を指定する。<br>
<syntaxhighlight lang="html">
<meta name="handheldfriendly" content="...">
</syntaxhighlight>
<br>
===== mobileoptimized =====
Windows Phone向け設定を指定する。<br>
<syntaxhighlight lang="html">
<meta name="mobileoptimized" content="...">
</syntaxhighlight>
<br>
==== 基本情報 ====
metaタグのname属性で使用される基本情報の予約語を、以下に示す。<br>
<br>
<br>
===== description =====
===== description =====
58行目: 296行目:
===== keywords =====
===== keywords =====
キーワードを指定する。<br>
キーワードを指定する。<br>
ただし、検索エンジンでの重要性は低下している。<br>
  <syntaxhighlight lang="html">
  <syntaxhighlight lang="html">
  <meta name="keywords" content="...">
  <meta name="keywords" content="...">
67行目: 306行目:
  <meta name="author" content="...">
  <meta name="author" content="...">
  </syntaxhighlight>
  </syntaxhighlight>
<br>
===== copyright =====
著作権情報を指定する。<br>
<syntaxhighlight lang="html">
<meta name="copyright" content="...">
</syntaxhighlight>
<br>
===== application-name =====
Webアプリケーション名を指定する。<br>
<syntaxhighlight lang="html">
<meta name="application-name" content="...">
</syntaxhighlight>
<br>
===== generator =====
作成に使用したツールを指定する。<br>
<syntaxhighlight lang="html">
<meta name="generator" content="...">
</syntaxhighlight>
<br>
===== theme-color =====
テーマカラーを指定する。<br>
<syntaxhighlight lang="html">
<meta name="theme-color" content="#4285f4">
</syntaxhighlight>
<br>
==== 検索エンジン向け設定 ====
metaタグのname属性で使用される検索エンジン向け設定の予約語を、以下に示す。<br>
<br>
<br>
===== robots =====
===== robots =====
検索エンジンへの指示を指定する。<br>
全ての検索エンジンへの指示を指定する。<br>
robotsが取れる値は、index、follow、noindex、nofollow等である。<br>
  <syntaxhighlight lang="html">
  <syntaxhighlight lang="html">
  <meta name="robots" content="...">
  <meta name="robots" content="...">
  </syntaxhighlight>
  </syntaxhighlight>
<br>
<br>
===== msnbot =====
Bing専用の指示を指定する。<br>
<syntaxhighlight lang="html">
<meta name="msnbot" content="...">
</syntaxhighlight>
<br>
===== google =====
Google向けの追加設定を指定する。<br>
<syntaxhighlight lang="html">
<meta name="google" content="...">
</syntaxhighlight>
<br>
===== googlebot =====
Google専用の指示を指定する。<br>
<syntaxhighlight lang="html">
<meta name="googlebot" content="...">
</syntaxhighlight>
<br>
===== google-site-verification =====
Googleの所有者確認を指定する。<br>
<syntaxhighlight lang="html">
<meta name="google-site-verification" content="...">
</syntaxhighlight>
<br>
===== slurp =====
Yahoo!専用の指示を指定する。<br>
<syntaxhighlight lang="html">
<meta name="slurp" content="...">
</syntaxhighlight>
<br>
==== セキュリティ関連 ====
metaタグのname属性で使用されるセキュリティ関連の予約語を、以下に示す。<br>
<br>
===== referrer =====
リファラポリシーの設定を指定する。<br>
<br>
referrerの主な設定値を以下に示す。<br>
* no-referrer
*: リファラ情報を一切送信しない。
* origin
*: オリジン (ドメイン) のみを送信する。
* same-origin
*: 同一オリジンの場合のみリファラを送信する。
* strict-origin
*: HTTPSからHTTPSへの遷移時のみオリジンを送信する。
<br>
<syntaxhighlight lang="html">
<meta name="referrer" content="...">
</syntaxhighlight>
<br>
===== csrf-token / csrf-param =====
CSRFトークンおよびCSRFパラメータを指定する。<br>
<br>
これは、フォーム送信時にこれらの値を含めることにより、CSRF攻撃を防ぐ。<br>
多くのWebフレームワーク (Rails、Laravel等) で自動的に設定される。<br>
<br>
* csrf-token
*: サーバが生成した一意のトークン値
* csrf-param
*: トークンのパラメータ名
<br>
<syntaxhighlight lang="html">
<meta name="csrf-token" content="...">
<meta name="csrf-param" content="...">
</syntaxhighlight>
<br>
※CSRF (Cross-Site Request Forgery) 攻撃とは<br>
CSRF攻撃とは、ログイン済みのユーザに悪意のあるリクエストを強制的に実行させる攻撃手法である。<br>
<br>
例:
1. ユーザが正規のサイトAにログイン済み
2. 攻撃者の罠サイトBにアクセス
3. サイトBが自動的にサイトAへ不正なリクエストを送信
4. ユーザの認証情報を使用して、意図しない処理 (送金、投稿等) が実行される
<br>
==== SNS最適化 (OGP) 設定 ====
metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br>
<br>
これらの設定は、Open Graph Protocol (OGP) と併用されることが多い。<br>
Twitter Cardは、OGPの値もフォールバックとして使用する。<br>
<br>
設定後は、Twitter Card Validatorでプレビューを確認することができる。<br>
<br>
===== twitter:card =====
Twitter Cardを指定する。<br>
<br>
twitter:cardの主な設定値を以下に示す。<br>
* summary
*: 通常のサマリーカード
* summary_large_image
*: 大きい画像付きサマリー
* app
*: アプリのカード
* player
*: 動画 / 音声プレーヤーのカード
<br>
<syntaxhighlight lang="html">
<meta name="twitter:card" content="...">
</syntaxhighlight>
<br>
===== twitter:site =====
Twitterアカウントを指定する。<br>
アカウント名には、必ず<u>@</u>を付ける必要がある。<br>
<syntaxhighlight lang="html">
<meta name="twitter:site" content="@YourSite">
</syntaxhighlight>
<br>
===== twitter:creator =====
記事の著者のTwitterアカウントを指定する。<br>
アカウント名には、必ず<u>@</u>を付ける必要がある。<br>
<syntaxhighlight lang="html">
<meta name="twitter:creator" content="@Author">
</syntaxhighlight>
<br>
===== twitter:title =====
シェアされる時のタイトルを指定する。<br>
40文字以内が推奨される。<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:image" content="https://example.com/image.jpg">
</syntaxhighlight>
<br>
==== カスタムメタ情報 ====
==== カスタムメタ情報 ====
カスタムメタ情報を設定する場合は、以下に示すような形式を使用する。<br>
カスタムメタ情報を設定する場合は、以下に示すような形式を使用する。<br>
「http://mochiuwiki.e2.valueserver.jp/index.php?title=HTML_-_headタグ」から取得