HTML メタタグの一般的な使用例のコレクション

HTML メタタグの一般的な使用例のコレクション

マタタグとは
<meta> 要素は、検索エンジン向けの説明やキーワード、更新頻度など、ページに関するメタ情報を提供します。
<meta> タグはドキュメントの先頭に配置され、コンテンツは含まれません。 <meta> タグの属性は、ドキュメントに関連付けられた名前と値のペアを定義します。
metaはhtml言語のhead領域にある補助タグです。ほとんどすべての Web ページでメタ タグを見ることができますが、ブラウザの表示ページには表示されません。これらのコードは不要だと思うかもしれません。実際、メタタグは非常に重要であり、ウェブサイトに実用的な効果をもたらします。たとえば、ウェブサイトの説明()は検索エンジンのインデックスに反映されます。たとえば、メタタグを使用して、ウェブサイトのエンコーディングをgbk2312またはutf-8に設定します。メタタグはキーワードを設定します

基本的な構文

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ   name = "キーワード"     content = "キーワード 1、キーワード 2、キーワード 3..." >   

キーワード タグの機能は、検索エンジンに Web サイトのコンテンツの内容を伝え、検索エンジンが Web サイトを定義してインデックス付けしやすくすることです。英語の入力方法では、キーワードはコンマで区切られ、キーワードの長さは通常 100 文字以内です。
たとえば、Web 開発技術の学習に関する Web サイトの場合、キーワードの説明は次のように記述できます。

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ   name = "キーワード"     content = "HTML チュートリアル、CSS チュートリアル、JavaScript チュートリアル" >   

ユーザーが検索エンジンでこれらのキーワードを検索すると、あなたのウェブサイトが結果に表示されます。ただし、初期の頃は多くの不正行為者(ブラックハットSEO)がキーワードスタッキングを使用していたため、検索エンジン(Baidu)はキーワードに対してそれほど敏感ではなくなりました。

メタタグ設定の説明
構文:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ   name = "説明" content = "説明内容" >   

ウェブページの説明は非常に重要で、検索エンジンに直接反映されます。たとえば、Baidu の Web サイトを開いて「Sina」を検索すると、次のページが表示されます。

文字セットを設定するメタタグ
構文:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv ="コンテンツタイプ"コンテンツ="text/html; charset ="エンコーディング" >   

一般的なエンコード形式には、中国語エンコード(gbk2312)と国際エンコード(UTF-8)があります。gbk2312は中国語エンコードです。ウェブサイトのコンテンツがすべて中国語の場合は、gbk2312を使用します。UTF-8は、国際エンコード(中国語と英語を含む)周辺のテキストに汎用的です。それらの主な違いは、gbk2312は中国語専用に設計されており、1つの中国語文字が2文字を占めるのに対し、UTF-8は汎用的で、1つの中国語文字が3バイトを占めることです。初期の頃は、ネットワーク帯域幅のリソースが不足していたため、gbk2312エンコードを使用すると帯域幅を節約し、Webページを開く速度を上げることができましたが、現在では自宅の帯域幅が4M以上になり、節約したバイト数を完全に無視しています。
例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "コンテンツタイプ"  コンテンツ= "text/html; 文字セット = utf-8"   >   

ウェブを閲覧するとき、ほとんどの人は文字化けしたページに遭遇したことがあるでしょう。エンコード形式により、ブラウザは設定された編集形式で解析できます。エンコード形式が正しくない場合、文字化けした文字が表示されます。そのため、世界中のすべてのブラウザでウェブページを正常に表示できるように、ユニバーサル UTF-8 エンコードを使用することをお勧めします。

自動更新時間を設定するメタタグ
構文

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv ="refresh" content ="更新間隔時間" >   

更新時間は秒単位です。たとえば、フォーラム ページでは、更新しないと新しい投稿が表示されません。このように更新が速いページの場合は、自動更新コードを追加して、最新のページが表示されるようにすることができます。
例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv ="refresh"コンテンツ="3" >   

