HTMLのメタタグ例を詳しく解説

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

メタタグ機能

METAタグはHTMLタグHEAD領域のキータグであり、文書文字セット、使用言語などの基本情報を提供しますキーワードや Web ページのレベルを設定する最大の役割は、検索エンジンの最適化 (SEO) を実行できるようにすることです。

追記: indexエンジンロボットを検索して分類するのは簡単です。インターネットアプリケーションはそれに注意する必要があります。

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

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

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

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

1. <メタ charset="gbk">

2. <メタの名前=「説明」 コンテンツ= 「JD.COM - 家電、デジタル通信、コンピュータ、家庭用デパート、衣料品、母子用品、書籍、食品など、数万点のブランドの高品質な商品を販売する専門的な総合オンラインショッピングモールです。誠実なサービスを提供します。快適なオンラインショッピング体験を提供します!">

3. <meta name="Keywords" content="オンラインショッピング、オンラインモール、携帯電話、ノートブック、コンピューター、MP3、CD、VCD、DV、カメラ、デジタル、アクセサリー、時計、メモリーカード、京東">

淘宝網ホームページのメタ設定:

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="renderer" content="webkit">
<meta name="spm-id" content="a21bo">
<meta name="description" content="淘宝网 - 亚洲最大、最安全的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 8亿优质特价商品，同时提供担保交易(先收货后付款)、先行赔付、假一赔三、七天无理由退换货、数码免费维修等安全交易保障服务，让你全面安心享受网上购物乐趣！">
<meta name="keyword" content="">

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

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

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="title" content="优酷-中国领先视频网站,提供视频播放,视频发布,视频搜索 - 优酷视频" />
<meta name="keywords" content="视频,视频分享,视频搜索,视频播放,优酷视频" />
<meta name="description" content="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />

Douyu ホームページのメタ設定: XML/HTML コード

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="keywords" content="DOTA2,热门游戏直播,游戏直播,高清游戏直播,手机游戏直播,电子竞技直播" />
<meta name="description" content="斗鱼 - 全民直播平台提供高清、快捷、流畅的视频直播和游戏赛事直播服务，包含DOTA2等各类热门游戏赛事直播和各种名家大神游戏直播，内容丰富，推送及时，带给你不一样的视听体验，一切尽在斗鱼 - 全民直播平台。" />

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

XML/HTML コード

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

<meta charset="UTF-8">
<meta name="renderer" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="keywords" content="新闻 新闻中心 事实派 新闻频道,时事报道">
<meta name="description" content="腾讯新闻，事实派。新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
<meta name="author" content="skeetershi" />

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

XML/HTML コード

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

<meta name="keywords" content="小说,小说网,言情小说,青春小说,玄幻小说,武侠小说,都市小说,历史小说,网络小说,原创网络文学" />
<meta name="description" content="小说阅读,精彩小说尽在起点小说。起点小说提供玄幻小说,武侠小说,原创小说,网游小说,都市小说,言情小说,青春小说,历史小说,军事小说,网游小说,科幻小说,恐怖小说,首发小说最新章节免费小说阅读,精彩尽在起点小说！ver:071011热门小说:。" />
<meta http-equiv="Content-Type" id="meta_ContentType" content="text/html;charset=UTF-8" />
<meta name="robots" content="all" />
<meta name="googlebot" content="all" />
<meta name="baiduspider" content="all" />
<meta name="copyright" content="本页版权 www.qidian.com 起点中文网所有。All Rights Reserved" />
<meta http-equiv="mobile-agent" content="format=wml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=xhtml; url=http://m.qidian.com" /><meta http-equiv="mobile-agent" content="format=html5; url=http://h5.qidian.com/bookstore.html" />
<meta name="application-name" content="起点中文小说网" /   
<meta name="msapplication-starturl" content="/Default.aspx?_s=ie9" />
<meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />
<meta 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=藏书架;action-uri=http://me.qidian.com/BookCase/1/1?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/book.ico" />
<meta name="msapplication-task" content="name=读书客户端;action-uri=http://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=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/search.ico" />
<meta property="qc:admins" content="204236767661141166375" />

meta の詳細な説明

meta タグは、http-equiv と namevariable

の 2 つの部分に分けることができます。

http-equiv

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

