devpack
EnglishDeutsch · StartseiteFrançais · AccueilEspañol · InicioPortuguês (Brasil) · Início
Audit du site

Cette page n’est pas encore traduite en français : elle s’affiche en anglais.

Meta Tag Generator — SEO, Open Graph & Twitter Cards

Fill in one form and get a complete, valid <head> — title, description, canonical, robots, Open Graph, X/Twitter cards, theme color and icons — with live previews and Webflow-specific output.

Mis à jour le

Search basics

The preferred, absolute URL of this page. Also used as og:url.

Open Graph (Facebook, LinkedIn, Slack…)

Absolute URL, ideally 1200 × 630 px (1.91:1), under 5 MB.
Different title/description for social shares

X (Twitter) card

Not required: X falls back to the og: tags when these are missing.

Browser & icons


      

    

    

    

  





  
Where each tag goes in Webflow

  
TagSet it in Webflow

    
Title, meta descriptionPage settings › SEO settings (CMS templates: insert fields)

    
og:title, og:description, og:imagePage settings › Open Graph settings (or tick “Same as SEO”)

    
CanonicalSite settings › SEO › Global canonical tag URL — Webflow then adds a self-referencing canonical to every page; per-page overrides in Page settings

    
html langSite settings › Localization (primary locale)

    
favicon, Apple touch icon (webclip)Site settings › General › Favicon (32×32) and Webclip (256×256)

    
charset, viewportAdded automatically — never duplicate them

    
robots, theme-color, og:site_name, og:locale, twitter:site, extra iconsPaste the Webflow custom code output into Page settings › Custom code › Inside <head> tag (one page) or Site settings › Custom code › Head code (all pages)

  



    
 Vos données ne quittent jamais votre ordinateur. Tout le traitement se fait localement dans votre navigateur.

    
    
    

      
Comment utiliser : Meta Tag Generator
  1. Enter the page title, meta description and canonical URL. The counters warn you before Google would truncate them.
  2. Fill in the Open Graph image, site name and locale, and pick an X card type — the Google, Facebook and X previews update as you type.
  3. Set robots directives, theme color and icon paths if you need them.
  4. Copy the Full <head> output for a hand-coded site, or switch to Webflow custom code to get only the tags Webflow doesn’t generate from its settings.


What are meta tags?


Meta tags are HTML elements in a page’s <head> that describe the page to browsers, search engines and social networks. They are invisible on the page itself but decide how it appears in Google results, how a link unfurls in Slack, LinkedIn or WhatsApp, whether it may be indexed, and how it scales on a phone.


The tags that actually matter


TagUsed byPurpose


<title>Google, browser tabsThe clickable headline in search results — a confirmed relevance signal.


meta descriptionGoogle, BingOften used as the snippet under the title; affects click-through, not rankings.


link rel="canonical"Google, BingNames the preferred URL when the same content is reachable at several addresses (parameters, trailing slashes, http/https).


meta robotsAll major crawlersnoindex keeps a page out of results; max-image-preview:large allows large image thumbnails in Discover.


og:*Facebook, LinkedIn, Slack, Discord, iMessage…The Open Graph protocol — title, description, image and type of a shared link.


twitter:*XCard layout (summary or summary_large_image) and account attribution; falls back to og: tags.


viewport, charsetBrowsersCorrect mobile scaling and text encoding.




The old meta keywords tag is deliberately not generated: Google has ignored it for well over a decade, and it only reveals your keyword strategy to competitors.


Common mistakes this generator avoids


    

  • Relative og:image URLs. Social scrapers need an absolute https:// URL. Add og:image:width and og:image:height so the image renders on the very first share instead of after a re-scrape.
    • 

  • Noindex plus canonical. Pointing a canonical at another URL while also setting noindex sends mixed signals; pick one.
    • 

  • Unescaped quotes. A " inside a description breaks the attribute. All values are HTML-escaped in the output.
    • 

  • Duplicate tags. Platforms such as Webflow, WordPress SEO plugins and Shopify already output many tags. Adding a second <title> or og:image by hand leaves crawlers to guess which one wins.
    • 



Webflow: settings fields vs custom code


