HTML タグのメタ概要、HTML5 のヘッドメタ属性の概要

序文

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うでしょう。実際、メタタグをうまく活用できれば、予想外の結果がもたらされます。メタタグの機能には、検索エンジン最適化 (SEO)、ページで使用される言語の定義、新しいページの自動更新と参照、Web ページの変換時の動的効果の実現、ページバッファリングの制御、Web ページの評価と評価、Web ページが表示されるウィンドウの制御などがあります。

HTML メタサマリー

メタタグの構成: メタタグには、http-equiv 属性と name 属性の 2 つの属性があります。属性が異なるとパラメータ値が異なり、これらの異なるパラメータ値によって Web ページの機能が異なります。

<!DOCTYPE html> <!-- HTML5 doctype を使用します (大文字と小文字を区別しません) -->
<html lang="zh-cmn-Hans"> <!-- lang 属性を記述するより標準的な方法 http://zhi.hu/XyIa -->
<ヘッド>
    <!-- ドキュメントで使用される文字エンコーディングを宣言します -->
    <メタ文字セット='utf-8'>
    <!-- IE と Chrome の最新バージョンを優先します -->
    <meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"/>
    <!-- ページの説明 -->
    <meta name="description" content="150文字以内"/>
    <!-- ページキーワード-->
    <meta name="キーワード" content=""/>
    <!-- ページ作成者 -->
    <meta name="著者" content="名前、[email protected]"/>
    <!-- 検索エンジンクロール -->
    <meta name="ロボット" content="インデックス、フォロー"/>
    <!-- モバイルデバイス用のビューポートを追加 -->
    <meta name="ビューポート" content="初期スケール=1、最大スケール=3、最小スケール=1、ユーザースケーラブル=いいえ">
    <!-- `width=device-width` を指定すると、iPhone 5 のホーム画面に追加した後、WebApp のフルスクリーン モードでページを開くと黒い枠が表示されます upload/2022/web/apple-touch-icon-57x57-precomposed.png"/>
    <!-- iPhone および iTouch、デフォルト 57x57 ピクセル、必須 -->
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
    <!-- Retina iPhone および Retina iTouch、114x114 ピクセル、オプションですが推奨 -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
    <!-- Retina iPad、144x144 ピクセル、オプションですが推奨 -->
    <!-- iOS アイコン終了 -->
 
    <!-- iOS 起動画面開始 -->
    <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
    <!-- iPad 縦画面 768 x 1004 (標準解像度) -->
    <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
    <!-- iPad 縦画面 1536x2008 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
    <!-- iPad 横画面 1024x748 (標準解像度) -->
    <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
    <!-- iPad 横画面 2048x1496 (Retina) -->
 
    <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
    <!-- iPhone/iPod Touch 縦画面 320x480 (標準解像度) -->
    <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
    <!-- iPhone/iPod Touch 縦画面 640x960 (Retina) -->
    <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
    <!-- iPhone 5/iPod Touch 5 縦画面 640x1136 (Retina) -->
    <!-- iOS 起動画面終了 -->
 
    <!-- iOS デバイス終了 -->
    <meta name="msapplication-TileColor" content="#000"/>
    <!-- Windows 8 タイルの色 -->
    <meta name="msapplication-TileImage" content="icon.png"/>
    <!-- Windows 8 タイル アイコン-->
 
    <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
    <!-- RSS サブスクリプションを追加 -->
    <link rel="ショートカットアイコン" type="image/ico" href="/favicon.ico"/>
    <!-- ファビコンアイコンを追加 -->

    <!-- sns ソーシャル タグ開始 -->
    <!-- Weibo API を参照してください -->
    <meta property="og:type" content="タイプ" />
    <meta property="og:url" content="URL アドレス" />
    <meta property="og:title" content="タイトル" />
    <meta property="og:image" content="画像" />
    <meta property="og:description" content="説明" />
    <!-- sns ソーシャル タグ終了 -->
 
    <title>タイトル</title>
</head>

よく使用されるメタ属性のいくつかは上記に示されています。以下は、メタの使用に関する理解です。

metaはhtml言語のhead領域にある補助タグです。おそらく、これらのコードは不要だと思うかもしれません。実際、メタタグをうまく活用できれば、予想外の結果がもたらされます。メタタグの機能には、検索エンジン最適化 (SEO)、ページで使用される言語の定義、新しいページの自動更新と参照、Web ページの変換時の動的効果の実現、ページバッファリングの制御、Web ページの評価と評価、Web ページが表示されるウィンドウの制御などがあります。

1. 名前属性

name 属性は主に Web ページを説明するために使用されます。対応する属性値は content です。content 内のコンテンツは主に検索エンジンロボットが情報を検索して分類するために使用されます。

メタタグの名前属性の構文は次のとおりです。