値説明例content-typeページで使用される文字セットを設定しますset-cookie Web ページの有効期限が切れた場合、ローカル Cookie が自動的にwindows-target 現在のウィンドウでページを強制的に独立したページとして表示します。これにより、自分の Web ページが他の人によってフレーム ページとして呼び出されることを防ぐことができますキャッシュ制御キャッシュメカニズム

name

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

	GB2312 の場合は、Web サイトで使用されるエンコードが簡体字中国語であることを意味し、	ISO-8859-1 の場合は、Web サイトで使用されるエンコードが英語であることを意味します。エンコード; PS: HTML5 ページの方法は、 を直接使用することです
X-UA-Compatibility	IE8 の特別なタグは、いくつかの互換性の問題を解決するために、IE ブラウザ の特定のバージョンのレンダリング方法をシミュレートする IE8 ブラウザを指定するために使用されます。	上記のコードは、ドキュメント標準の宣言に 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 埋め込みブラウザFrameworkGCF) )、このプラグインはユーザーの IE ブラウザーを変更せずに維持できますが、Web を閲覧するとき、ユーザーは実際には Google Chrome ブラウザー コアを使用し、IE6、7、8 などの複数のバージョンの IE ブラウザーをサポートします。
expires	Web ページの有効期限を設定します。	PS: 自動的に更新して新しいページをポイントするには、GMT 時間形式を使用する必要があります
refresh	。	追記: 2 は、ページが 2 秒間留まり、その後次の URL にジャンプすることを意味します
	削除されます。	PS: GMT 時間形式を使用する必要があります。
		Public: 応答を任意のキャッシュ領域にキャッシュできることを示します。 プライベート: 単一ユーザーの応答メッセージのすべてまたは一部が共有キャッシュで処理できないことを示します。これにより、サーバーは、他のユーザーのリクエストには無効なユーザーからの部分的な応答のみを記述することができます。 no-cache: リクエストまたはレスポンスメッセージをキャッシュできないことを示します。 no-store: 重要な情報が意図せず公開されるのを防ぐために使用されます。リクエスト メッセージで送信すると、リクエスト メッセージと応答メッセージの両方でキャッシュが使用されます。 max-age: クライアントが、指定された時間 (秒) を超えない存続期間を持つ応答を受信できることを示します。 min-fresh: クライアントが、現在の時刻に指定された時刻を加えた値よりも短い応答時間で応答を受信できることを示します。 max-stale: クライアントがタイムアウト期間を超えて応答メッセージを受信できることを示します。 max-stale メッセージの値を指定すると、クライアントは指定されたタイムアウト期間の値を超える応答メッセージを受信する可能性があります。

は、どのページにインデックスを付ける必要があるか、どのページにインデックスを付ける必要がないのかを検索ロボットに指示するために使用されます。 値: all|none|index|noindex|follow|nofollow、デフォルト allall: ファイルが取得され、ページ上のリンクはnone: ファイルは取得されません。とページ ページ上のリンクはクエリできません。 index: ファイルは取得されます。 follow: ページ上のリンクはクエリできます。 1. HTML の無料ビデオチュートリアル2. 4. HTML にリンクを挿入する方法を説明します

値	説明	例
author	ページの作成者をマークします
キーワード	ページキー 検索エンジンに含めるキーワード
description	ページの説明、検索エンジンに含める	< ; meta name="description" content="時事ニュース、国内ニュース、国際ニュース、社会ニュース、時事解説、ニュース写真、ニュース トピック、ニュース フォーラム、軍事、歴史、専門的な時事報道ポータルを含むニュース センター" > ;
viewport	はページのスケーリングを制御するために使用されます
renderer	デュアルコア ブラウザがデフォルトでページをレンダリングする方法を指定します。	//デフォルトの Webkit カーネル//デフォルトの IE 互換モード//デフォルトの IE 標準モード PS: 360 ブラウザのサポート
generator	Web サイトの作成にどのようなソフトウェアが使用されているか説明してください	robots
		クエリ可能
		noindex: ファイルは取得されません。ページはクエリできます。 nofollow: ファイルは取得されませんが、ページ上のリンクはクエリできます。 copyright ウェブサイトの著作権情報 大規模なウェブサイトのメタ設定を通じて、次の情報を確認できます。一般的に使用されるのは、X-UA 互換、キーワード、および説明です。 【関連する推奨事項】
	HTML の知識ポイントを共有する	3. div が iframe によってブロックされるさまざまな状況を解決する

5. nodejs で HTML を解析する方法を説明します

以上がHTMLのメタタグ例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。