HTMLのメタタグの使い方を詳しく解説-htmlチュートリアル-php.cn

以下は、HTML メタタグの使用法 (推奨) の概要です。編集者はこれがとても良いものだと思ったので、皆さんの参考として今から共有します。エディターをフォローして、一緒に見てみましょう

メタタグ機能

METAタグは、HTMLタグのHEAD領域にあるキータグで、ドキュメントの文字セット、言語、作成者、キーワードやWebページだけでなく、レベル設定などの最大の役割は、検索エンジン最適化（SEO）ができることです。

追記: 検索エンジンのロボットが検索して分類するのに便利なので、インターネットアプリケーションはこれに注意を払う必要があります。

大手ウェブサイトでどうやって書くの？

このタグを理解する前に、次のようにさまざまな主流 Web サイトでメタ設定を検索しました:

JD ホームページのメタ設定:

XML/HTML コードコンテンツをクリップボードにコピー

<メタ charset="gbk">
<メタ名前=「説明」コンテンツ = 「JD.COM - 家電、デジタル通信、コンピュータ、家庭用デパート、衣料品、母子用品、書籍、食品など、数万点のブランドの高品質な商品を販売する専門的な総合オンラインショッピングモールです。誠実なサービスを提供します快適なオンラインショッピング体験を提供します! ">
<meta name="Keywords" content="オンラインショッピング、オンラインモール、携帯電話、ノートブック、コンピュータ、MP3、CD、VCD、DV、カメラ、デジタル、アクセサリ、時計、メモリカード、JD.com コンテンツをクリップボードにコピー

meta

charset

"utf-8">

<メタhttp-equiv =" コンテンツ="ウェブキット"
>
< ;メタ名前="spm-id" content="a21bo"
>
<メタ名前=「説明」 content=「タオバオ - アジア最大かつ最も安全なオンライン取引プラットフォームで、あらゆる種類の衣料品、美容、家庭、デジタル、電話料金/ポイントカードのチャージを提供しています...保証された取引を提供しながら、8億件の高品質の特別オファー（受け取り）先払い）、事前補償、偽物に対する3、7日間の理由なしの返品と交換、無料のデジタルメンテナンスなどの安全な取引保証サービスで、安心してインターネットを楽しんでください

Youku ホームページのメタ設定:

XML/HTML コードコンテンツをクリップボードにコピー

<meta charset="utf-8">
<metahttp-equiv = 「X-UA互換」 content="IE=Edge">
<meta name="title" content="Youku - 中国ding ビデオ Web サイト、提供動画再生、動画公開、動画検索 - Youku 動画「/>
<meta name=「keywords」content=」動画、動画共有、動画検索、ビデオ再生、Youkuビデオ「/>
<metaname="description" content=」ビデオサービスプラットフォーム、ビデオ再生とビデオ公開を提供、ビデオ検索、ビデオ共有"/>

Douyu ホームページのメタ設定:

XML/HTML コードコンテンツをクリップボードにコピーします

< meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="レンダラー" content="webkit|ie-comp|ie-stand">
<metahttp-equiv=" X- ua 互換 "Content = " ie =edge, chrome = 1 " & gt;
& lt; Meta = " キーワード "Content = 「DOTA2」、人気ゲーム生放送、ゲーム生放送、高画質ゲーム生放送、モバイルゲーム生放送、eスポーツ生放送」 />
<
meta name= "description" content="Douyu - 全国ライブブロードキャストプラットフォームは、DOTA2 やさまざまな有名ゲームライブなどのさまざまな人気ゲームイベントライブブロードキャストを含む、高解像度、高速かつスムーズなビデオライブブロードキャストおよびゲームイベントライブブロードキャストサービスを提供します豊富なコンテンツを備えたブロードキャスト、タイムリーなプッシュ、そして異なるオーディオビジュアル体験をすべて Douyu - 全国ライブブロードキャストプラットフォームで提供します。 UTF-8">

メタ

名前

=
"レンダラー"

コンテンツ="ウェブキット" />

