Heim > Web-Frontend > HTML-Tutorial > Detaillierte Erläuterung der Verwendung von Meta-Tags in HTML

Detaillierte Erläuterung der Verwendung von Meta-Tags in HTML

巴扎黑
Freigeben: 2017-05-21 10:04:39
Original
1742 Leute haben es durchsucht

Im Folgenden finden Sie eine Zusammenfassung der Verwendung von HTML-Meta-Tags (empfohlen). Der Herausgeber findet es ziemlich gut, deshalb werde ich es jetzt mit Ihnen teilen und es allen als Referenz geben. Folgen wir dem Editor, um einen Blick darauf zu werfen

Die Rolle des Meta-Tags

META-Tag ist ein Schlüssel-Tag im HEAD-Bereich von HTML-Tags, die Dokumentzeichen bereitstellen. Grundlegende Informationen wie Sammlung, Sprache, Autor usw. sowie Einstellungen für Schlüsselwörter und Webseitenebenen usw. sind für die Suchmaschinenoptimierung (SEO) am nützlichsten.

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 verstand, suchte ich auf verschiedenen Mainstream-Websites nach ihren Meta-Einstellungen, wie folgt:

Meta-Einstellungen auf der Homepage von JD.com:


XML/HTML-CodeInhalt in die Zwischenablage kopieren

  1. <meta charset="gbk">

  2. <Meta Name="Beschreibung" Inhalt="JD.COM- Ein Profi umfassendes Online-Einkaufszentrum, das Zehntausende hochwertige Markenprodukte wie Haushaltsgeräte, digitale Kommunikation, Computer, Haushaltskaufhäuser, Kleidung, Produkte für Mütter und Kleinkinder, Bücher, Lebensmittel usw. verkauft. Bequeme und ehrliche Dienstleistungen bieten Ihnen a angenehmes Online-Einkaufserlebnis! >="Schlüsselwörter" Inhalt

    =
  3. "Online-Shopping, Online-Einkaufszentrum, Mobiltelefon, Notebook, Computer, MP3, CD, VCD, DV, Kamera, digital, Zubehör, Uhr, Speicherkarte, Jingdong "
  4. >Meta-Einstellungen auf der Taobao-Homepage: XML/HTML-Code

    Inhalt in die Zwischenablage kopieren

<


meta

charset="utf-8">

  1. <meta http-equiv="X-UA-Compatible" content

    =
  2. "IE=edge,chrome=1 "
  3. ><meta name= "renderer" content

    =
  4. "webkit"
  5. ><Meta Name="spm-id" Inhalt

    =
  6. "a21bo"
  7. > <Meta Name="Beschreibung" Inhalt

    =
  8. "Taobao - Asiens größte und sicherste Online-Handelsplattform, die alle Arten von Kleidung, Schönheit, Haushalt, Digital, Telefon-/Punktkartenaufladung ... 800 Millionen hochwertige Sonderangebote und auch garantierte Lieferungen anbietet Transaktionen (zuerst erhalten, später bezahlen), Vorausentschädigung, Drei-zu-eins-Entschädigung für Fälschungen, siebentägige Rückgabe und Umtausch ohne Angabe von Gründen, kostenlose digitale Wartung und andere sichere Transaktionsgarantiedienste, damit Sie den Online-Spaß in vollen Zügen genießen können Einkaufen in aller Ruhe! "
  9. ><meta name= "keyword" content

    =
  10. ""
  11. >Meta-Einstellungen für die Youku-Homepage :XML/HTML-Code

    Inhalt in die Zwischenablage kopieren
  1. <meta charset="utf-8">

  2. <meta http-equiv="X-UA-Compatible" Inhalt="IE=Edge">

  3. <meta name="title" content="Youku – Chinas führende Video-Website, die Videowiedergabe, Videoveröffentlichung und Video bietet Suche - Youku Video" />

  4. <Meta Name ="keywords" content="Video, Video-Sharing, Videosuche, Videowiedergabe, Youku-Video" />

  5. <Meta Name="Beschreibung" Inhalt = "Videodienstplattform, Bereitstellung von Videowiedergabe, Videoveröffentlichung, Videosuche, Videofreigabe" />

Douyu Metaeinstellungen für die Startseite:


