メタタグ機能
METAタグはHTMLタグのHEAD領域にある重要なタグであり、ドキュメントの文字セット、言語、作成者などの基本情報と、キーワードやWebページのレベルの設定を提供します。検索エンジン最適化 (SEO) を有効にします。
追記: 検索エンジンロボットにとっては検索と分類に便利なので、インターネットアプリケーションはそれに注意を払う必要があります。
大手ウェブサイトでどうやって書くの？
このタグについて学ぶ前に、次のように、さまざまな主流 Web サイトでメタ設定を検索しました。
JDホームページのメタ設定:
リーリー淘宝網ホームページのメタ設定:
リーリーYouku ホームページのメタ設定:
リーリーDouyuホームページのメタ設定:
リーリーTencentホームページのメタ設定:
リーリーQidian Novel Network のホームページのメタ設定:
リーリーメタ詳細説明
meta タグは、http-equiv と name 変数の 2 つの部分に分けることができます。
http-equiv
http-equiv は http のファイル ヘッダーに相当し、ブラウザーが Web ページのコンテンツを正しく表示できるようにするために、いくつかの有用な情報をブラウザーに返すことができます。
| 説明 | 例 | |
| ページで使用する文字セットを設定します |
リーリー
GB2312 が使用される場合、担当者は、Web サイトで使用されるエンコーディングが簡体字中国語であることを示します。
ISO-8859-1 が使用されている場合、担当者は Web サイトで使用されているエンコーディングが英語であることを示します。
UTF-8 は世界共通言語エンコーディングを表します。
追記: HTML5 ページを使用する方法は、 を直接使用することです
|
|
| リーリー | 上記のコードは、ドキュメント標準が DTD で宣言されているかどうかに関係なく、IE8/9 が IE7 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。
リーリー
上記のコードは、IE8/9 が IE8 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。
リーリー
上記のコードは、IE 8/9 以降のバージョンがページのレンダリングに最上位バージョンの IE を使用することを IE ブラウザーに伝えます。
リーリー 上記のコード IE=edge は、最新のエンジンを使用して Web ページをレンダリングするように IE に指示し、chrome=1 で Chrome Frame をアクティブ化できます。 |
|
| リーリー |
追記: GMT 時間形式を使用する必要があります
|
|
| リーリー |
追記: 2 は、ページが 2 秒間留まり、その後次の URL にジャンプすることを意味します
|
|
| リーリー |
追記: GMT 時間形式を使用する必要があります。
|
|
| リーリー |
|
|
| リーリー |
パブリック: 応答を任意のキャッシュにキャッシュできることを示します。
Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。
no-cache：指示请求或响应消息不能缓存。
no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。
min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。
max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。
|
name
name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
| 值 | 描述 | 例子 |
| author | 标注网页的作者 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="author"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="dashen"</span> <span style="color: #0000ff;">/></span> ログイン後にコピー |
| keywords | 页面关键词，用于被搜索引擎收录 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="keywords"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="新闻,新闻中心, 新闻频道"</span><span style="color: #0000ff;">></span> ログイン後にコピー |
| description | 页面描述，用于搜索引擎收录 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="description"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站"</span><span style="color: #0000ff;">></span> ログイン後にコピー |
| viewport | 用于控制页面缩放 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="viewport"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="width=device-width, initial-scale=1, <br />maximum-scale=1, minimum-scale=1, user-scalable=no"</span><span style="color: #0000ff;">></span> ログイン後にコピー |
| renderer | 指定双核浏览器默认以何种方式渲染页面。 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="webkit"</span><span style="color: #0000ff;">></span><span style="color: #000000;">//默认webkit内核 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie-comp"</span><span style="color: #0000ff;">></span><span style="color: #000000;">//默认IE兼容模式 </span><span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="renderer"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="ie-stand"</span><span style="color: #0000ff;">></span>//默认IE标准模式 ログイン後にコピー PS：360浏览器支持
|
| generator | 说明网站的采用的什么软件制作 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="generator"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="Microsoft"</span><span style="color: #0000ff;">/></span> ログイン後にコピー |
| revised | 网页文档的修改时间 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="revised"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="设计网, 6/24/2015"</span><span style="color: #0000ff;">/></span> ログイン後にコピー |
| robots | 用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="robots"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="none"</span><span style="color: #0000ff;">/></span> ログイン後にコピー 取值：all|none|index|noindex|follow|nofollow, 默认all
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索，但页面上的链接可以被查询；
nofollow：文件将不被检索，页面上的链接可以被查询。
|
| copyright | 网站版权信息 |
<span style="color: #0000ff;"><</span><span style="color: #800000;">meta </span><span style="color: #ff0000;">name</span><span style="color: #0000ff;">="copyright"</span><span style="color: #ff0000;"> content</span><span style="color: #0000ff;">="本页版权XXX所有。All Rights Reserved"</span> <span style="color: #0000ff;">/></span> ログイン後にコピー |
总结
通过大网站对于meta的设置，可以看到常用的有，X-UA-Compatible、keywords、description。
参考文献
1. http://www.haorooms.com/post/html_meta_ds
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