<meta http-equiv="X-UA互換" content="IE=edge,chrome=1">
< ;メタ名前=「キーワード」内容=「ニュースニュースセンターファクトニュースチャンネル、時事レポート」>
<メタ名前 ="説明" 内容="テンセントニュース、事実。時事ニュース、国内ニュース、国際ニュース、社会ニュース、時事解説、ニュース写真、ニューストピック、ニュースフォーラム、軍事、歴史を含むニュースセンター、専門時事報道ポータル「>
<meta name="author" content="skeetershi" />

Qidian Novel Network ホームページのメタ設定:

XML/HTML コードコンテンツをクリップボードにコピー

<metaname=」キーワード「コンテンツ」 =「小説、小説サイト、ロマンス小説、青春小説、ファンタジー小説、武侠小説、都市小説、歴史小説、オンライン小説、オリジナルオンライン文学」 />
< meta name="description" content="小説の読書、素晴らしい小説はすべてQidian Novelにあります。Qidian Novelはファンタジー小説、武侠小説、オリジナル小説、オンラインゲーム小説、都市小説、ロマンス小説を提供します、青春小説、歴史小説、軍事小説、オンラインゲーム小説、SF 小説、ホラー小説、初めて読む小説の最新章を無料で読む、すべての興奮は Qidian Novels にあります: "/>
< ;meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<メタ名前=「ロボット」内容=「すべて」/>
メタ name=" googlebot"content="all"/>
<meta name="baiduspider"content =「すべて」 />
<メタ http-equiv="モバイルエージェント" content="format=wml; url=http://m.qidian.com"/> <メタ http-equiv="モバイルエージェント" content="format=xhtml; url=http://m.qidian.com"/> <メタ http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />
<メタ name="アプリケーション名" content="Qidian Chinese Novel Network" /
< メタ名前 ="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication ツールチップ」内容=「小説読書_啓甸中国小説ネットワーク|無料小説、ファンタジー小説、武侠小説、ロマンス小説、青春小説、小説ネットワークからあらゆる種類の小説をダウンロード」 />
< メタ name="msapplication-task" content="name=ゲームの開始; action-uri=http://game.qidian.com/?_s=ie9;icon- uri= http://www.qidian.com/Images/ie9/game.ico"/>
<meta name="msapplication-task" content = "name=Bookcase;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/本 .ico"/> /c.qidian.com/android/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/phone.ico"
/>
< meta name="msapplication-task" content="name=ランキングリスト; action-uri=http://top.qidian.com/?_s= ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico"
/>
<meta name="msapplication-task " content=" name=search;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search .ico"
/>
<メタ property="qc:admins"content="204236767661141166 375「/>

」 metaの詳しい説明meta タグは、http-equiv 変数と name 変数の 2 つの部分に分けることができます。 http-equiv

http-equiv は http のファイルヘッダーに相当し、ブラウザーが Web ページのコンテンツを正しく表示できるようにするために、いくつかの有用な情報をブラウザーに返すことができます。

X-UA-Compatibilityexpires追記: 自動的に更新して新しいページをポイントするには、GMT 時間形式を使用する必要があります refresh追記: 2 は、ページが 2 秒間留まり、その後次の URL にジャンプすることを意味しますset-cookiePS: GMT 時間形式を使用する必要があります。 windows-targetキャッシュ制御Public: 応答を任意のキャッシュ領域にキャッシュできることを示します。

name

name 属性は主に Web ページを記述するために使用され、対応する属性値は content です。content 内のコンテンツは、主に検索エンジンのロボットが情報を検索し、情報を分類するために使用されます。

