This page was translated automatically from the English original.
View the original
Balises méta SEO
Génération complète des balises méta SEO incluant Open Graph, Twitter Cards et les données structurées JSON-LD.
Table of Contents
Balises méta SEO
Génération automatique de balises méta SEO pour une meilleure visibilité sur les moteurs de recherche et les réseaux sociaux.
Vue d’ensemble
Le thème génère :
- Balises méta de base (titre, description)
- Balises Open Graph (Facebook, LinkedIn)
- Balises Twitter Card
- URL canoniques
- Informations sur l’auteur
- Données structurées JSON-LD
Balises générées
Balises méta de base
<title>Page Title - Site Title</title>
<meta name="description" content="Page description here">
<meta name="author" content="Author Name">
<link rel="canonical" href="https://yoursite.com/page/">
Balises Open Graph
<meta property="og:title" content="Page Title">
<meta property="og:description" content="Page description">
<meta property="og:type" content="article">
<meta property="og:url" content="https://yoursite.com/page/">
<meta property="og:image" content="https://yoursite.com/image.png">
<meta property="og:site_name" content="Site Title">
Twitter Cards
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Page Title">
<meta name="twitter:description" content="Page description">
<meta name="twitter:image" content="https://yoursite.com/image.png">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@author">
Configuration
Valeurs par défaut du site
# _config.yml
title: "Site Title"
description: "Default site description"
preview: /images/previews/seo-meta-tags.png
url: "https://yoursite.com"
author:
name: "Your Name"
twitter: "@yourusername"
# Default social image
og_image: "/assets/images/og-default.png"
# Twitter username
twitter:
username: "yourusername"
Remplacement par page
---
title: "Custom Page Title"
description: "Custom page description for SEO"
preview: /images/previews/seo-meta-tags.png
image: "/assets/images/custom-og.png"
author: "Different Author"
---
Implémentation
Include SEO
<!-- _includes/content/seo.html -->
{% assign seo_url = site.url | append: site.baseurl %}
{% assign seo_title = page.title | default: site.title %}
{% assign seo_description = page.description | default: site.description %}
<!-- Basic Meta -->
<title>{{ seo_title }} - {{ site.title }}</title>
<meta name="description" content="{{ seo_description }}">
<link rel="canonical" href="{{ seo_url }}{{ page.url }}">
<!-- Open Graph -->
<meta property="og:title" content="{{ seo_title }}">
<meta property="og:description" content="{{ seo_description }}">
<meta property="og:url" content="{{ seo_url }}{{ page.url }}">
<meta property="og:image" content="{{ page.image | default: site.og_image | absolute_url }}">
<meta property="og:type" content="{% if page.layout == 'journals' %}article{% else %}website{% endif %}">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ seo_title }}">
<meta name="twitter:description" content="{{ seo_description }}">
Chargement dans l’en-tête
<head>
{% include content/seo.html %}
</head>
Images d’aperçu
Génération automatique
Le thème peut générer des images d’aperçu automatiquement. Consultez Preview Image Generator.
Configuration manuelle
---
image: "/assets/images/my-post-preview.png"
---
Exigences relatives aux images
| Plateforme | Taille | Ratio |
|---|---|---|
| Open Graph | 1200×630 | 1.91:1 |
| 1200×600 | 2:1 | |
| 1200×627 | 1.91:1 |
Données structurées JSON-LD
Schéma Article
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "{{ page.title }}",
"description": "{{ page.description }}",
"image": "{{ page.image | absolute_url }}",
"datePublished": "{{ page.date | date_to_xmlschema }}",
"dateModified": "{{ page.last_modified_at | default: page.date | date_to_xmlschema }}",
"author": {
"@type": "Person",
"name": "{{ page.author | default: site.author.name }}"
},
"publisher": {
"@type": "Organization",
"name": "{{ site.title }}"
}
}
</script>
Schéma Website
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "{{ site.title }}",
"url": "{{ site.url }}",
"potentialAction": {
"@type": "SearchAction",
"target": "{{ site.url }}/search/?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
</script>
Bonnes pratiques
Balises de titre
- Rester sous 60 caractères
- Inclure le mot-clé principal
- Rendre unique pour chaque page
- Placer les mots importants en premier
Descriptions
- Rester entre 150 et 160 caractères
- Inclure un appel à l’action
- Rendre attractif et unique
- Inclure les mots-clés naturellement
Images
- Utiliser des images de haute qualité
- Inclure un texte alternatif
- Optimiser la taille des fichiers
- Utiliser des noms de fichiers descriptifs
Tests
Test des résultats enrichis de Google
Testez les données structurées sur https://search.google.com/test/rich-results
Débogueur Facebook
Testez Open Graph sur https://developers.facebook.com/tools/debug/
Validateur Twitter
Testez les Twitter Cards sur https://cards-dev.twitter.com/validator
Dépannage
Les images ne s’affichent pas
- Vérifiez l’URL absolue
- Vérifiez que l’image existe
- Videz le cache de la plateforme
- Utiliser les outils de débogage
Description incorrecte
- Vérifier le front matter de la page
- Vérifier la logique de repli
- Vider le cache des moteurs de recherche
Erreurs de données structurées
- Valider avec l’outil Google
- Vérifier les champs obligatoires
- Vérifier les formats de date
Ressources associées
Voir aussi
- [[SEO]]
- [[front-matter]]
- [[Analytics]]