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

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 ページが表示されるウィンドウの制御などがあります。

メタタグの構成: メタタグには、http-equiv 属性と name 属性の 2 つの属性があります。属性が異なるとパラメータ値が異なり、これらの異なるパラメータ値によって 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コード

推薦する

Nginxはクロスドメインの問題を解決し、サードパーティのページを埋め込む

目次序文困難クロスドメイン定義nginxの機能リバースプロキシ静的と動的の分離達成しようとする最終結...

CSS3 で transform を使用した場合のフォントぼかしの解決方法の詳細な説明

この質問は非常に奇妙なので、あまり多くを語らずにコードに直接進みます。 .g-ダイアログラッパー{ ...

Linux および CentOS (サーバー) に zip および unzip コマンド機能をインストールする

Linux に zip 解凍機能をインストールする通常、 zip コマンドは Linux サーバーに...

Docker View プロセス、メモリ、カップ消費量

Docker プロセス、メモリ、カップ消費量を表示dockerコンテナを起動し、dockerinsp...

JS と Nodejs におけるイベント駆動型開発についての簡単な説明

目次イベント駆動型とパブリッシュ・サブスクライブ型ブラウザの JavaScript ではイベント駆動...

LinuxサーバーでRabbitMQ管理ページにアクセスできない問題を解決

私のプロジェクトの特定の機能ではサーバーが rabbitmq にメッセージを送信する必要があるため、...

Vue3.0でカスタム命令を書くための簡単な手順

序文Vue には、v-if、v-bind、v-on などの豊富な組み込みディレクティブが用意されてい...

js で下線とキャメルケースの変換を実装する (複数の方法)

目次適用シナリオ:方法 1: 正規表現 (推奨)方法2: 配列のreduceメソッドを使用する方法3...

MySQL8の再帰メソッドの使い方を教える

以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...

Ubuntu 18.04 サーバーのパスワードを忘れたり改ざんされた場合にパスワードをリセットする方法

最近、サーバー上のアカウントが2つハッキングされ、パスワードが改ざんされました。幸い、まだ使えるアカ...

サーバーの購入と初期構築方法

しばらくサーバーいじってなかったけど、やることがなくなったのでモバイルワークスに行って海外サーバーを...

Node の SMS API で検証コード ログインを実装するためのサンプル コード

1. ノードサーバーのセットアップ + データベース接続ここでの操作は比較的簡単でわかりやすいです。...

Linux マルチスレッドにおけるフォークとミューテックス ロック プロセスの例

目次質問： 1. 最初の試み2. 合理的な分析3. 問題解決(1) pthread_join()の使...

Docker-compose インストール yml ファイルの設定方法

目次1. オフラインインストール2. オンラインインストール3. アンインストール4. ymlファイ...

複数の値を返す MySQL ストアド プロシージャ メソッドの例

この記事では、例を使用して、MySQL ストアド プロシージャで複数の値を返す方法について説明します...