Webflow writes the title, description, Open Graph title/description/image, canonical, charset and viewport for you from Page and Site settings, so pasting a full head into custom code would duplicate them. Choose Webflow custom code above and the output contains only what Webflow can’t set natively — robots directives, theme-color, og:site_name, og:locale, X account handles and extra icon links. On CMS template pages, the same custom code box accepts inserted CMS fields. After publishing, verify the live output with the Meta Tag Checker and the Open Graph Checker, or design a share image with the OG Image Generator.
Aussi recherché comme : meta tags, og tags generator, open graph generator, twitter card generator, html meta tags, seo tags, head tags, social meta tags.
Outils complémentaires : Meta Tag Generator
  • SERP Preview — Write a title tag and meta description and see exactly where Google is likely to cut them off — measured in pixels, not just characters, on desktop and mobile.
  • Générateur de favicons — Créez un ensemble complet de favicons à partir d'un logo, d'une lettre ou d'un emoji : un fichier favicon.ico en plusieurs tailles, une icône Apple Touch, des icônes Android/PWA, un Webclip Webflow, le manifeste Web et les balises HTML à insérer.
  • Générateur de balisage Schema — Choisissez un type de schéma, remplissez le formulaire et copiez le code JSON-LD prêt à être collé.
  • Guide explicatif sur le fichier robots.txt — Les règles du fichier robots.txt sont courtes, mais on peut facilement se tromper en les interprétant.
Questions fréquentes
Do meta tags still matter for SEO?
The title tag is a ranking factor and the meta description strongly influences clicks. Robots and canonical tags control what gets indexed. The meta keywords tag, on the other hand, is ignored by Google.
What size should an Open Graph image be?
1200 × 630 pixels (a 1.91:1 ratio) works on Facebook, LinkedIn and X’s large card. Keep important text away from the edges, because some apps crop to a square or 2:1.
Do I need both Open Graph and Twitter tags?
Not entirely. X reads og:title, og:description and og:image as fallbacks, so you only need twitter:card (and optionally twitter:site) on top of Open Graph.
Why doesn’t Facebook or LinkedIn show my new image?
Both cache link previews. After changing tags, re-scrape the URL in Facebook’s Sharing Debugger or LinkedIn’s Post Inspector, and make sure the image URL is absolute and publicly reachable.
Where do I paste meta tags in Webflow?
Use Page settings for title, description and Open Graph fields. Paste the remaining tags (robots, theme-color, og:site_name…) into Page settings › Custom code › Inside <head> tag, or Site settings › Custom code for every page.
Puis-je installer Meta Tag Generator en tant qu’application web et l’utiliser hors ligne ?
Oui. Meta Tag Generator est une application web installable (PWA) : elle s’installe depuis votre navigateur, sans passer par une boutique d’applications. Cliquez sur « Installer l’application » en haut de cette page dans Chrome ou Edge (Windows, macOS, Linux, ChromeOS) ; sur Android, utilisez « Partager » → « Ajouter à l’écran d’accueil » sur iPhone et iPad ; ou « Fichier » → « Ajouter au Dock » dans Safari 17+ sur Mac. L’application s’ouvre alors dans sa propre fenêtre avec sa propre icône, et comme elle s’exécute entièrement dans votre navigateur, elle continue de fonctionner hors ligne. Firefox sur ordinateur de bureau ne permet pas d’installer d’applications web. Comment fonctionne l’installation.

      
    

    
    
Outils similaires
localSERP PreviewWrite a title tag and meta description and see exactly where Google is likely to cut them off — measured…apiMeta Tag CheckerSee exactly how Google is likely to display your page: title and description measured in pixels, desktop…apiOpen Graph CheckerPreview how your link will look when shared on Facebook, LinkedIn, X and Slack. We flag missing tags, test…localGénérateur d’images OGCréez en quelques secondes une image d'aperçu de lien soignée pour Facebook, LinkedIn, X, Slack et…localGénérateur de faviconsCréez un ensemble complet de favicons à partir d'un logo, d'une lettre ou d'un emoji : un fichier…localGénérateur de balisage SchemaChoisissez un type de schéma, remplissez le formulaire et copiez le code JSON-LD prêt à être collé. Les…