Les métadonnées dans la tête HTML sont essentielles pour le référencement, le partage social et le comportement du navigateur. 1. Définissez le titre et la description de la page, utilisez et et gardez-le concis et unique; 2. Ajoutez des informations sur les graphiques ouverts et la carte Twitter pour optimiser les effets de partage social, faire attention à la taille de l'image et utiliser des outils de débogage pour tester; 3. Définir les jeux de caractères et les paramètres de la fenêtre pour garantir que le support multilingue est adapté aux terminaux mobiles; 4. Les balises facultatives telles que l'auteur Copyright, le contr?le des robots et le canonique pour empêcher le contenu en double doivent également être configurées raisonnablement.

La partie HTML Head de la page Web ne semble pas grande, mais elle contient beaucoup d'informations clés, en particulier les métadonnées de document. Bien que ces données ne soient pas affichées directement sur la page, elles ont un impact important sur le référencement, le partage social, le comportement du navigateur, etc. La configuration de ces contenus peut rendre votre site Web plus professionnel et plus facile à découvrir.

Les aspects suivants sont ce à quoi vous devez prêter attention lors de la mise en place des métadonnées de document HTML.

Définir le titre et la description de la page

<title></title> et <meta name="description"> sont les deux balises de métadonnées les plus basiques.

• Le titre de la page sera affiché sur l'onglet du navigateur et est également le texte du lien dans les résultats du moteur de recherche.
• Les descriptions sont souvent utilisées dans le résumé des résultats de la recherche. Bien qu'ils n'aient pas directement le classement, l'écriture peut bien améliorer les taux de clics.

 <adal>
  <Title> Article Titre-WebSite Nom </Title>
  <meta name = "Description" Content = "Ceci est une brève description de la page, généralement contr?lée à moins de 150 mots">
</ head>

suggestion:

• Le titre reste simple et puissant, et il est préférable d'inclure des mots clés.
• Le titre et la description de chaque page doivent être aussi uniques que possible pour éviter la duplication.
• N'accumulez pas les mots clés, il est plus important d'exprimer naturellement.

Ajouter des informations sur le graphique ouvert et la carte Twitter

Si vous voulez que votre page soit mieux partagée sur Facebook, X (anciennement Twitter) ou d'autres plateformes sociales, vous ne pouvez pas ignorer les paramètres des cartes graphiques ouvertes et Twitter.

Ces balises déterminent quels titres, images et descriptions que les utilisateurs voient lors du partage de votre page.

 <Meta Property = "OG: Title" Content = "Title at Sharing">
<Meta Property = "OG: Description" Content = "Description at Sharing">
<Meta Property = "OG: Image" Content = "https://example.com/image.jpg">
<méta propriété = "og: url" contenu = "https://example.com/page">
<méta name = "Twitter: Card" Content = "Summary_Large_image">

Note:

• La taille de l'image doit être appropriée, Open Graph recommande d'utiliser des images avec au moins 1200x630 pixels.
• Si vous avez plusieurs plateformes de médias sociaux, vous pouvez affiner le contenu en fonction des fonctionnalités de la plate-forme.
• Utilisez des outils tels que Facebook Partage Debugger ou Validator de la carte Twitter pour tester l'effet.

Définir le jeu de caractères et les paramètres de la fenêtre

Ces deux balises apparemment discret sont en fait très importantes, affectant en particulier l'expérience de navigation mobile.

 <meta charset = "utf-8">
<meta name = "Viewport" Content = "width = Device-width, initial-scale = 1.0">

• charset garantit que la page Web affiche correctement les caractères dans différentes langues.
• viewport indique des appareils mobiles comment évoluer les pages, qui est la base de la conception réactive.

FAQ:

• Oublié de définir la fenêtre de la fenêtre fera que la page appara?tra très petite sur votre téléphone.
• L'utilisation de caractères obsolètes (comme GBKS) peut provoquer des problèmes de code ou de compatibilité brouillé.

Autres balises facultatives pratiques

En plus du contenu principal mentionné ci-dessus, il existe également des balises de métadonnées facultatives, qui sont également utiles dans des scénarios spécifiques:

• Informations sur l'auteur et le droit d'auteur

   <méta name = "auteur" contenu = "Zhang San">
  <meta name = "Copyright" Content = "? 2024 Exemple.com">

  Ces informations sont plus utilisées pour la gestion interne ou l'enregistrement de documents, et a peu d'impact sur l'extérieur.

• Robots Contr?le du moteur de recherche Comportement rampant

   <meta name = "robots" content = "index, suivez">

  Il peut être utilisé pour indiquer des moteurs de recherche s'il faut indexer la page ou s'il faut suivre les liens.

• Les balises canoniques empêchent les problèmes de contenu en double

   <link rel = "canonical" href = "https://example.com/this-page">

  Cette balise aide les moteurs de recherche à identifier les ?versions principales? lorsque le même contenu est accessible via plusieurs URL.

  ---

  Fondamentalement, c'est tout. La configuration des métadonnées dans la tête HTML n'est pas compliquée, mais elle est facilement négligée. Prendre un certain temps pour gérer ces détails peut vous aider à économiser de nombreux problèmes de suivi.

  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!