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

推薦する

CSS スタイルの読み込みの優先順位に関する経験の共有

昨日のプロジェクト開発中に、スタイルの読み込み優先順位に関する問題が発生しました。クラスは定義され、...

Flinkのフォールトトレラントメカニズムに関する簡単な説明:ジョブ実行とデーモン

目次1. ジョブ実行のフォールトトレランス1.1 タスクフェイルオーバー戦略1.2 ジョブ再開戦略2...

MySQLのSQLモードの特徴のまとめ

序文SQL モードは、MySQL がサポートする SQL 構文と、実行されるデータ検証チェックに影響...

Docker で Ubuntu に Python3 と Pip をインストールする際の問題

文章1) Ubuntuイメージをダウンロードする docker プル Ubuntu 2) 画像を見る...

MySQL DDLステートメントの使用

序文SQL の言語分類には主に以下の種類があります。 DDLデータ定義言語作成、削除、変更データ定義...

MySQL 増分バックアップとブレークポイントリカバリスクリプトの例

導入増分バックアップとは、完全バックアップまたは最後の増分バックアップの後、後続の各バックアップでは...

ショートカットアイコンとアイコンコードの違いの紹介

ステートメント 1: <link rel="shortcut icon" ...

vue3 のさまざまな構文形式を比較したサンプルコード

デフォルトのテンプレートメソッドはvue2に似ており、コンポーネント内のセットアップ関数を使用します...

MySQL の DDL と DML についての簡単な説明

目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...

JSはjQueryのappend関数を実装します

目次コードを見せてください効果をテストする効果追伸別のアプローチコードを見せてください HTMLEl...

nginx リバース プロキシでの proxy_pass の実装

フォーマットはシンプルです: proxy_pass URL; URL には、送信プロトコル (htt...

枠線や境界線のない iframe を使用するための完全ガイド (実践経験のまとめ)

<iframe src=”ページのURL” width=”100″ height=”30″ f...

zk+kafka+storm クラスターの docker-compose デプロイメントの実装

クラスターの展開の概要172.22.12.20 172.22.12.21 172.22.12.22 ...

Reactでのイベントバインディングの実装は3つの方法を指しています

1. 矢印関数1. 矢印関数自体はこれをバインドしないという事実を利用します。 2. render(...

Ubuntu にグラフィック ドライバーが正常にインストールされたかどうかを確認する方法

次のコマンドを実行します: glxinfo | grep レンダリング結果が「はい」の場合、グラフィ...