Que sont les méta-tags HTML ?

Les méta-tags HTML sont des éléments dans la section qui fournissent des métadonnées sur la page, lues par les moteurs de recherche, les réseaux sociaux et les navigateurs.

Qu'est-ce qu'Open Graph ?

Open Graph (OG) est un protocole de Facebook qui permet aux pages web de devenir des objets riches lorsqu'elles sont partagées sur les réseaux sociaux.

Que sont les Twitter Cards ?

Les Twitter Cards permettent d'attacher des expériences média riches aux tweets. Le type summary_large_image est le plus populaire.

Qu'est-ce qu'une URL canonique ?

Une URL canonique spécifie la version préférée d'une page lorsque plusieurs URL pointent vers le même contenu.

Quelle longueur pour mon titre et ma description meta ?

Le titre meta doit comporter moins de 60 caractères. La description meta doit comporter 120 à 155 caractères.

Générateur de Méta-Tags

Génère des méta-tags HTML pour SEO, Open Graph et Twitter Cards.

Titre

18/60

Auteur

Description

50/155

Mots-clés

Robots

URL canonique

URL de l'image OG

Type de carte Twitter

Aperçu réseaux sociaux

OG Image: https://example.com/og-image.png

https://example.com/page

My Awesome Website

A short description of this page for SEO purposes.

HTML généré

<!-- Primary Meta Tags -->
<title>My Awesome Website</title>
<meta name="title" content="My Awesome Website" />
<meta name="description" content="A short description of this page for SEO purposes." />
<meta name="keywords" content="web, tools, free" />
<meta name="author" content="Author Name" />
<meta name="robots" content="index, follow" />
<link rel="canonical" href="https://example.com/page" />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="My Awesome Website" />
<meta property="og:description" content="A short description of this page for SEO purposes." />
<meta property="og:image" content="https://example.com/og-image.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://example.com/page" />
<meta property="twitter:title" content="My Awesome Website" />
<meta property="twitter:description" content="A short description of this page for SEO purposes." />
<meta property="twitter:image" content="https://example.com/og-image.png" />

À propos de cet outil

Les méta-tags sont des instructions invisibles que vous ajoutez au HTML de votre site web pour dire aux moteurs de recherche, aux plateformes de réseaux sociaux et aux navigateurs ce que votre page contient. Elles contrôlent comment votre site apparaît dans les résultats de recherche Google et comment il s'affiche quand quelqu'un partage votre lien sur Facebook, Twitter ou LinkedIn. Sans méta-tags appropriées, les moteurs de recherche peuvent mal interpréter votre contenu et vos liens paraîtront simples lorsqu'ils seront partagés sur les réseaux sociaux.

Ce générateur de méta-tags vous permet de créer rapidement toutes les méta-tags importantes dont votre site web a besoin : titre, description, mots-clés, auteur, directives robots et URL canoniques. Il génère également des balises Open Graph pour contrôler l'apparence de votre page sur les réseaux sociaux et des Twitter Cards pour améliorer les tweets. Remplissez simplement les informations de votre page, copiez le code HTML généré et collez-le dans la section <head> de votre page. L'aperçu en direct montre exactement comment votre page s'affichera lorsqu'elle sera partagée sur les plateformes sociales.

Les développeurs web, créateurs de contenu et spécialistes en SEO utilisent cet outil pour optimiser leur flux de travail et éviter les erreurs de syntaxe. Que vous lanciez un nouveau blog, optimisiez une page de produit de commerce électronique ou assuriez que le contenu dupliqué n'affecte pas votre classement, ce générateur économise du temps et garantit la cohérence sur l'ensemble de votre site.

Questions Fréquentes

Implémentation du Code

def generate_meta_tags(
    title: str,
    description: str,
    url: str,
    image: str = "",
    site_name: str = "",
    twitter_handle: str = "",
    locale: str = "en_US",
) -> str:
    lines = []
    lines.append(f'<title>{title}</title>')
    lines.append(f'<meta name="description" content="{description}">')
    # Open Graph
    lines.append(f'<meta property="og:title" content="{title}">')
    lines.append(f'<meta property="og:description" content="{description}">')
    lines.append(f'<meta property="og:url" content="{url}">')
    lines.append(f'<meta property="og:type" content="website">')
    lines.append(f'<meta property="og:locale" content="{locale}">')
    if site_name:
        lines.append(f'<meta property="og:site_name" content="{site_name}">')
    if image:
        lines.append(f'<meta property="og:image" content="{image}">')
        lines.append(f'<meta property="og:image:width" content="1200">')
        lines.append(f'<meta property="og:image:height" content="630">')
    # Twitter Card
    card = "summary_large_image" if image else "summary"
    lines.append(f'<meta name="twitter:card" content="{card}">')
    lines.append(f'<meta name="twitter:title" content="{title}">')
    lines.append(f'<meta name="twitter:description" content="{description}">')
    if twitter_handle:
        lines.append(f'<meta name="twitter:site" content="{twitter_handle}">')
    if image:
        lines.append(f'<meta name="twitter:image" content="{image}">')
    return "\n".join(lines)

print(generate_meta_tags(
    title="My Page",
    description="A great page.",
    url="https://example.com",
    image="https://example.com/og.png",
    site_name="Example",
    twitter_handle="@example",
))

Comments & Feedback

Comments are powered by Giscus. Sign in with GitHub to leave a comment.