Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > HTML-Tutorial > Ausführliche Erläuterung der Verwendung von Meta-Tags in HTML

Ausführliche Erläuterung der Verwendung von Meta-Tags in HTML

黄舟
Freigeben： 2017-06-29 13:27:28
Original
1912 Leute haben es durchsucht

Meta-Tag-Funktion

META-Tag ist ein Schlüsseltag im HEAD-Bereich von HTML-Tags, der das Dokument Zeichensatz, Verwendung von Sprache, Autor und anderen grundlegenden Informationen sowie die Einstellungen von Schlüsselwörtern und Webseitenebenen usw. Die größte Rolle besteht darin, Suchmaschinenoptimierung (SEO) durchführen zu können.

PS: Es ist für Suchmaschinen-Roboter praktisch, Internetanwendungen zu finden und zu klassifizieren.

Wie schreibe ich auf großen Websites?

Bevor ich diesen Tag verstanden habe, habe ich auf verschiedenen Mainstream-Websites nach ihren Meta-Einstellungen gesucht, wie folgt:

Meta-Einstellungen der Jingdong-Homepage : 

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


Meta auf Taobao-Homepage-Einstellungen: 

<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="">
Nach dem Login kopieren

Meta-Einstellungen für die Youku-Homepage: 

<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="视频服务平台,提供视频播放,视频发布,视频搜索,视频分享" />
Nach dem Login kopieren

Meta-Einstellungen von Douyu-Homepage: 

<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等各类热门游戏赛事直播和各种名家大神游戏直播，内容丰富，推送及时，带给你不一样的视听体验，一切尽在斗鱼 - 全民直播平台。" />
Nach dem Login kopieren

Meta-Einstellungen der Tencent-Homepage: 

<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" />
Nach dem Login kopieren


Meta-Einstellungen auf der Qidian Novel Network-Homepage: 

<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" />
Nach dem Login kopieren

Meta-Detaillierte Erklärung

Meta-Tag kann in zwei Teile unterteilt werden: http-equiv und Namensvariablen.

http-equiv

http-equiv entspricht dem Dateiheader von http. Es kann einige nützliche Informationen an den Browser zurückgeben Helfen Sie dem Browser, den Inhalt von Webseiten korrekt anzuzeigen.

WertBeschreibungBeispielInhaltstypBeim Festlegen des von der Seite verwendeten ZeichensatzesX-UA-CompatibleIE-Browsersläuft abaktualisierenset-cookiewindows-targetCache-Kontrolle


<meta http-equiv="content-Type" content="text/html; charset=utf-8">
Nach dem Login kopieren
GB2312 bedeutet dies, dass die von der Website verwendete Codierung vereinfachtes Chinesisch ist

<; 🎜>ISO Wenn -8859-1, bedeutet dies, dass die von der Website verwendete Kodierung Englisch ist; wenn

UTF-8 die weltweit universelle Sprachkodierung darstellt;

PS: Die Methode Für HTML5-Seiten ist die direkte Verwendung von < ;meta charset="utf-8"/>

Spezielles Tag für IE8 , wird verwendet, um den IE8-Browser anzugeben. Simulieren Sie die Rendering-Methode einer bestimmten Version des , um einige Kompatibilitätsprobleme zu lösen.


Der obige Code teilt dem IE-Browser mit, dass IE8/9 die Seite unabhängig davon, ob eine DTD zur Deklaration des Dokumentstandards verwendet wird, mit der IE7-Engine rendert . 

<meta http-equiv="X-UA-Compatible" content="IE=7">
Nach dem Login kopieren


Der obige Code teilt dem IE-Browser mit, dass IE8/9 die IE8-Engine zum Rendern der Seite verwenden wird. 

<meta http-equiv="X-UA-Compatible" content="IE=8">
Nach dem Login kopieren


Der obige Code teilt dem IE-Browser mit, dass IE8/9 und spätere Versionen die höchste IE-Version zum Rendern der Seite verwenden. 

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Nach dem Login kopieren


Der obige Code IE=edge weist IE an, die neueste Engine zum Rendern von Webseiten zu verwenden, und chrome=1 kann Chrome Frame aktivieren.
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Nach dem Login kopieren

PS: Google fügt ein Plug-in hinzu: Google Chrome Frame (Google Embedded Browser Framework GCF). Dieses Plug-in kann den IE-Browser des Benutzers unverändert lassen, aber wenn Benutzer im Internet surfen, verwenden sie tatsächlich den Google Chrome-Browserkern und die Unterstützung IE6, 7, 8 und andere Versionen des IE-Browsers.

