Dev Tools

Générateur Meta Tags

Générez tous vos meta tags HTML : SEO, Open Graph et Twitter Cards. Prévisualisation Google incluse.

0/60
0/160

Questions fréquentes

Pourquoi les meta tags sont-ils importants pour le SEO ?

Les meta tags fournissent aux moteurs de recherche des informations structurées sur votre page : le titre (balise title) et la description meta apparaissent directement dans les résultats Google.

Un titre optimisé (50-60 caractères) et une description accrocheuse (150-160 caractères) améliorent le taux de clic (CTR) sans impact direct sur le classement.

Qu'est-ce que l'Open Graph (OG) ?

L'Open Graph est un protocole créé par Facebook permettant de contrôler l'apparence de votre page lorsqu'elle est partagée sur les réseaux sociaux (Facebook, LinkedIn, WhatsApp).

Les balises og:title, og:description, og:image et og:url définissent le titre, la description, l'image et l'URL affichés dans l'aperçu du lien.

Quelle taille pour l'image Open Graph ?

La taille recommandée pour une image Open Graph est 1200 × 630 pixels (ratio 1.91:1). Pour les Twitter Cards de type summary_large_image, la même taille est idéale.

L'image doit être accessible publiquement via une URL HTTPS et peser moins de 8 Mo.

Quelle est la différence entre og:title et la balise title ?

