So verwenden Sie HTML-Meta zur Optimierung von Webseiten

Dieses Mal zeige ich Ihnen, wie Sie HTML-Meta zur Optimierung von Webseiten verwenden. Was sind die Vorsichtsmaßnahmen für die Verwendung von HTML-Meta zur Optimierung von Webseiten?

Zusammenfassung Das Tag

 stellt Metadaten zum HTML-Dokument bereit. Die Metadaten werden nicht auf der Seite angezeigt, sind aber maschinenlesbar. Es kann von Browsern (wie Inhalte angezeigt oder Seiten neu geladen werden), Suchmaschinen (Schlüsselwörter) oder anderen Webdiensten verwendet werden. —— W3School

Referenzdokument

Seitenschlüsselwörter: Jede Webseite sollte über einen eindeutigen Satz von Schlüsselwörtern verfügen, die den Inhalt der Webseite beschreiben.
Verwenden Sie beschreibende und repräsentative Schlüsselwörter und Ausdrücke, nach denen die Leute wahrscheinlich suchen, und beschreiben Sie die auf der Seite bereitgestellten Informationen genau. Markieren Sie Inhalte, die zu kurz sind, da sie sonst von Suchmaschinen als nicht relevant eingestuft werden. Außerdem sollten Tags 874 Zeichen nicht überschreiten.

<meta name="keywords" content="your tags" />

Seitenbeschreibung: Jede Webseite sollte einen Beschreibungs-Tag mit nicht mehr als 150 Zeichen haben, der den Inhalt der Webseite genau wiedergibt.

<meta name="description" content="150 words" />

Suchmaschinenindizierungsmethode, robotterms ist eine Reihe von Werten, die durch Kommas (,) getrennt sind, normalerweise die folgenden Werte: none, noindex, nofollow, all, index und follow. Stellen Sie sicher, dass Sie die Attributwerte nofollow und noindex korrekt verwenden.

5ccdaa9a4601bcc2cfc6fc8c0fc1cc1a
a8d368a6b3aae416229792e407d1cccb

Seitenumleitung und -aktualisierung: Die Zahl im Inhalt stellt die Zeit (Sekunden) dar, also wie lange die Aktualisierung dauert. Wenn Sie eine URL hinzufügen, wird diese auf die angegebene Webseite weitergeleitet (Suchmaschinen können sie automatisch erkennen und sie kann von der Suchmaschine leicht als irreführend angesehen und bestraft werden).

<meta http-equiv="refresh" content="0;url=" />

Andere

<meta name="author" content="author name" /> <!-- 定义网页作者 --><meta name="google" content="index,follow" /><meta name="googlebot" content="index,follow" /><meta name="verify" content="index,follow" />

Mobile Geräte

Ansichtsfenster: Kann die Anzeige mobiler Browser optimieren. Wenn die Website nicht reagiert, verwenden Sie Initial-Scale nicht oder deaktivieren Sie die Skalierung. Die Ansichtsbreite der meisten 4,7-5-Zoll-Geräte ist auf 360 Pixel eingestellt; das iPhone 6 ist auf 375 Pixel eingestellt; das iPhone 6 Plus ist auf 414 Pixel eingestellt.

<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/><!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->

1.width: Breite (Wert/Gerätebreite) (Bereich von 200 bis 10.000, Standard ist 980 Pixel)

2.
height: Höhe (Anzahl/Gerätehöhe) (Bereich von 223 bis 10.000) 3.initial-scale: Das anfängliche Skalierungsverhältnis (Bereich von >0 bis 10)
4.minimum-scale: Ermöglicht dem Benutzer das Zoomen bis Minimaler Maßstab
5.maximum-scale: Der maximale Maßstab, auf den Benutzer zoomen dürfen
6.user-scalable: Ob der Benutzer manuell hineinzoomen kann (nein, ja)
7.minimal- ui: Kann auf der Seite geladen werden, wenn die obere und untere Statusleiste minimiert wird. (Veraltet)
Beachten Sie, dass viele Leute initial-scale=1 auf nicht reagierenden Websites verwenden, was dazu führt, dass die Website mit 100 % Breite gerendert wird und der Benutzer die Seite manuell verschieben oder zoomen muss. Wenn „user-scalable=no“ oder „maximum-scale=1“ zusammen mit „initial-scale=1“ verwendet wird, kann der Benutzer die Webseite nicht vergrößern/verkleinern, um den gesamten Inhalt anzuzeigen.

WebApp-Vollbildmodus: App verkleiden, Offline-Anwendung.

<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->

Statusleiste ausblenden/Farbe der Statusleiste festlegen: Wird nur wirksam, wenn der WebApp-Vollbildmodus aktiviert ist. Der Inhaltswert ist standardmäßig |. black |.

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Titel nach dem Hinzufügen zum Startbildschirm

<meta name="apple-mobile-web-app-title" content="标题">

Automatisch als Telefonnummern erkannte Nummern ignorieren

<meta content="telephone=no" name="format-detection" />

Erkennung von E-Mails ignorieren

<meta content="email=no" name="format-detection" />

Smart App-Werbebanner hinzufügen Smart App-Banner: Teilen Sie dem Browser die App mit, die dieser Website entspricht, und zeigen Sie das Download-Banner auf der Seite an (wie unten gezeigt). Referenzdokument

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->  
<meta name="HandheldFriendly" content="true">  
<!-- 微软的老式浏览器 -->  
<meta name="MobileOptimized" content="320">  
<!-- uc强制竖屏 -->  
<meta name="screen-orientation" content="portrait">  
<!-- QQ强制竖屏 -->  
<meta name="x5-orientation" content="portrait">  
<!-- UC强制全屏 -->  
<meta name="full-screen" content="yes">  
<!-- QQ强制全屏 -->  
<meta name="x5-fullscreen" content="true">  
<!-- UC应用模式 -->  
<meta name="browsermode" content="application">  
<!-- QQ应用模式 -->  
<meta name="x5-page-mode" content="app">  
<!-- windows phone 点击无高光 -->  
<meta name="msapplication-tap-highlight" content="no">

Webseitenbezogen

Deklarationskodierung

<meta charset=&#39;utf-8&#39; />

Priorisieren Sie die Verwendung der neuesten Version von IE und Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->

zum Durchsuchen des WebKit-Kerns: Viele inländische Browser verfügen über zwei Kerne (Webkit und Trident). Der Webkit-Kern ermöglicht schnelles Surfen, und der IE-Kern ist mit Webseiten und alten Versionen von Websites kompatibel. Websites, die Meta-Tags hinzufügen, können steuern, welches Kernel-Rendering der Browser wählt. Referenzdokument

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

Der Standardkernelmodus inländischer Dual-Core-Browser ist wie folgt:

1. Sogou-Hochgeschwindigkeitsbrowser, QQ-Browser: IE-Kernel (Kompatibilitätsmodus)

2. 360-Geschwindigkeitsbrowser, Aoyou-Browser: Webkit-Kernel (Extreme-Speed-Modus)

Verhindern Sie, dass der Browser auf Seiteninhalte aus dem Cache des lokalen Computers zugreift: Mit dieser Einstellung können Besucher nicht offline surfen .

<meta http-equiv="Pragma" content="no-cache">

Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Verwandte Lektüre:

So verwenden Sie Titel-Tags und Absatz-Tags in XHTML

Im responsiven Framework In, wie man kümmert sich um den automatischen Zeilenumbruch des Tabellenkopfes

So verwenden Sie horizontale Linienanmerkungen und Codekommentare in HTML

Das obige ist der detaillierte Inhalt vonSo verwenden Sie HTML-Meta zur Optimierung von Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!