Comment utiliser la méta HTML pour optimiser les pages Web

Cette fois, je vais vous montrer comment utiliser les méta HTML pour optimiser les pages Web. Quelles sont les précautions pour utiliser les méta HTML pour optimiser les pages Web. Voici des cas pratiques, jetons un coup d'œil.

Résumé La balise

 fournit des métadonnées sur le document HTML. Les métadonnées ne sont pas affichées sur la page, mais sont lisibles par machine. Il peut être utilisé par les navigateurs (comment le contenu est affiché ou les pages sont rechargées), les moteurs de recherche (mots-clés) ou d'autres services Web. —— W3School

Document de référence

Mots-clés de page, chaque page Web doit avoir un ensemble unique de mots-clés qui décrivent le contenu de la page Web.
Utilisez des mots-clés et des expressions descriptifs et représentatifs que les gens sont susceptibles de rechercher, et décrivez avec précision les informations fournies sur la page. Marquez le contenu trop court et les moteurs de recherche pourraient ne pas le considérer comme pertinent. De plus, les balises ne doivent pas dépasser 874 caractères.

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

Description de la page. Chaque page Web doit avoir une balise de description de 150 caractères maximum qui reflète avec précision le contenu de la page Web.

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

Méthode d'indexation des moteurs de recherche, robotterms est un ensemble de valeurs séparées par des virgules (,), généralement les valeurs suivantes : none, noindex, nofollow, all, index et follow. Assurez-vous d'utiliser correctement les valeurs nofollow et noindex de l'attribut .

5ccdaa9a4601bcc2cfc6fc8c0fc1cc1a
f1cab19839f5b3b9dd72a40b59e99cf5

Redirection et actualisation de la page : le nombre dans le contenu représente le temps (secondes), c'est-à-dire le temps nécessaire à l'actualisation. Si vous ajoutez une URL, elle sera redirigée vers la page Web spécifiée (les moteurs de recherche peuvent la détecter automatiquement, et elle peut facilement être considérée comme trompeuse par le moteur et être punie).

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

Autres

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

Appareils mobiles

portée d'affichage : peut optimiser l'affichage des navigateurs mobiles. Si le site Web ne répond pas, n'utilisez pas la mise à l'échelle initiale et ne désactivez pas la mise à l'échelle.
La largeur de la fenêtre d'affichage de la plupart des appareils de 4,7 à 5 pouces est définie sur 360 pixels ; l'appareil de 5,5 pouces est défini sur 400 pixels ; l'iPhone6 ​​​​est réglé sur 375 pixels ; l'iPhone6 ​​​​plus est réglé sur 414 pixels.

<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 : largeur (valeur/largeur de l'appareil) (plage de 200 à 10 000, la valeur par défaut est 980 pixels)
2.hauteur : hauteur (Nombre/hauteur de l'appareil) (Plage de 223 à 10 000)
3.initial-scale : Le rapport de mise à l'échelle initial (Plage de > 0 à 10)
4.minimum-scale : Autoriser l'utilisateur à zoomer à Échelle minimale
5.maximum-scale : L'échelle maximale sur laquelle les utilisateurs sont autorisés à zoomer
6.user-scalable : Indique si l'utilisateur peut zoomer manuellement (non, oui)
7.minimal- ui : peut être chargé sur la page lors de la réduction des barres d'état supérieure et inférieure. (Obsolète)
Notez que de nombreuses personnes utilisent initial-scale=1 sur des sites Web non réactifs, ce qui entraîne le rendu du site Web à 100 % de largeur et l'utilisateur doit déplacer manuellement la page ou zoomer. Si user-scalable=no ou maximum-scale=1 est utilisé avec initial-scale=1, l'utilisateur ne pourra pas zoomer/dézoomer sur la page Web pour voir l'intégralité du contenu.

Mode plein écran WebApp : application de déguisement, application hors ligne.

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

Masquer la barre d'état/définir la couleur de la barre d'état : ne prend effet que lorsque le mode plein écran de la WebApp est activé. La valeur du contenu est par défaut noir | noir-translucide.

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

Titre après ajout à l'écran d'accueil

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

Ignorer les numéros automatiquement reconnus comme numéros de téléphone

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

Ignorer la reconnaissance des e-mails

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

Ajouter une bannière publicitaire pour application intelligente Bannière pour application intelligente : indiquez au navigateur l'application correspondant à ce site Web et affichez la bannière de téléchargement sur la page (comme indiqué ci-dessous). Document de référence

<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">

Page Web relative

Encodage des déclarations

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

Prioriser l'utilisation de la dernière version d'IE et de 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 -->

pour parcourir le contrôle principal de WebKit : de nombreux navigateurs nationaux ont des doubles cœurs (webkit et Trident). Le noyau webkit permet une navigation à grande vitesse et le noyau IE est compatible avec les pages Web et les anciennes versions des sites Web. Les sites Web qui ajoutent des balises méta peuvent contrôler le rendu du noyau choisi par le navigateur. Document de référence

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

Le mode de noyau par défaut des navigateurs dual-core nationaux est le suivant :

1. Navigateur haute vitesse Sogou, navigateur QQ : noyau IE (mode de compatibilité) 2. Navigateur 360 vitesses, navigateur Aoyou : noyau Webkit (mode vitesse extrême)

Interdire au navigateur d'accéder au contenu de la page à partir du cache de l'ordinateur local : avec ce paramètre, les visiteurs ne pourront pas naviguer hors ligne. .

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

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Comment utiliser les balises de titre et les balises de paragraphe en XHTML

Dans un framework responsive Dans, comment gérer le retour à la ligne automatique de l'en-tête du tableau

Comment utiliser les annotations de lignes horizontales et les commentaires de code en HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!