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

推薦する

Vueフィルターの使い方

目次概要フィルターの定義フィルターの使用カスタムグローバルフィルターローカルフィルター予防例1(ロー...

JavaScript は単一のリンクリストプロセス分析を実装します

序文:複数の要素を格納するために、配列は最も一般的に使用されるデータ構造ですが、配列には多くの欠点も...

JSデータ型検出のさまざまな方法の概要

目次背景データ型を決定する方法は何ですか? 1. typeof を使用して基本データ型を決定します。...

Vue ライフサイクルの紹介とフック関数の詳細な説明

目次Vueライフサイクルの紹介とフック機能VUEライフサイクルフックVue ライフサイクルの紹介作成...

ウェブサイトレイアウトにおける CSS の計算関数 calc の例

calc は数値を計算するために使用される CSS 関数です。長さ、角度、時間などを計算できます。 ...

Typescript の as、疑問符、感嘆符の詳細な説明

1. asキーワードはアサーションを示すTypescript では、アサーションを表現する方法が 2...

IIS 7.5では、HTMLはSHTMLのようなinclude関数(モジュールマッピングの追加)をサポートします。

最初はたくさんのエラーを見つけましたが、実際には非常に簡単です。shtm の元の設定を参照するだけで...

XHTML チュートリアル、XHTML の基礎を簡単に紹介します

<br />この記事では、XHTMLとXHTMLの基礎知識について簡単に紹介します。 X...

MySQL の frm ファイルからテーブル構造を復元する 3 つの方法 [推奨]

mysql が正常に実行されている場合、テーブル構造を表示することは難しくありません。しかし、場合...

React、Angular、Vueの3つの主要なフロントエンド技術の詳細説明

目次1. 反応する基本的な使い方注目すべき機能クラスコンポーネント仮想DOMライフサイクルメソッドJ...

MySQLデータベースに中国語の文字を保存するときに発生するエラーを解決する方法を教えます

目次1. 遭遇した問題2. 問題を分析する3. 本当の問題4. 解決策5. ソリューション効果1. ...

CSS3で実装されたダイナミックな星空の背景

結果:実装コードhtml <link href='https://fonts.goog...

Ubuntu 20.04は静的IPアドレスを設定します(異なるバージョンを含む)

Ubuntu 20.04はnetplanを通じてネットワークを管理するため、以前のバージョンとは少...

CSS仕様 BEM CSSとOOCSSサンプルコード詳細説明

序文プロジェクト開発中、各人のコーディング習慣が異なるため、記述された CSS コードは十分に構造化...

ウェブデザイナーが持つべき7つのスキル

Web デザインは科学であると同時に芸術でもあります。 Web デザイン作業は、半分は適切なプログラ...