18041 sujets

Questions générales et questions de débutants

[Résolu] Les balises meta

bonjour,

j'aimerais savoir si aujourd’hui les balises meta son importante(à part 'title' et 'description'), si oui pouvez vous m'expliquer si on doit le faire sur chaque page du site ou si on peut le faire sur une page comme inc_header qui se rapporte sur toutes les pages.

je ne l'ais jamais fait, car c'est mon premier site...

merci
Bonjour, et bon début Smiley cligne

Tu ne parles que des Meta ? ou du contenu du Doctype je veux dire entre les head ?
Pour les Meta, le plus important est bien sur, l'encodage

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

Puis le Meta qui détermine le type d'action sur les CSS en responsive design (tablettes smartphone etc ..)

<meta name=viewport content="width=device-width, initial-scale=1">

Viennent les Metas nombreux
permettant aux outils Google de référencement de savoir qui est le propriétaire du site, les images de chaque page etc...
Pareil pour Facebook lorsque tu partagera une page
Ceux-la il te faut les apprendre dans les pages d'aide de ton compte webmaster tool google
et su l'aide des réseaux sociaux !
Bon courage
merci pour les réponses, j ai déja mes meta pour le responsive et encodage, ce que je voudrai savoir est si les balises meta en générals doivent etre ecrite par pages ou est ce qu'on peut les ecrire dans une page général comme dans une page inc_header qui se repette dans toutes les pages...
boni75 a écrit :
merci pour les réponses, j ai déja mes meta pour le responsive et encodage, ce que je voudrai savoir est si les balises meta en générals doivent etre ecrite par pages ou est ce qu'on peut les ecrire dans une page général comme dans une page inc_header qui se repette dans toutes les pages...

La balise meta description doit être unique pour chaque page, et ce n'est pas la seule : la canonical par exemple, pour peu que vous l'utilisiez.
Pour résumer Olivier,

Tu peux regrouper les meta identiques à chaque page dans un fichier d'appel,

sachant que,

de toute façon certaines balises meta sont propres à la page.


Perso je combine ceci en utilisant un fichier externe qui contient mes metas et qui génère le contenu de ces balises en fonctions de la page web appelée.

Pour ma part j'utilise celles-ci:

      <meta name="description" content=""/>
      <meta charset="utf-8"/>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta property="og:title" content=""/>
      <meta property="og:type" content="website"/>
      <meta property="og:image" content=""/>// ces 4 balises: à multiplier suivant le nombre d'image ; de mémoire maxi 3
      <meta property="og:image:type" content=""/>
      <meta property="og:image:width" content=""/>
      <meta property="og:image:height" content=""/>
      <meta property="og:url" content=""/>
      <meta property="og:description" content=""/>
      <meta property="og:determiner" content=""/><?php /* <= à laisser vide (valeur par défaut) */?>
      <meta property="og:locale" content=""/>
      <meta property="og:locale:alternate" content=""/>// Si t'utilise plusieurs langues
      <meta property="og:site_name" content=""/>
      <meta name="twitter:card" content="summary"/>
      <meta name="twitter:site" content=""/>
      <meta name="twitter:creator" content=""/>

+ la canonical que je n'ai pas encore implantée


En aurais-je oublié ?
Modifié par Greg_Lumiere (26 Apr 2016 - 19:59)
Administrateur
Greg_Lumiere a écrit :
Je dis ça... Smiley rolleyes

Tiens, c'est pas bête du tout ça.
Tu aurais envie de t'en charger ?
Greg_Lumiere a écrit :
En aurais-je oublié ?


Personne n'a relevé ?! Smiley whattha

Si on voulait vraiment que ce sujet soit complet nous n'aurions pas oubliés les balises meta associées aux favicon et autres personnalisations graphiques.

<!--> L'interface Apple <-->
<link rel="apple-touch-icon" sizes="57x57" href="apple-touch-icon-57x57.png"/>
<link rel="apple-touch-icon" sizes="60x60" href="apple-touch-icon-60x60.png"/>
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png"/>
<link rel="apple-touch-icon" sizes="76x76" href="apple-touch-icon-76x76.png"/>
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png"/>
<link rel="apple-touch-icon" sizes="120x120" href="apple-touch-icon-120x120.png"/>
<link rel="apple-touch-icon" sizes="144x144" href="apple-touch-icon-144x144.png"/>
<link rel="apple-touch-icon" sizes="152x152" href="apple-touch-icon-152x152.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon-180x180.png"/>

<!--> Androïd <-->
<link rel="icon" type="image/png" sizes="192x192"  href="/android-icon-192x192.png"/>

<!--> Le classique favicon <-->
<link rel="icon" type="image/png" href="favicon-192x192.png" sizes="192x192"/>
<link rel="icon" type="image/png" href="favicon-96x96.png" sizes="96x96"/>
<link rel="icon" type="image/png" href="favicon-32x32.png" sizes="32x32"/>
<link rel="icon" type="image/png" href="favicon-160x160.png" sizes="160x160"/>
<link rel="icon" type="image/png" href="favicon-16x16.png" sizes="16x16"/>

<!--> Les tuiles Windows (versions 8+) <-->
<meta name="msapplication-TileColor" content="#ffffff"/>
<meta name="msapplication-TileImage" content="ms-icon-144x144.png"/>
<meta name="theme-color" content="#ffffff"/>


Rassurez-vous, des générateur en ligne font très bien le job.


@Raphael : Je dois décliner la proposition, j'ai trop de projets en cours et ajouter la rédaction d'un article serait suicidaire pour mon planning. Mais ajouter un lien depuis l'article vers ce topic serait peut-être une façon de redonner fraicheur au tutoriel original sans trop d'effort.

Bonne journée Smiley smile
Sujet clos
Aller à