<meta name="parameter" content="特定のパラメータ値">。

name 属性には主に次のパラメータがあります。

A. キーワード

説明: キーワードは、Web ページのキーワードを検索エンジンに伝えるために使用されます。

例：

<meta name="キーワード" content="メタ概要、HTMLメタ、メタ属性、メタジャンプ">

B. 説明（ウェブサイトのコンテンツの説明）

説明: 説明は、検索エンジンに Web サイトの主なコンテンツを伝えるために使用されます。

例：

<meta name="description" content="haorooms blog, html meta summary, metaはhtml言語のhead領域にある補助タグです。">

C. ロボット（ロボットガイド）

説明: ロボットは、どのページをインデックスする必要があるか、どのページをインデックスする必要がないかを検索ロボットに伝えるために使用されます。

コンテンツのパラメータは、all、none、index、noindex、follow、nofollow です。デフォルトはすべてです。

例：

<meta name="ロボット" content="なし">

具体的なパラメータは次のとおりです。

情報パラメータはすべてです: ファイルが取得され、ページ上のリンクを照会できます。

情報パラメータが none の場合、ファイルは取得されず、ページ上のリンクを照会することはできません。

情報パラメータはインデックスです: ファイルが取得されます。

情報パラメータは次のとおりです: ページ上のリンクを照会できます。

情報パラメータは noindex です。ファイルはインデックス化されませんが、ページ上のリンクは照会できます。

情報パラメータは nofollow です。ファイルは取得されますが、ページ上のリンクは照会されません。

D.著者

説明: ウェブページの作成者をマークする

例：

<meta name="author" content="root,[email protected]">

E. ジェネレータ

<meta name="generator" content="情報パラメータ"/>

メタタグのジェネレータ情報パラメータは、Web サイトの作成に使用されたソフトウェアを示します。

F. 著作権

<META NAME="COPYRIGHT"CONTENT="情報パラメータ">

メタタグの COPYRIGHT 情報パラメータは、Web サイトの著作権情報を表します。

G. 再訪後

<META name="revisit-after"CONTENT="7days">

revisit-after はウェブサイトの再訪問を意味し、7days は 7 日間を意味します。

2. http-equiv属性

名前が示すように、http-equiv は http のファイルヘッダーに相当します。Web ページのコンテンツを正しく正確に表示するために役立つ情報をブラウザーに送り返すことができます。対応する属性値は content です。content 内のコンテンツは、実際には各パラメーターの変数値です。

メタタグの http-equiv 属性の構文形式は次のとおりです。

<meta http-equiv="parameter" content="パラメータ変数値">;

http-equiv 属性には主に次のパラメータがあります。

A. 期限切れ

説明: Web ページの有効期限を設定するために使用できます。 Web ページの有効期限が切れると、サーバーに再送信する必要があります。

使用法：

<meta http-equiv="expires" content="金曜、2001年1月12日18:18:18GMT">

注意: 時間形式は GMT である必要があります。

B. プラグマ（キャッシュモード）

説明: ブラウザがローカルコンピュータのキャッシュからページコンテンツにアクセスできないようにします。

使用法：

<meta http-equiv="プラグマ" content="キャッシュなし">

注意: この設定では、訪問者はオフラインで閲覧できなくなります。

C. リフレッシュ

説明: 自動的に更新して新しいページを表示します。

使用法：

<meta http-equiv="Refresh"content="2;URL=https://www.jb51.net"> //(秒の前と URL の後の引用符に注意してください)

注: 2 は、2 秒間経過すると URL が自動的に更新されることを意味します。

D. Set-Cookie（クッキー設定）

注意: Web ページの有効期限が切れると、保存された Cookie は削除されます。

使用法：

<meta http-equiv="Set-Cookie" content="cookie 値=xxx;有効期限=金曜日、2001 年 1 月 12 日 18:18:18GMT;パス=/">

注意: 時間形式は GMT である必要があります。

E. ウィンドウターゲット（表示ウィンドウの設定）

説明: 現在のウィンドウにページを独立したページとして強制的に表示します。

使用法：

<meta http-equiv="ウィンドウターゲット" content="_top">

注: 他のユーザーがフレーム内で自分のページを呼び出すことを防ぐために使用されます。

F. content-Type（表示文字セット設定）

説明: ページで使用する文字セットを設定します。

使用法：

<meta http-equiv="コンテンツタイプ" コンテンツ="text/html;charset=gb2312">

詳細は以下の通りです。

メタタグの charset パラメータが GB2312 の場合、Web サイトで使用されるエンコードは簡体字中国語であることを意味します。

メタタグの charset パラメータが BIG5 の場合、Web サイトで使用されるエンコードは繁体字中国語であることを意味します。

メタタグの charset パラメータが iso-2022-jp の場合、Web サイトで使用されるエンコーディングは日本語であることを意味します。