ここでは時間を 3 秒に設定していますので、ご自身でテストしてください。

メタタグ設定により自動的に新しいページにジャンプします
構文

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv ="refresh" content ="ジャンプ間の秒数; Url ="新しい Web ページのアドレス" >   

例:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv ="refresh"コンテンツ="3; Url ="http://www.adminwang.com" >   

ブラウザでこのページを開くと、3 秒後に自動的に当社 Web サイトのホームページにジャンプします。

キャッシュを無効にするメタタグ設定
構文

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "キャッシュ制御"   コンテンツ= "キャッシュなし"   />   

ブラウザにはキャッシュ機構があり、Webページを開くと自動的にローカルに保存されることはご存じのとおりです。その目的は、一定期間内に再度アクセスしたときにキャッシュされたファイルを直接呼び出して、アクセス速度を向上させることです。ただし、フォーラムのように頻繁に変更されるページの場合、ブラウザにキャッシュファイルを保存させたくないため、このコードを追加できます。プログラム開発には別の用途もあります。プログラムのデバッグ中にコード変更の効果を随時確認したい場合は、このコードを使用してブラウザのキャッシュを無効にすることができます。
別の書き方:

XML/HTML コードコンテンツをクリップボードにコピー
  1. <メタ  http-equiv = "プラグマ"  コンテンツ= "キャッシュなし"   >   

<<:  Docker を使用して Microsoft Sql Server を展開するための詳細な手順

>>:  MySQL の「特殊キーが長すぎます」の解決策

推薦する

優れたウェブサイトのコピーライティングと優れたユーザーエクスペリエンス

ウェブサイトを見るというのは、実は美しい女性を評価するようなものです。見た目を見るとき、私たちは見た...

CentOS 7 でソースコードから Openssh をインストールする方法

環境: CentOS 7.1.1503 最小インストール依存パッケージをダウンロードします: yum...

ページにデータを表示するReactメソッド

目次親コンポーネントリストボックスリストコンポーネントボタンコンポーネント PageButton昨年...

非常に詳細な Vue-Router のステップバイステップのチュートリアル

目次1. ルータビュー2. ルータリンク3. リダイレクト4. ルーティングエイリアス5. ルーティ...

Linux学習におけるmkdirコマンドの詳しい説明

目次序文1. ファイルの概念に関する基礎知識2. mkdir コマンド序文最近、Linux にますま...

CocosCreatorプロジェクト構造の仕組みの詳細な説明

目次1. プロジェクトフォルダ構造1. アセットフォルダ2. 図書館3. ローカル設定(ローカル) ...

Vueは完全な選択機能を実装しています

この記事の例では、完全な選択機能を実装するためのVueの具体的なコードを参考までに共有しています。具...

nginx ロケーション優先度の詳細な説明

場所表現タイプ~ は大文字と小文字を区別して通常の一致を実行することを示します~*は大文字と小文字を...

Vueプロジェクトの支払い機能コードの詳細な説明

1. Alipay方式: Alipay メソッド: Alipay をクリックして支払い、バックエンド...

nginxリバースプロキシを介したデバッグコードの実装

背景現在、会社のプロジェクトは、フロントエンドとバックエンドが分離された方法で開発されています。新し...

MySQL 8.0.25 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.25の最新のダウンロードとインストールのチュートリアルは参考になります。具体的な...

vue keep-alive の簡単な概要

1. 機能主にコンポーネントの状態を保持したり、再レンダリングを回避したりするために使用されます。 ...

FileZilla 425 FTP に接続できない (Alibaba クラウド サーバー) の解決策

Alibaba Cloud ServerがFTPに接続できないFileZilla 425 データ接続...

Webpack コンポーネントの使用状況統計を実装するための 50 行のコード

背景最近、リーダーからコンポーネント ライブラリを構築するように依頼があり、プロジェクトで現在使用さ...

Linux での scp および sftp コマンドの詳細な説明

目次序文1. SCPの使用法2. sftpを使用する3. scp と sftp の違いは何ですか?ど...