Legen Sie die Ablaufzeit der Webseite fest.


PS: Es muss das GMT-Zeitformat verwendet werden 
<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT">
Nach dem Login kopieren

Automatisch aktualisieren und auf neue Seite verweisen.


PS: 2 bedeutet, dass die Seite 2 Sekunden lang bleibt und dann zur folgenden URL springt 
<meta http-equiv="Refresh" content="2;URL=https://www.baidu.com">
Nach dem Login kopieren
Wenn die Webseite abläuft, wird das lokale Cookie automatisch gelöscht.


PS: Es muss das GMT-Zeitformat verwendet werden. 
<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
Nach dem Login kopieren

Erzwingen Sie die Anzeige der Seite als unabhängige Seite im aktuellen Fenster, wodurch verhindert werden kann, dass Ihre Webseite als Frame aufgerufen wird Seite von anderen


<meta http-equiv="Window-target" content="_top">
Nach dem Login kopieren
Caching-Mechanismus


Öffentlich: Gibt an, dass die Antwort von jedem Cache zwischengespeichert werden kann. 
<meta http-equiv="cache-control" content="no-cache">
Nach dem Login kopieren

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

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

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

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

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

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

name

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

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


<meta name="author" content="dashen" />
Nach dem Login kopieren
keywords页面关键词，用于被搜索引擎收录


<meta name="keywords" content="新闻,新闻中心, 新闻频道">
Nach dem Login kopieren
description页面描述，用于搜索引擎收录


<meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站">
Nach dem Login kopieren
viewport用于控制页面缩放


<p style="margin-bottom: 65px;"><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></p>
Nach dem Login kopieren
renderer指定双核浏览器默认以何种方式渲染页面。


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

PS：360浏览器支持

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


<meta name="generator" content="Microsoft"/>
Nach dem Login kopieren
revised网页文档的修改时间


<meta name="revised" content="设计网, 6/24/2015"/>
Nach dem Login kopieren
robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。


<meta name="robots" content="none"/>
Nach dem Login kopieren

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

all：文件将被检索，且页面上的链接可以被查询；

none：文件将不被检索，且页面上的链接不可以被查询；

index：文件将被检索；

follow：页面上的链接可以被查询；

noindex：文件将不被检索，但页面上的链接可以被查询；

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

copyright网站版权信息


<meta name="copyright" content="本页版权XXX所有。All Rights Reserved" />
Nach dem Login kopieren

 

 

总结

通过大网站对于meta的设置，可以看到常用的有，X-UA-Compatible、keywords、description。

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung der Verwendung von Meta-Tags in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten：
html meta 详解
Quelle：php.cn
Vorheriger Artikel：Die Verwendung und Definition des -Tags in HTML5 Nächster Artikel：Detaillierte Erläuterung der Rolle von Meta-Tags in HTML
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Automatische PX-Konvertierung in REM-Fehler  <style>html {  font-size: calc(100vw / 3.75);      }body {    Schriftgröße: 0,16rem...
Aus 2024-04-16 09:34:16
0
0
4687
Die Seite kann plötzlich weder CSS noch Bootstrap abrufen Ich entwickle also eine Seite, einen Teil davon habe ich gestern gemacht und es hat großar...
Aus 2024-04-06 21:58:04
0
1
800
So lösen Sie das mysteriöse Leerzeichen am unteren Rand der Seite in CSS Ich versuche, mit Bootstrap und D3 eine einfache Webseite zu erstellen, weiß aber nicht, w...
Aus 2024-04-06 20:22:15
0
1
454
So verwenden Sie Laravel-Komponenten mit Livewire-Lazy-Platzhaltern Ich möchte das Skelett meiner Laravel-Komponente in einen Livewire3-Platzhalter einfügen. ...
Aus 2024-04-06 20:02:10
0
2
543
Methode der obersten Ebene zum Ersetzen einer Zeichenfolge durch HTML-Code (aus einem Array generiert) Gegeben eine Zeichenfolge wie diese...$htmlPattern="Usernameis:#name#andusercompanyis...
Aus 2024-04-06 17:40:41
0
2
410
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage

Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！

Über uns Haftungsausschluss Sitemap

© php.cn All rights reserved