12,964
回編集
「HTML - headタグ」の版間の差分
ナビゲーションに移動
検索に移動
編集の要約なし
(→概要) |
編集の要約なし |
||
| 25行目: | 25行目: | ||
<br><br> | <br><br> | ||
== 文字エンコーディングの指定 == | == metaタグ == | ||
name属性の予約語は、HTML 5の仕様やブラウザベンダー、検索エンジン、SNSプラットフォーム等によって定義されている。<br> | |||
これらの予約語を適切に使用することにより、SEO、ソーシャルメディア共有、モバイル対応等、様々な最適化が可能になる。<br> | |||
<br> | |||
<u>※注意</u><br> | |||
<u>新しい予約語は随時追加される可能性がある。</u><br> | |||
<u>特に、SNSやモバイル関連の機能で新しい予約語が登場することがある。</u><br> | |||
<br> | |||
また、属性の値において、大文字・小文字は区別されない。<br> | |||
以下に示す記述は、全て同じように機能する。<br> | |||
* name="viewport" | |||
* name="Viewport" | |||
* name="VIEWPORT" | |||
<br> | |||
==== 文字エンコーディングの指定 ==== | |||
文字エンコーディングを指定する設定である。<br> | |||
UTF-8は、世界中のほぼ全ての文字 (日本語、英語、絵文字等) を扱えるUnicodeの実装方式である。<br> | |||
<br> | |||
この設定が無い場合、日本語等が文字化けする可能性があるため、head要素の最初に記述することが推奨されている。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta charset="UTF-8"> | <meta charset="UTF-8"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
==== Open Graph Protocol ==== | |||
== Open Graph Protocol == | Open Graph Protocol (OGP) の設定を指定する。<br> | ||
FacebookやTwitter等のSNSでページがシェアされた時に、どのように表示されるかを制御する。<br> | |||
<br> | |||
* og:title | |||
*: シェア時に表示される見出し | |||
* og:description | |||
*: シェア時に表示される説明文 | |||
* og:image | |||
*: シェア時に表示されるサムネイル画像 | |||
<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta property="og:title" content="ページのタイトル"> | <meta property="og:title" content="ページのタイトル"> | ||
| 38行目: | 64行目: | ||
<meta property="og:image" content="シェア時の画像URL"> | <meta property="og:image" content="シェア時の画像URL"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
==== ページの自動リフレッシュやリダイレクト ==== | |||
== ページの自動リフレッシュやリダイレクト == | 自動的なページリダイレクトを設定する。<br> | ||
<br> | |||
以下の例では、5秒後にhttps://example.comへ自動的にリダイレクト (移動) する。<br> | |||
数字の部分を変更することにより、リダイレクトまでの待機時間を調整できる。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta http-equiv="refresh" content="5;url=https://example.com"> | <meta http-equiv="refresh" content="5;url=https://example.com"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | |||
==== キャッシュの制御 ==== | |||
== キャッシュの制御 == | Webブラウザのキャッシュ動作を制御する設定である。<br> | ||
<br> | |||
主な設定値を以下に示す。<br> | |||
* no-cache | |||
*: キャッシュを使用前に必ずサーバに確認 | |||
* no-store | |||
*: キャッシュを一切保存しない。 | |||
* must-revalidate | |||
*: キャッシュ使用時に必ずサーバで検証する。 | |||
<br> | |||
特に、セキュリティが重要なページや頻繁に更新される動的なコンテンツを扱うページでは、適切なキャッシュ制御が重要になる。<br> | |||
<br> | |||
以下の例では、no-cacheを指定しており、ページを常に最新の状態で表示するよう指示している。<br> | |||
<syntaxhighlight lang="html"> | <syntaxhighlight lang="html"> | ||
<meta http-equiv="cache-control" content="no-cache"> | <meta http-equiv="cache-control" content="no-cache"> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
<br> | <br> | ||
==== 表示設定 ==== | ==== 表示設定 ==== | ||