メタタグの文字セット情報パラメータが ks_c_5601 の場合、Web サイトで使用されるエンコーディングは韓国語であることを意味します。

メタタグの charset パラメータが ISO-8859-1 の場合、Web サイトで使用されるエンコーディングは英語であることを意味します。

メタタグの文字セット情報パラメータが UTF-8 の場合、それはユニバーサル言語エンコーディングを表します。

G. コンテンツ-言語（表示言語設定）

使用法：

<meta http-equiv="コンテンツ言語"content="zh-cn"/>

H. Cache-Control は、リクエストとレスポンスに続くキャッシュメカニズムを指定します。

Cache-Control は、リクエストとレスポンスが従うキャッシュメカニズムを指定します。要求メッセージまたは応答メッセージで Cache-Control を設定しても、他のメッセージのキャッシュ処理は変更されません。リクエスト中のキャッシュディレクティブには、no-cache、no-store、max-age、max-stale、min-fresh、onなどがあります。
ly-if-cached の場合、応答メッセージ内の指示には、public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age が含まれます。各メッセージ内の指示の意味は次のとおりです。
パブリックは、レスポンスがどのキャッシュでもキャッシュできることを示します。
プライベートは、単一ユーザーの応答メッセージの全体または一部を共有キャッシュで処理できないことを示します。これにより、サーバーは現在のユーザーへの応答メッセージの一部のみを記述できますが、これは他のユーザーの要求には有効ではありません。
no-cacheは、リクエストまたはレスポンスメッセージをキャッシュできないことを示します。
no-store は、重要な情報が誤って公開されるのを防ぐために使用されます。これをリクエストメッセージで送信すると、リクエストメッセージと応答メッセージの両方でキャッシュが使用されなくなります。
max-age は、クライアントが指定された時間 (秒単位) を超えない経過時間の応答を受け入れることができることを示します。
min-freshは、クライアントが現在の時間と指定された時間より短い応答時間を受信できることを示します。
max-stale は、クライアントがタイムアウト期間を超えて応答メッセージを受信できることを示します。 max-stale メッセージ値を指定すると、クライアントは指定されたタイムアウト期間を超える応答メッセージを受信できます。

J. http-equiv="イメージツールバー"

<meta http-equiv="画像ツールバー" content="false"/>

画像ツールバーを表示するかどうかを指定します。false の場合は表示されず、true の場合は表示されます。

K. コンテンツスクリプトタイプ

<Meta http-equiv="Content-Script-Type"Content="text/javascript">

ページ内のスクリプトの種類を指定する W3C Web ページ仕様。

HTML <base> タグ

ページ上のすべてのリンクのデフォルトの開き方を指定します。

例えば：

<ベースターゲット="_self">

指定されたページのすべてのタブがこのページで開かれます。

<<: Web プロジェクトでの SQL インジェクションの防止

>>: アバターと国旗の統合を実現する1行のCSSコード

CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル

HTML タグのメタ概要、HTML5 のヘッドメタ属性の概要

CentOS での Django プロジェクトのデプロイに関する詳細なチュートリアル

Docker が MySQL を作成する説明

CSS を使用して固定ナビゲーションと左右スライドを備えたスクロールバーを作成する方法

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

MySql のスロークエリ分析とスロークエリログの開き方の詳細説明

クリックして展開し、全文を読む機能を実現する純粋なCSS

ffmpeg 中国語パラメータの説明と使用例

MySQLとOracleのメタデータ抽出例分析

HTML フォームコンポーネントのサンプルコード

Alibaba Cloud Server に Tomcat をインストールして設定し、外部ネットワークアクセスポートを追加するチュートリアル

推薦する

MySQLの保存時間の不一致の問題を解決する

Linux ディスクのマウント、パーティション分割、容量拡張操作を実装する方法

div が contentEditable=true に設定されている場合、コンテンツをリセットした後にカーソルを配置することはできません。

MySQLデータベースをアンインストールするための完全な手順

UIエンジニアのキャリアについての私たちの考え

Vue + Axios リクエストインターフェース方式とパラメータ渡し方式の詳しい説明

Docker+gitlab+jenkins は、ゼロから自動デプロイメントを構築します

Mysql5.7.18 のインストールとマスタースレーブレプリケーションの詳細なグラフィック説明

Node.jsサービスDockerコンテナアプリケーション実践のまとめ

ウェブフロントエンドコードを書く際の考慮事項のまとめ

MySQLでのカスタムパラメータの使用に関する詳細な説明

フロントエンドのパフォーマンス最適化 - フロントエンドエンジニアが話し合うべき問題点

Mysql general_log をクリーンアップする方法の概要

星のフラッシュ効果を実現するjs

リクエスト IP の最後のセグメントに基づいてトラフィックを分割するように Nginx を構成する方法