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 の「特殊キーが長すぎます」の解決策

推薦する

DockerプライベートライブラリHarborのアーキテクチャとコンポーネントの説明

この記事では、Harbor アーキテクチャの構成と、実行時に各コンポーネントを使用する方法について説...

nginx を介して方向プロキシを実装するプロセスの図

この記事は主に、nginx を介して方向プロキシを実装するプロセスを紹介します。この記事のサンプル ...

webpackが静的リソースキャッシュを実装する方法

目次導入複数の異なるハッシュを区別するハッシュチャンクハッシュコンテンツハッシュjs キャッシュの実...

ドラッグ効果を実現するための js オブジェクト指向メソッド

この記事では、ドラッグアンドドロップをJSオブジェクト指向で実装するための具体的なコードを参考までに...

reduxの動作原理と使い方の説明

目次1. redux とは何ですか? 2. 還元の原則3. redux の使い方は? (1)redu...

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

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

Win10 の組み込み Linux システムを使用して Spring Boot プロジェクトを開始する方法

1. Windows10の組み込みLinuxサブシステムをインストールする1.1. Linuxサブシ...

DockerとVMwareの競合を解決する

1. Dockerの起動の問題:問題は解決しました: Hyper-V をオンにする必要があります (...

docker-compose.yml ファイル内の一般的なテンプレート コマンドの詳細な説明

注意: docker-compose.yml ファイルを書き込むときは、すべてのコロン (:) とダ...

ウェブデザインのためのロイヤルブルーのカラーマッチング入門

古典的な色の組み合わせは力と権威を伝え、強いロイヤルブルーはあらゆる古典的な色の組み合わせの中心的な...

Docker を使用して Go Web アプリケーションをデプロイする方法

目次なぜ Docker が必要なのでしょうか? Docker デプロイメントの例コードの準備Dock...

Vueバスの簡単な使い方

Vueバスの簡単な使い方シナリオの説明:コンポーネント A にはコンポーネント B と C が含まれ...

MySQL テーブルスペースとは何ですか?

今日皆さんにお伝えしたいトピックは、「皆さんがよく話題にするテーブル スペースとは一体何でしょうか。...

史上最もクリエイティブな404ページのデザインは、ウェブサイトのユーザーエクスペリエンスを効果的に向上させます

ウェブを閲覧しているときに 404 ページに遭遇することはあまりないので、見落としがちです。しかし、...

JavaScriptの無限ループを検出して防止する方法の詳細な説明

目次序文for文の無限ループを修正while文の無限ループを修正要約する序文Js デッド ループはど...