XML/HTML-CodeInhalt in die Zwischenablage kopieren

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

  2. <meta name="renderer" content="webkit|ie-comp|ie-stand">

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

  4. < ;Meta Name="keywords" Inhalt="DOTA2, beliebte Spiel-Live-Übertragung, Spiel-Live-Übertragung , hochauflösende Spiel-Live-Übertragung, mobile Spiel-Live-Übertragung, E-Sport-Live-Übertragung“ />

  5. < Meta Name="Beschreibung" Inhalt=" Douyu – die nationale Live-Übertragungsplattform bietet hochauflösende, schnelle und Reibungslose Video-Live-Übertragung und Live-Übertragung von Spielereignissen. Es umfasst Live-Übertragungen verschiedener beliebter Spielereignisse wie DOTA2 und ist reich an Inhalten und zeitgemäß und bietet Ihnen ein anderes audiovisuelles Erlebnis alles auf Douyu – der nationalen Live-Übertragungsplattform. " />

Meta-Einstellungen für die Tencent-Homepage:


XML/HTML-CodeInhalt in die Zwischenablage kopieren

  1. <Meta charset="UTF-8">

  2. <meta Name="Renderer" Inhalt="Webkit" />

  3. <meta http-equiv="X-UA-Compatible" Inhalt="IE=edge,chrome=1">

  4. <meta name="keywords" content="News News Center Fact News Channel, Current Affairs Report">

  5. <meta name="description" Inhalt="Tencent News, sachlich. Nachrichtencenter, einschließlich Nachrichten zu aktuellen Angelegenheiten, inländischen Nachrichten, internationalen Nachrichten, sozialen Nachrichten, Kommentaren zu aktuellen Angelegenheiten, Nachrichtenbildern, Nachrichtenthemen, Nachrichtenforen, Militär, Geschichte , professionelles Portal zur Berichterstattung über aktuelle Angelegenheiten ">

  6. <Meta Name ="author" content="skeetershi" />

Meta-Einstellungen auf der Homepage von Qidian Novel.com:


XML/HTML-CodeInhalt in die Zwischenablage kopieren

  1. <meta name="keywords" content ="Roman, Roman-Website, Liebesroman, Jugendroman, Fantasy-Roman, Martial-Arts-Roman, Urban Novel, historischer Roman, Online-Roman, Original-Online-Literatur" />

  2. <Meta Name="Beschreibung" Inhalt ="Romanlektüre, wundervolle Romane finden Sie alle in Qidian Novels. Qidian Novels bietet Fantasy-Romane, Kampfkunstromane, Originalromane, Online-Spielromane, urbane Romane, Liebesromane, Jugendromane, historische Romane, Militärromane, Online-Spielromane, Science-Fiction-Romane, Horrorromane, kostenlose Romanlektüre der neuesten Kapitel der ersten Romane, die ganze Spannung steckt in den Ausgangspunktromanen! 🎜> 🎜>="meta_ContentType"

  3. content
  4. =

    "text/html;charset=UTF-8" /><meta name="robots" content="all"

  5. />
  6. <meta name ="googlebot" content="all"

  7. />

  8. <meta name="baiduspider" content="all"

  9. />

  10. <meta Name="Copyright" Inhalt="Das Urheberrecht dieser Seite www.qidian.com liegt beim Qidian Chinese Network. Alle Rechte vorbehalten“

  11. />

  12. <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"  Inhalt="format=html5; url=http://h5.qidian.com/bookstore.html" />

  13. <meta name="application-name" content="起点中文小说网" /   

  14. <meta name="msapplication-starturl " content="/Default.aspx?_s=ie9" />

  15. <meta name="msapplication-tooltip" content="小说阅读_起点中文小说网|免费小说,玄幻小说,武侠小说,言情小说,青春小说,小说网各类小说下载" />

  16. <meta name="msapplication-task" content="name=起点小游戏;action-uri=http://game.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/game.ico" /> ;

  17. <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" />

  18. <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" />

  19. <meta name="msapplication-task" content="name=排行榜;action-uri=http://top.qidian.com/?_s=ie9;icon-uri=http://www.qidian.com/Images/ie9/chart.ico" />

  20. <meta name="msapplication -task" content="name=搜索;action-uri=http://sosu.qidian.com/?_s=ie9;icon-uri=http://www .qidian.com/Images/ie9/search.ico" />

  21. <meta property="qc:admins" content="204236767661141166375" />