値	説明	例
content-type	ページで使用される文字セットを設定します	GB2312 の場合は、Web サイトで使用されるエンコードが簡体字中国語であることを意味し、 ISO-8859-1 の場合は、Web サイトで使用されるエンコードが英語であることを意味します。エンコード; PS: HTML5 ページの方法は、
IE8 の特別なタグを直接使用して IE8 ブラウザを指定することです。互換性の問題を解決するために、IE ブラウザの特定のバージョンをシミュレートします。		上記のコードは、ドキュメント標準の宣言に DTD が使用されているかどうかに関係なく、IE8/ を IE ブラウザーに伝えます。 9 は IE7 エンジンを使用してページをレンダリングします。上記のコードは、IE8/9 が IE8 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。上記のコードは、IE 8/9 以降のバージョンがページのレンダリングに IE の最上位バージョンを使用することを IE ブラウザーに伝えます。上記のコード IE=edge は、IE に最新のエンジンを使用して Web ページをレンダリングするように指示し、chrome=1 は Chrome Frame をアクティブ化できます。 PS: Google はプラグインを追加しました: Google Chrome Frame (Google Embedded Browser Framework GCF)、このプラグインでは、ユーザーの IE ブラウザは変更されませんが、Web を閲覧するとき、ユーザーは実際に Google Chrome ブラウザコアを使用し、IE6、7、8 などの複数のバージョンの IE ブラウザをサポートします。
Web ページの有効期限を設定します。
。
Web ページの有効期限が切れると、ローカル Cookie は自動的に削除されます。
現在のウィンドウでページを強制的に独立したページとして表示します。これにより、自分の Web ページが他の人によってフレームページとして呼び出されることを防ぐことができます
キャッシュメカニズム		プライベート: 単一ユーザーの応答メッセージのすべてまたは一部が共有キャッシュで処理できないことを示します。これにより、サーバーは、他のユーザーのリクエストには無効なユーザーからの部分的な応答のみを記述することができます。 no-cache: リクエストまたはレスポンスメッセージをキャッシュできないことを示します。 no-store: 重要な情報が意図せず公開されるのを防ぐために使用されます。リクエストメッセージで送信すると、リクエストメッセージと応答メッセージの両方でキャッシュが使用されます。 max-age: クライアントが、指定された時間 (秒) を超えない存続期間を持つ応答を受信できることを示します。 min-fresh: クライアントが、現在の時刻に指定された時刻を加えた値よりも短い応答時間で応答を受信できることを示します。 max-stale: クライアントがタイムアウト期間を超えて応答メッセージを受信できることを示します。 max-stale メッセージの値を指定すると、クライアントは指定されたタイムアウト期間の値を超える応答メッセージを受信する可能性があります。

は、どのページにインデックスを付ける必要があり、どのページにインデックスを付ける必要がないのかを検索ロボットに指示するために使用されます。値: all|none|index|noindex|follow|nofollow、デフォルト allall: ファイルが取得され、ページ上のリンクがクエリ可能になります。 none: ファイルは取得されず、ページ上のリンクリンクはクエリできません。 index: ファイルは取得されます。 noindex: ファイルは取得されません。 nofollow: ファイルは取得されませんが、ページ上のリンクはクエリできます。

値	説明	例
author	ページの作成者をマークします
キーワード	ページキー検索エンジンに含めるキーワード
説明	ページの説明、検索エンジンに含める	< ; meta name="description" content="時事ニュース、国内ニュース、国際ニュース、社会ニュース、時事解説、ニュース写真、ニューストピック、ニュースフォーラム、軍事、歴史、専門的な時事報道ポータルを含むニュースセンター" > ;
viewport	はページのスケーリングを制御するために使用されます
renderer	は、デフォルトでデュアルコアブラウザがページをレンダリングする方法を指定します。	//デフォルトの Webkit カーネル//デフォルトの IE 互換モード//デフォルトの IE 標準モード PS: 360 ブラウザのサポート
generator	Web サイトの作成にどのようなソフトウェアが使用されているか説明してください	ロボット

		copyright ウェブサイトの著作権情報大規模なウェブサイトのメタ設定を通じて、次の情報を確認できます。一般的に使用されるのは、X-UA 互換、キーワード、および説明です。上記の HTML メタタグの使用に関する概要 (推奨) は、エディターによって共有されたすべての内容です。参考にしていただければ幸いです。また、Script Home をサポートしていただければ幸いです。