HTMLのメタタグの概要と詳細説明

May 27, 2017 pm 02:36 PM

メタタグ機能

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

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

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

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

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

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

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

<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ホームページのメタ設定:

<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ホームページのメタ設定:

メタタグ機能

METAタグは、HTMLタグのHEAD領域にあるキータグで、ドキュメントの文字セット、言語、作成者などの情報、およびキーワードや Web ページのレベルの設定などは、検索エンジン最適化 (SEO) に最も役立ちます。

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

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

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

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

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

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

<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ホームページのメタ設定:

<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="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
ログイン後にコピー
ログイン後にコピー

metaの詳しい説明

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

http-equiv

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

X-UA-CompatibilityIE ブラウザDTDexpiresrefreshset-cookie削除
説明
content-typeページで使用される文字セットを設定します



<meta http-equiv="content-Type" content="text/html; charset=utf-8">
ログイン後にコピー


GB2312を使用する場合、担当者が説明しますウェブサイトが採用しているエンコーディングは簡体字中国語です。

UTF-8 はウェブサイトで使用されているエンコーディングを意味します。

追記:

html5

direct <meta charset="utf-8"/>

IE8 特殊タグを使用して、特定のバージョンの をシミュレートする IE8 ブラウザを指定します。互換性の問題。
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=7&quot;&gt;
ログイン後にコピー
上記のコードは、ドキュメント標準が
で宣言されているかどうかに関係なく、IE8/9 は IE7 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=8&quot;&gt;
ログイン後にコピー
上記のコードは、IE8/9 が IE8 エンジンを使用してページをレンダリングすることを IE ブラウザーに伝えます。
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
ログイン後にコピー
上記のコードは、IE ブラウザに、IE8/9 以降のバージョンがページのレンダリングに最も高いバージョンの IE を使用することを伝えます。
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge,chrome=1&quot;&gt;
ログイン後にコピー


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

PS: Google がプラグインを追加しました: Google Chrome Frame (Google 埋め込みブラウザ)

Framework

GCF )、このプラグインはユーザーの IE ブラウザを変更しないままにできますが、ユーザーが Web を閲覧するとき、実際には Google Chrome ブラウザ コアを使用し、IE6、7、8 などの複数のバージョンの IE ブラウザをサポートします。 。

Web ページの有効期限を設定します。
&lt;meta http-equiv=&quot;expires&quot;content=&quot;Fri,12Jan200118:18:18GMT&quot;&gt;
ログイン後にコピー


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

は自動的に更新され、新しいページをポイントします。
&lt;meta http-equiv=&quot;Refresh&quot; content=&quot;2;URL=https://www.baidu.com&quot;&gt;
ログイン後にコピー


追記: 2 は、ページが 2 秒間留まり、その後次の URL にジャンプすることを意味します

Web ページの有効期限が切れると、ローカル Cookie が自動的にされます。
&lt;meta http-equiv=&quot;Set-Cookie&quot;content=&quot;cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/&quot;&gt;
ログイン後にコピー


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

windows-target强制页面在当前窗口中以独立页面显示,可以防止自己的网页被别人当作一个frame页调用


&lt;meta http-equiv=&quot;Window-target&quot; content=&quot;_top&quot;&gt;
ログイン後にコピー


cache-control缓存机制
&lt;meta http-equiv=&quot;cache-control&quot; content=&quot;no-cache&quot;&gt;
ログイン後にコピー


Public:指示响应可被任何缓存区缓存。

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

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

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

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

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

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

name

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

描述例子
author标注网页的作者


&lt;meta name=&quot;author&quot; content=&quot;dashen&quot; /&gt;
ログイン後にコピー
keywords页面关键词,用于被搜索引擎收录


&lt;meta name=&quot;keywords&quot; content=&quot;新闻,新闻中心, 新闻频道&quot;&gt;
ログイン後にコピー
description页面描述,用于搜索引擎收录


&lt;meta name=&quot;description&quot; content=&quot;新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站&quot;&gt;
ログイン後にコピー
viewport用于控制页面缩放
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, 
maximum-scale=1, minimum-scale=1, user-scalable=no&quot;&gt;
ログイン後にコピー
renderer指定双核浏览器默认以何种方式渲染页面。
&lt;meta name=&quot;renderer&quot; content=&quot;webkit&quot;&gt;//默认webkit内核
&lt;meta name=&quot;renderer&quot; content=&quot;ie-comp&quot;&gt;//默认IE兼容模式
&lt;meta name=&quot;renderer&quot; content=&quot;ie-stand&quot;&gt;//默认IE标准模式
ログイン後にコピー

PS:360浏览器支持

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


&lt;meta name=&quot;generator&quot; content=&quot;Microsoft&quot;/&gt;
ログイン後にコピー
revised网页文档的修改时间


&lt;meta name=&quot;revised&quot; content=&quot;设计网, 6/24/2015&quot;/&gt;
ログイン後にコピー
robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。


&lt;meta name=&quot;robots&quot; content=&quot;none&quot;/&gt;
ログイン後にコピー

取值:all|none|index|noindex|follow|nofollow, 默认all

all:文件将被检索,且页面上的链接可以被查询

none:文件将不被检索,且页面上的链接不可以被查询;

index:文件将被检索;

follow:页面上的链接可以被查询;

noindex:文件将不被检索,但页面上的链接可以被查询;

nofollow:文件将不被检索,页面上的链接可以被查询。

copyright网站版权信息


&lt;meta name=&quot;copyright&quot; content=&quot;本页版权XXX所有。All Rights Reserved&quot; /&gt;
ログイン後にコピー

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

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

HTML のネストされたテーブル

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTMLの表の境界線

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML 左マージン

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブルのレイアウト

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML 内のテキストの移動

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリスト

PHPでHTML/XMLを解析および処理するにはどうすればよいですか? PHPでHTML/XMLを解析および処理するにはどうすればよいですか? Feb 07, 2025 am 11:57 AM

PHPでHTML/XMLを解析および処理するにはどうすればよいですか?

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML の onclick ボタン

See all articles