meta详解

meta标签可分为两大部分:http-equiv和name变量.

http-äquiv

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

zu verwenden >
Wert Beschreibung Beispiel
Inhaltstyp Legen Sie den von der Seite verwendeten Zeichensatz fest Wenn
描述 例子
content-type 设定页面使用的字符集            

GB2312时,代表说明网站是采用的编码是简体中文;

ISO-8859-1时,代表说明网站是采用的编码是英文;

UTF-8时,代表世界通用的语言编码;

PS:html5页面的做法是直接使用

X-UA-Compatible IE8的专用标记,用来指定IE8浏览器去模拟某个特定版本的IE浏览器的渲染方式,以此来解决部分兼容问题。

以上代码告诉IE浏览器,无论是否用DTD声明文档标准,IE8/9都会以IE7引擎来渲染页面。  
以上代码告诉IE浏览器,IE8/9都会以IE8引擎来渲染页面。  
以上代码告诉IE浏览器,IE8/9及以后的版本都会以最高版本IE来渲染页面。  
           

以上代码IE=edge告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame.

PS:谷歌添加一个插件:Google Chrome Frame(谷歌内嵌浏览器框架GCF),这个插件可以让用户的IE浏览器外不变,但用户在浏览网页时,实际上使用的是Google Chrome浏览器内核,而且支持IE6、7、8等多个版本的IE浏览器。

expires 设定网页的过期时间。            

PS:必须使用GMT的时间格式

refresh 自动刷新并指向新页面。            

PS:2代表页面停留2秒后跳转到后面的网址上

set-cookie 如果网页过期,那么自动删除本地cookie。            

PS:必须使用GMT的时间格式。

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

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

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

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

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

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

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

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

