📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| (同じ利用者による、間の3版が非表示) | |||
| 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> | <br> | ||
* 正規URL | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <link rel="canonical" href="https://example.com/page"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
* RSSフィード | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <link rel="alternate" href="rss.xml" type="application/rss+xml"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
* 事前接続 | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <link rel="preconnect" href="https://example.com"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
* リソースの事前読み込み | |||
<syntaxhighlight lang="html"> | |||
<link rel="preload" href="font.woff2" as="font"> | |||
</syntaxhighlight> | |||
<br> | <br> | ||
* DNS事前解決 | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <link rel="dns-prefetch" href="https://example.com"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||
== | == script == | ||
JavaScriptの読み込みと実行に必要である。<br> | |||
<br> | |||
他にも、<script>タグに指定できる属性を以下に示す。<br> | |||
* defer | |||
*: HTML解析後に実行 | |||
* async | |||
*: 非同期読み込み | |||
* type="module" | |||
*: ESモジュールとして扱う。 | |||
<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <!-- 外部JavaScriptの読み込み --> | ||
< | <script src="script.js"></script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <!-- 直接JavaScriptを記述 --> | ||
<script> | |||
console.log('Hello'); | |||
</script> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||
== | == noscript == | ||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
< | <noscript> | ||
<!-- JavaScriptが無効な場合に表示される内容 --> | |||
このサイトはJavaScriptを有効にする必要があります。 | |||
</noscript> | |||
</syntaxhighlight> | </syntaxhighlight> | ||
<br><br> | <br><br> | ||
== metaタグ == | == metaタグ == | ||
metaタグは、HTMLドキュメントに関するメタデータ (データについてのデータ) を定義するための要素である。<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> | これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br> | ||
<br> | |||
SEOやスマートフォン対応では、適切なmetaタグの設定が非常に重要となる。<br> | |||
<br> | <br> | ||
<u>※注意</u><br> | <u>※注意</u><br> | ||
| 67行目: | 172行目: | ||
* name="Viewport" | * name="Viewport" | ||
* name="VIEWPORT" | * name="VIEWPORT" | ||
<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> | <br> | ||
==== 表示設定 ==== | ==== 表示設定 ==== | ||
| 261行目: | 419行目: | ||
==== SNS最適化 (OGP) 設定 ==== | ==== SNS最適化 (OGP) 設定 ==== | ||
metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br> | metaタグのname属性で使用されるSNSに関連する設定の予約語を、以下に示す。<br> | ||
<br> | |||
これらの設定は、Open Graph Protocol (OGP) と併用されることが多い。<br> | |||
Twitter Cardは、OGPの値もフォールバックとして使用する。<br> | |||
<br> | |||
設定後は、Twitter Card Validatorでプレビューを確認することができる。<br> | |||
<br> | <br> | ||
===== twitter:card ===== | ===== twitter:card ===== | ||
| 281行目: | 444行目: | ||
===== twitter:site ===== | ===== twitter:site ===== | ||
Twitterアカウントを指定する。<br> | Twitterアカウントを指定する。<br> | ||
アカウント名には、必ず<u>@</u>を付ける必要がある。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta name="twitter:site" content=" | <meta name="twitter:site" content="@YourSite"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
===== twitter:creator ===== | ===== 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"> | <syntaxhighlight lang="html"> | ||
<meta name="twitter: | <meta name="twitter:image" content="https://example.com/image.jpg"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||