La balise est utilisée par les moteurs de recherche pour l'affichage dans les SERP et l'onglet du navigateur. L'og:title est utilisée spécifiquement pour les partages sociaux. <br><br>Il est recommandé d'avoir des valeurs cohérentes mais on peut adapter le ton : plus informatif pour le SEO, plus engageant pour le social.<!----></p></div></details><details class="faq-item group rounded-xl border border-[var(--color-border)] bg-[var(--color-bg-elevated)] overflow-hidden transition-all duration-200 hover:border-[var(--color-primary-subtle)] hover:shadow-[var(--shadow-sm)]"><summary class="cursor-pointer px-5 py-4 font-medium text-sm select-none flex items-center justify-between gap-3"><span>Qu'est-ce que la balise canonical ?</span> <svg class="w-4 h-4 text-[var(--color-text-tertiary)] shrink-0 transition-transform duration-300 ease-[var(--ease-spring)] group-open:rotate-180" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="m19 9-7 7-7-7"></path></svg></summary> <div class="px-5 pb-5"><p class="text-sm text-[var(--color-text-secondary)] leading-relaxed"><!---->La balise canonical (<link rel='canonical' href='...'>) indique aux moteurs de recherche l'URL de référence d'une page, évitant les problèmes de contenu dupliqué. <br><br>Si votre page est accessible via plusieurs URLs (avec/sans www, avec/sans slash final, avec paramètres), la canonical pointe vers la version officielle.<!----></p></div></details><!--]--></div></section> <section class="mb-14"><p class="text-sm text-[var(--color-text-secondary)] mb-4">Découvrez nos autres outils pour développeurs :</p> <!--[0--><div class="grid grid-cols-1 sm:grid-cols-2 gap-2.5"><!--[--><!--[-1--><div class="flex items-center gap-3 p-4 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border)] opacity-50 cursor-default"><div class="w-8 h-8 rounded-lg bg-[var(--color-bg-elevated)] border border-[var(--color-border)] flex items-center justify-center shrink-0"><svg class="w-3.5 h-3.5 text-[var(--color-text-tertiary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg></div> <span class="text-sm font-medium text-[var(--color-text-tertiary)]">Testeur Regex</span> <span class="ml-auto text-xs text-[var(--color-text-tertiary)] font-medium">Bientôt</span></div><!--]--><!--[0--><a href="/outils/formateur-json" class="group flex items-center gap-3 p-4 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border)] hover:border-[var(--color-primary-subtle)] hover:shadow-md transition-all duration-200"><div class="w-8 h-8 rounded-lg bg-[var(--color-primary-light)] flex items-center justify-center shrink-0 group-hover:bg-[var(--color-primary-subtle)] transition-colors"><svg class="w-3.5 h-3.5 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></div> <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)] transition-colors">Formateur JSON</span></a><!--]--><!--[0--><a href="/outils/encodeur-decodeur-base64" class="group flex items-center gap-3 p-4 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border)] hover:border-[var(--color-primary-subtle)] hover:shadow-md transition-all duration-200"><div class="w-8 h-8 rounded-lg bg-[var(--color-primary-light)] flex items-center justify-center shrink-0 group-hover:bg-[var(--color-primary-subtle)] transition-colors"><svg class="w-3.5 h-3.5 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></div> <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)] transition-colors">Encodeur/Décodeur Base64</span></a><!--]--><!--[0--><a href="/outils/decodeur-jwt" class="group flex items-center gap-3 p-4 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border)] hover:border-[var(--color-primary-subtle)] hover:shadow-md transition-all duration-200"><div class="w-8 h-8 rounded-lg bg-[var(--color-primary-light)] flex items-center justify-center shrink-0 group-hover:bg-[var(--color-primary-subtle)] transition-colors"><svg class="w-3.5 h-3.5 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></div> <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)] transition-colors">Décodeur JWT</span></a><!--]--><!--[0--><a href="/outils/generateur-expression-cron" class="group flex items-center gap-3 p-4 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border)] hover:border-[var(--color-primary-subtle)] hover:shadow-md transition-all duration-200"><div class="w-8 h-8 rounded-lg bg-[var(--color-primary-light)] flex items-center justify-center shrink-0 group-hover:bg-[var(--color-primary-subtle)] transition-colors"><svg class="w-3.5 h-3.5 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></div> <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)] transition-colors">Générateur Expression Cron</span></a><!--]--><!--[0--><a href="/outils/formateur-sql" class="group flex items-center gap-3 p-4 rounded-xl bg-[var(--color-bg-elevated)] border border-[var(--color-border)] hover:border-[var(--color-primary-subtle)] hover:shadow-md transition-all duration-200"><div class="w-8 h-8 rounded-lg bg-[var(--color-primary-light)] flex items-center justify-center shrink-0 group-hover:bg-[var(--color-primary-subtle)] transition-colors"><svg class="w-3.5 h-3.5 text-[var(--color-primary)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"></path></svg></div> <span class="text-sm font-medium text-[var(--color-text)] group-hover:text-[var(--color-primary)] transition-colors">Formateur SQL</span></a><!--]--><!--]--></div><!--]--><!----></section> <div class="text-xs text-[var(--color-text-tertiary)] leading-relaxed"><p>Balises générées selon les recommandations Google (Search Central), le protocole Open Graph (ogp.me) et les spécifications Twitter Cards (developer.twitter.com). Prévisualisation non contractuelle.</p></div><!----></article><!----><!--]--><!----></main> <footer class="border-t border-[var(--color-border)] mt-20"><div class="max-w-3xl mx-auto px-5 py-10"><div class="flex flex-col sm:flex-row items-center justify-between gap-4 text-sm text-[var(--color-text-tertiary)]"><p>© 2026 outils.garryhq.cloud</p> <div class="flex items-center gap-5"><a href="/mentions-legales" class="hover:text-[var(--color-text)] transition-colors">Mentions légales</a> <a href="/confidentialite" class="hover:text-[var(--color-text)] transition-colors">Confidentialité</a></div></div></div></footer></div><!--]--><!--]--> <!--[-1--><!--]--><!--]--> <script> { __sveltekit_q0i7ec = { base: new URL("..", location).pathname.slice(0, -1) }; const element = document.currentScript.parentElement; Promise.all([ import("../_app/immutable/entry/start.Baso0yvS.js"), import("../_app/immutable/entry/app.DGqEr-Fa.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 114], data: [null,null], form: null, error: null }); }); } </script> </div> </body> </html>