GB2312, gibt der Vertreter an, dass die von der Website verwendete Kodierung vereinfachtes Chinesisch ist, wenn ISO-8859-1, gibt der Vertreter an, dass die von der Website verwendete Kodierung Englisch ist; UTF-8 stellt die weltweit universelle Sprachkodierung dar. PS: Die Methode für HTML5-Seiten besteht darin,
X-UA-Compatible Spezielles Tag für IE8, wird verwendet, um den IE8-Browser anzugeben, um die Rendering-Methode von zu simulieren eine bestimmte Version des IE-Browsers. Dadurch werden einige Kompatibilitätsprobleme gelöst. Der obige Code teilt dem IE-Browser mit, ob oder Verwenden Sie keine DTD, um Dokumentstandards zu deklarieren, und IE8/9 verwendet die IE7-Engine zum Rendern der Seite.
Der obige Code teilt dem IE-Browser mit, dass IE8/9 die IE8-Engine zum Rendern der Seite verwenden wird.
Der obige Code teilt dem IE-Browser mit, dass IE8/9 und spätere Versionen die höchste Version von IE zum Rendern verwenden die Seite.
Der obige Code IE=edge weist IE an, die neueste Engine zum Rendern von Webseiten zu verwenden, und chrome=1 kann Chrome Frame aktivieren.PS: Google fügt ein Plug-in hinzu: Google Chrome Frame (Google Embedded Browser Framework (GCF) kann dieses Plug-in den IE-Browser des Benutzers unverändert lassen, aber wenn Benutzer im Internet surfen, verwenden sie tatsächlich den Google Chrome-Browserkern und unterstützt mehrere Versionen von IE-Browsern wie IE6, 7 und 8 .
expires Legen Sie die Ablaufzeit der Webseite fest. PS: Es muss das GMT-Zeitformat verwendet werden
refresh automatisch aktualisieren und zeigen Neue Seite. PS: 2 bedeutet, dass die Seite 2 Sekunden lang bleibt und dann zur folgenden URL springt
set-cookie Wenn die Webseite abläuft, wird das lokale Cookie automatisch gelöscht. ​ ​ ​ ​PS: Es muss das GMT-Zeitformat verwendet werden.
windows-target Erzwingen Sie die Anzeige der Seite als unabhängige Seite im aktuellen Fenster, das verhindern kann, dass Ihre eigene Webseite von anderen als Frame-Seite aufgerufen wird td>
cache-control Caching-Mechanismus ​​​​​Öffentlich: Zeigt an, dass die Antwort von jedem Cache-Bereich zwischengespeichert werden kann. Privat: Zeigt an, dass die Antwortnachricht für einen einzelnen Benutzer ganz oder teilweise nicht vom freigegebenen Cache verarbeitet werden kann. Dadurch kann der Server nur eine Teilantwort eines Benutzers beschreiben, die für die Anfragen anderer Benutzer nicht gültig ist. no-cache: Zeigt an, dass die Anforderungs- oder Antwortnachricht nicht zwischengespeichert werden kann. No-Store: Wird verwendet, um zu verhindern, dass wichtige Informationen unbeabsichtigt veröffentlicht werden. Das Senden in der Anforderungsnachricht führt dazu, dass sowohl die Anforderungs- als auch die Antwortnachrichten Caching verwenden. max-age: Gibt an, dass der Client Antworten mit einer Lebensdauer erhalten kann, die nicht größer als die angegebene Zeit in Sekunden ist. min-fresh: Gibt an, dass der Client Antworten mit einer Antwortzeit erhalten kann, die kürzer ist als die aktuelle Zeit plus die angegebene Zeit. max-stale: Zeigt an, dass der Client Antwortnachrichten über den Timeout-Zeitraum hinaus empfangen kann. Wenn Sie einen Wert für Max-Stale-Nachrichten angeben, kann der Client Antwortnachrichten empfangen, die den angegebenen Wert des Timeout-Zeitraums überschreiten.

Name

Das Namensattribut wird hauptsächlich zur Beschreibung von Webseiten verwendet, und der entsprechende Attributwert ist Inhalt. Der Inhalt wird hauptsächlich von Suchmaschinenrobotern verwendet, um Informationen zu finden Informationen klassifizieren.

Wert Beschreibung Beispiel
Autor Anmerkung Autor der Webseite
Schlüsselwörter Seitenschlüsselwörter zur Aufnahme durch Suchmaschinen
Beschreibung Seitenbeschreibung für die Einbindung in Suchmaschinen Ansichtsfenster wird zur Steuerung des Seitenzooms verwendet td>
renderer Gibt an, wie Dual-Core-Browser Seiten standardmäßig rendern. //Standard-Webkit-Kernel/ / Standard-IE-Kompatibilitätsmodus//Standard-IE-Standardmodus
描述 例子
author 标注网页的作者
keywords 页面关键词,用于被搜索引擎收录
description 页面描述,用于搜索引擎收录
viewport 用于控制页面缩放
renderer 指定双核浏览器默认以何种方式渲染页面。 //默认webkit内核//默认IE兼容模式//默认IE标准模式

PS:360浏览器支持

generator 说明网站的采用的什么软件制作
revised 网页文档的修改时间
robots 用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。            

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

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

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

index:文件将被检索;

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

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

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

copyright 网站版权信息

PS: 360-Browser unterstützt

generator Beschreiben Sie die zum Erstellen der Website verwendete Software
überarbeitet Änderungszeit des Webdokuments
Roboter td> Wird verwendet, um dem Suchroboter mitzuteilen, welche Seiten indiziert werden müssen und welche nicht. Wert: all|none|index|noindex|follow|nofollow, Standard allall: Die Datei wird abgerufen und die Links auf der Seite können abgefragt werden none : Die Datei wird nicht abgerufen und die Links auf der Seite können nicht abgefragt werden.

Index: Die Datei wird abgerufen.

Folgen: Die Links auf der Seite können abgefragt werden 🎜>noindex: Die Datei wird nicht abgerufen, aber die Links auf der Seite können abgefragt werden; nofollow: Die Datei wird nicht abgerufen, aber die Links auf der Seite können abgefragt werden.
Urheberrecht Informationen zum Urheberrecht der Website

ZusammenfassungAnhand der Metaeinstellungen großer Websites können Sie sehen, dass häufig verwendete Einstellungen X-UA-kompatibel, Schlüsselwörter und Beschreibung umfassen. Die obige Zusammenfassung (Empfehlung) der Verwendung von HTML-Meta-Tags ist der gesamte vom Herausgeber geteilte Inhalt. Ich hoffe, dass er Ihnen eine Referenz geben kann, und ich hoffe, dass Sie Script Home unterstützen.

Das obige ist der detaillierte Inhalt vonDetaillierte 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:
Quelle:php.cn
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage