La méta 'Content-Language' indique la langue principale du contenu d'une page. C'est une indication pour les navigateurs et certains outils d'indexation. Elle se place généralement dans la section <head> de la page.
Le format courant est un code langue: soit 'fr', 'en' ou 'en-US' pour anglais américain. Exemples de lignes possibles : fr en-US es-ES pt-BR zh-CN
Pour un débutant : cette méta aide les moteurs à comprendre quelle version linguistique afficher. Elle ne remplace pas une architecture multilingue correcte (hreflang), mais c\'est une bonne pratique pour renforcer la signalisation linguistique.
Si vous avez plusieurs versions linguistiques : - Utilisez des codes précis (ex: en-GB, en-US). - Combinez avec hreflang pour un ciblage parfait. - N\'utilisez pas de valeurs vagues si la page est ciblée.
La liste finale contient plusieurs lignes prêtes à copier (ex: "<meta http-equiv=\"content-language\" content=\"fr\">").
La balise 'robots' donne des instructions aux moteurs (ex: Google, Bing) sur comment indexer ou traiter les liens d'une page. Elle est essentielle pour contrôler la visibilité d\'une page dans les résultats de recherche.
index / noindex : autorise ou interdit l'indexation. follow / nofollow : autorise ou interdit le suivi des liens. noarchive : empêche l\'affichage d\'une copie en cache. nosnippet : empêche l\'extrait dans les résultats. noimageindex : empêche l\'indexation des images.
Combinaisons utiles : - index, follow (page publique) - noindex, follow (param de tri/de paginaton à ne pas indexer mais liens utiles) - noindex, nofollow (zone privée) - index, max-image-preview:large (optimise affichage d\'image)
Si vous mettez 'noindex', la page risque de disparaître des résultats de recherche après exploration. 'nofollow' empêche le passage de 'link juice' par les liens présents. Utilisez ces valeurs avec attention.
La page finale liste toutes les variantes et combinaisons possibles prêtes à copier.
La méta 'expires' indique une date après laquelle le contenu est considéré périmé. C\'était autrefois utilisée pour le cache navigateur; aujourd\'hui on privilégie les en-têtes HTTP, mais c\'est utile pour certains contextes statiques.
Format RFC1123 : par exemple 'Wed, 21 Oct 2026 07:28:00 GMT'. Vous pouvez utiliser des délais relatifs dans l\'UI, mais la méta nécessite une date complète.
Pour du contenu totalement statique (images, pages d\'aide) où vous souhaitez indiquer une très longue durée. Pour API ou pages dynamiques, préférez les HTTP headers (Cache-Control).
Exemples : - Contenu statique: date dans le futur (+1 an) - Actualités: +1 jour - Ressources sensibles: pas de date (ou past date)
La dernière page contient plusieurs formats prêts à copier (RFC1123) et variantes.
Twitter Cards permettent d\'enrichir les Tweets avec titre, description et image. Choisissez le type selon le contenu (image large, résumé, application, player).
Utilisez 'summary_large_image' pour partager un visuel attractif. Fournissez toujours 'twitter:title' et 'twitter:description' et une image optimisée (1.91:1 ou 2:1 selon type).
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:title" content="Titre du Tweet"> <meta name="twitter:description" content="Description courte"> <meta name="twitter:image" content="https://example.com/image.jpg">
Souvent fourni sous la forme @site. Permet d\'associer les Tweets à un compte officiel.
<meta name="twitter:site" content="@votresite">
Le titre affiché dans la carte Twitter. Court et impactant. 50-70 caractères conseillés.
<meta name="twitter:title" content="Titre pour Twitter">
Courte description affichée sous le titre dans la carte. 70-200 caractères recommandés.
<meta name="twitter:description" content="Une description concise">
Image utilisée pour la Twitter Card. Formats recommandés: JPG/PNG, ratio variable selon card (ex: 1.91:1 pour summary_large_image).
<meta name="twitter:image" content="https://example.com/twitter.jpg">
Permet d\'oublier la barre d\'adresse en ajoutant la page sur l\'écran d\'accueil sous forme d\'application web.
<meta name="apple-mobile-web-app-capable" content="yes">
Contrôle l\'apparence de la barre d\'état quand la page est ajoutée à l\'écran d\'accueil.
<meta name="apple-mobile-web-app-status-bar-style" content="black">
Le texte affiché sous l\'icône quand l\'utilisateur ajoute la page à l\'écran d\'accueil.
<meta name="apple-mobile-web-app-title" content="Mon appli">
Cache-Control est un en-tête HTTP souvent mis en meta http-equiv pour compatibilité. Il indique comment les navigateurs et CDN doivent mettre en cache une ressource.
no-cache, no-store, private, public, max-age=[s], s-maxage=[s], must-revalidate
public, max-age=31536000 pour assets statiques; private, max-age=0 pour contenus utilisateur
Liste de meta http-equiv Cache-Control prêtes à copier.
La meta viewport contrôle comment une page est mise à l\'échelle sur les appareils mobiles. C\'est essentiel pour le responsive design.
initial-scale, maximum-scale, user-scalable, width=device-width. Attention: interdire le zoom nuit à l\'accessibilité.
width=device-width, initial-scale=1 (recommandé). width=1024 (rare, force desktop layout).
Meta viewport prêtes à copier.
Format-Detection (principalement iOS/Safari) permet de désactiver la conversion automatique de numéros de téléphone, adresses ou emails en liens cliquables.
Désactiver la détection peut améliorer l\'expérience si votre design gère déjà les liens, ou si la conversion automatique casse la mise en forme.
telephone=no pour éviter que '01 23 45 67 89' devienne un lien sur mobile.
Meta format-detection prêtes à copier.
Le titre Open Graph est ce qui s\'affiche quand votre page est partagée sur les réseaux sociaux. Il peut être différent du titre SEO pour être plus engageant.
Préférez un titre court et accrocheur, 50-70 caractères. Inclure la marque si utile.
MonSite - Recette de crêpes rapides Recette facile : Crêpes moelleuses (5 étapes)
Ex: <meta property="og:title" content="Mon titre OG">
Texte affiché sous le titre lors du partage. Sert à convaincre l\'utilisateur de cliquer.
Évitez les phrases trop longues; 100-160 caractères est souvent un bon compromis.
Si vous décrivez un produit, mettez les bénéfices principaux en 1-2 phrases.
<meta property="og:description" content="Ma description OG">
L\'image améliore fortement le taux de clics lors du partage. Préférez une image 1200x630 (ratio 1.91:1) pour la plupart des réseaux.
JPEG/PNG, poids réduit (<200KB de préférence), dimensions recommandées 1200x630 ou 1080x1080 pour certains réseaux.
Aperçu : l\'image est montrée à gauche du titre/description selon le réseau (ex: Facebook)
<meta property="og:image" content="https://exemple.tld/image.jpg">
Indique le type de contenu pour aider les plateformes à afficher correctement les informations (par ex. article aura date/auteur).
Utilisez 'article' pour posts de blog, 'product' pour pages marchand, 'website' pour pages génériques.
<meta property="og:type" content="article">
Permet de forcer quelle URL est partagée. Utile si vous avez des paramètres ou versions spécifiques.
Utilisez l\'URL canonique quand c\'est possible pour éviter la duplication de partage.
<meta property="og:url" content="https://exemple.tld/page">
Permet d\'indiquer la locale de votre contenu (ex: fr_FR). Utile pour les plateformes qui affichent le contenu selon la langue.
fr_FR, en_US, es_ES
<meta property="og:locale" content="fr_FR">
Le nom du site s\'affiche parfois à côté du titre lors du partage. Utilisez un nom reconnaissable.
Ne surchargez pas ce champ: gardez un nom court et reconnaissable.
<meta property="og:site_name" content="MonSite">
Permet d'afficher votre site comme une application web sur iOS : barre d'adresse masquée et interface plein écran.
Si votre site propose une expérience app-like, réglez sur 'Activer' ; sinon laissez 'Ne pas activer'.
Contrôle l'apparence de la barre d'état iOS lorsque l'app web est lancée en mode plein écran.
Titre affiché sous l'icône si l'utilisateur ajoute votre site à l'écran d'accueil sur iOS.
Equivalent générique de la balise Apple : permet aux PWA et sites d'essayer un comportement app-like.
Utilisez 'cover' pour que le contenu remplisse l'écran entier sur les appareils avec encoche; sinon laissez 'auto'.
CSP protège contre l'exécution de scripts non autorisés et le vol de données. Choisissez une politique adaptée à votre site.
Ancien header pour forcer un mode de compatibilité IE; généralement inutile aujourd'hui mais présent sur des sites legacy.
Empêche le clickjacking en contrôlant si votre page peut être chargée dans une iframe.
Indique la date de publication ou de mise à jour. Utile pour les extraits et résultats de recherche.
Note visible parfois dans les extraits enrichis. Choisissez une valeur honnête et cohérente.
Header HTTP qui demande au navigateur de recharger la page après un délai. À utiliser avec précaution.
Indique au navigateur le type de document et l'encodage. Par défaut, utilisez HTML UTF-8.
Identifiant de l'application Facebook associé au partage et aux insights. Souvent fourni dans le dashboard Facebook Developer.
Identifiant unique de l'application Android (package name). Utilisé pour App Links et deep linking.
URL de deep link vers votre application Android. Si l'app est installée, l'OS peut ouvrir l'app plutôt que la page web.
Nom lisible de l'application Android, affiché lors du deep linking.
Titre succinct utilisé par les moteurs pour les données structurées.
Résumé clair pour les données structurées.
Image associée au produit/événement; préférer image accessible publiquement.
Prix en chiffre sans devise (utiliser priceCurrency pour préciser la devise).
Devise associée au prix (ISO 4217).
Indique si le produit est en stock ou non.
Date de début pour un événement ou offre.
Lieu associé à l'événement ou service.