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

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTMLでのメタタグの使い方を詳しく解説

Jun 29, 2017 pm 01:27 PM

html meta 詳しい説明

メタタグ機能

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

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

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

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

<strong>&lt;meta charset=&quot;gbk&quot;&gt;
&lt;meta name=&quot;description&quot; content=&quot;京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!&quot;&gt;
&lt;meta name=&quot;Keywords&quot; content=&quot;网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东&quot;&gt;</strong>

ログイン後にコピー

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

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

ログイン後にコピー

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

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

ログイン後にコピー

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

りー

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

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

ログイン後にコピー

metaの詳しい説明

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

http-equiv

http-equiv は、http のファイルヘッダー関数と同等であり、ブラウザが Web ページのコンテンツを正しく表示するのに役立ついくつかの有用な情報をブラウザに返すことができます。

valueDescription

Example

content-typeページで使用される文字セットを設定します

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

ログイン後にコピー

GB2312、代表者はウェブサイトで使用されるエンコーディングが簡略化されていることを示します中国語; X-UA-CompatibilityIE8 特別タグ。いくつかの互換性の問題を解決するために、

1	`<meta http-equiv="X-UA-Compatible" content="IE=7">`

ログイン後にコピー

上記のコードは、IE ブラウザーに、IE8/9 以降のバージョンではページのレンダリングに IE の最上位バージョンを使用することを伝えます。は自動的に更新され、新しいページをポイントします。追記: 2 は、ページが 2 秒間留まり、その後次の URL にジャンプすることを意味します Web ページの有効期限が切れると、ローカル Cookie は自動的に削除されます。 PS: GMT 時間形式を使用する必要があります。ページを現在のウィンドウ内で独立したページとして強制的に表示します。これにより、Web ページが他のユーザーによってフレームページとして呼び出されるのを防ぐことができますPublic: 応答を任意のキャッシュでキャッシュできることを示します。

ISO-8859-1 は Web サイトで使用されるエンコーディングを意味します; UTF-8 は世界共通言語エンコーディングを意味します PS: HTML5 ページの方法は <meta charset= を直接使用します。 "utf -8"/>

IE ブラウザ

の特定のバージョンのレンダリング方法をシミュレートするために IE8 ブラウザを指定するために使用されます。

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

ログイン後にコピー

上記のコードは、ドキュメント標準の宣言に DTD が使用されているかどうかに関係なく、IE8/9 は IE7 エンジンでページをレンダリングすることを IE ブラウザーに伝えます。

1	`<meta http-equiv="content-Type" content="text/html; charset=utf-8">`

ログイン後にコピー

上記のコードは、IE8/9 が IE8 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。

1	`<meta http-equiv="X-UA-Compatible" content="IE=8">`

ログイン後にコピー

上記のコード IE=edge は、IE に最新のエンジンを使用して Web ページをレンダリングするように指示し、chrome=1 は Chrome Frame をアクティブ化できます。

PS: Google はプラグインを追加します: Google Chrome Frame (Google Embeddedブラウザフレームワーク GCF)、このプラグインはユーザーの IE ブラウザを変更しないで済みますが、ユーザーが Web を閲覧するとき、実際には Google Chrome ブラウザコアを使用し、IE6、7、8 などの複数のバージョンの IE ブラウザをサポートします。

expires

Web ページの有効期限を設定します。

1	`<meta http-equiv="X-UA-Compatible" content="IE=edge">`

ログイン後にコピー

PS: GMT の時刻形式を使用する必要があります

リフレッシュ

1	`<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">`

ログイン後にコピー

set-cookie

1	`<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">`

ログイン後にコピー

windows-target

1	`<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">`

ログイン後にコピー

cache -control

cache Mechanism

1	`<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">`

ログイン後にコピー

Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。

no-cache：指示请求或响应消息不能缓存。

no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。

max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

name

name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

值描述例子

author

标注网页的作者

1	`<meta name="author" content="dashen" />`

ログイン後にコピー

keywords

页面关键词，用于被搜索引擎收录

1	`<meta name="keywords" content="新闻,新闻中心, 新闻频道">`

ログイン後にコピー

description

页面描述，用于搜索引擎收录

1	`<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">`

ログイン後にコピー

viewport

用于控制页面缩放

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

ログイン後にコピー

renderer

指定双核浏览器默认以何种方式渲染页面。

1	`<meta name="renderer" content="webkit">//默认webkit内核<meta name="renderer" content="ie-comp">//默认IE兼容模式<meta name="renderer" content="ie-stand">//默认IE标准模式`

ログイン後にコピー

PS：360浏览器支持

generator

说明网站的采用的什么软件制作