Skip to content

Open Graph & Meta Tag Generator

Generate Open Graph, Twitter Card & SEO meta tags with a live Google, Facebook & X preview. 100% free, in-browser, no signup — copy & paste the code.

No Tracking Runs in Browser Free
Everything runs in your browser. Your content and image URL never leave this page — no upload, no signup.
Basic SEO
Open Graph (Facebook, LinkedIn…)
X (Twitter) Card
Advanced & icons
Checks
    Generated <head> tags 
     
      
     Import from existing <head> (parsed locally, nothing uploaded) 
       
     
      
     Verify after deploy: Facebook LinkedIn Google Rich Results 
     
     
      
      
       Tag output and platform specs verified against the Open Graph protocol (ogp.me), Google Search Central, and the current Facebook, X, LinkedIn and Discord sharing documentation. — Go Tools Team · Jul 15, 2026  
          
     
    What are meta tags & Open Graph?
     
     
    Meta tags are snippets of HTML in your page's <head> that describe the page to browsers, search engines and social platforms. The classic SEO tags are the <title>, the meta description and the canonical link. Open Graph tags (og:title, og:type, og:image, og:url and friends) are a protocol, originally from Facebook, that controls the title, description and image shown when your link is shared — and almost every platform reads them, including LinkedIn, Slack, Discord, WhatsApp, Pinterest and Telegram.
    Twitter/X uses its own twitter:card tags but falls back to your Open Graph tags when they are missing, so a good set of OG tags plus a single twitter:card value covers every network. This generator writes all of these tags, adds optional JSON-LD structured data, and previews the result live — so you never have to hand-write them or guess how a share will look.
     
      
      
     
    Social image & tag specs by platform
     
     
     
    Open Graph (Facebook & LinkedIn)
     
    Both read og:title, og:description, og:image and og:url. Recommended image 1200×630 (1.91:1). Facebook caches ~30 days; LinkedIn ~7 days — re-scrape with their debuggers after deploy.
     
     
    X (Twitter) Card
     
    twitter:card is required (summary_large_image or summary). X falls back to og:* for the rest. A single 1200×630 image works for both OG and X; images under 300×157 downgrade a large card to a small one.
     
     
    Slack & Discord
     
    Slack reads Twitter Card then Open Graph and can show two extra fields via twitter:label/data. Discord reads Open Graph and uniquely uses theme-color for the embed's accent bar.
     
     
    WhatsApp & Telegram
     
    WhatsApp needs og:title and og:image with the metadata near the top of the HTML; Telegram reads Open Graph and renders reliably only from JPEG or PNG images.
     
     
    Pinterest Rich Pins
     
    Pinterest reads Open Graph or Schema.org. An Article Rich Pin needs og:type=article plus article:published_time and article:author — all generated here when you pick the article type.
     
     
    Google search snippet
     
    The live desktop and mobile SERP preview measures your title and description in pixels — not just characters — so you see truncation risk before Google does.
     
     
     
          
     
    Meta tag examples
     
     
     
    Website homepage
     
     
    Title: Acme — Ship faster
Description: The all-in-one platform for modern teams.
URL: https://acme.com
Image: https://acme.com/og/home.png (1200×630)
     
    <title>Acme — Ship faster</title>
<meta name="description" content="The all-in-one platform for modern teams.">
<link rel="canonical" href="https://acme.com">

<meta property="og:title" content="Acme — Ship faster">
<meta property="og:type" content="website">
<meta property="og:image" content="https://acme.com/og/home.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:url" content="https://acme.com">

<meta name="twitter:card" content="summary_large_image">
     
     
    A homepage only needs the four required Open Graph tags plus a title, description and canonical. Because the image is 1200×630 the width and height are filled in automatically, so the very first Facebook share renders instantly instead of blank.
     
     
    Blog article (with article:* + JSON-LD)
     
     
    og:type: article
Title: The Complete Guide to Open Graph Tags
Author: Ada Lovelace
Published: 2026-07-15
     
    <meta property="og:title" content="The Complete Guide to Open Graph Tags">
<meta property="og:type" content="article">
<meta property="og:image" content="https://blog.example.com/og/guide.png">
<meta property="og:url" content="https://blog.example.com/open-graph-guide">
<meta property="article:published_time" content="2026-07-15T00:00:00Z">
<meta property="article:author" content="Ada Lovelace">

<meta name="twitter:card" content="summary_large_image">

<script type="application/ld+json">{ "@type": "Article", "headline": "The Complete Guide to Open Graph Tags", "datePublished": "2026-07-15T00:00:00Z" }</script>
     
     
    Choosing the article type unlocks the article:published_time and article:author properties and generates matching Article JSON-LD, so search engines and Pinterest Rich Pins get structured data for free.
     
     
    Twitter/X inherits Open Graph
     
     
    twitter:card: summary_large_image
Inherit title/description/image from OG: on
     
    <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@acme">
     
     
    X reads your Open Graph tags when the matching twitter:* tag is missing, so you only need twitter:card. The generator never emits an empty twitter:image, which would break that fallback.
     
     
     
          
     
    How to add Open Graph tags to your site
     
       
    1.  1 
       
      Enter title, description & URL
       
      Type your page title, meta description and canonical URL. The pixel meter shows whether they fit in Google's search snippet.
       
       
    2.  2 
       
      Add an og:image and pick the type
       
      Paste a 1200×630 image URL and choose website, article, product or profile — the matching Open Graph fields and JSON-LD appear automatically.
       
       
    3.  3 
       
      Check the live previews
       
      Switch between the Google, Facebook, X, LinkedIn, Slack and Discord tabs to see exactly how your link will look before you ship it.
       
       
    4.  4 
       
      Copy into your 
       
      Copy the full tag block (or one section) and paste it inside the  of your HTML. Verify after deploy with the Facebook and LinkedIn debuggers.
       
       
      5.  
     
      
     
    Common Open Graph mistakes
     
     
     
    Relative og:image path
     
    A path like /cover.png works in your editor but is blank when shared, because crawlers need an absolute URL.
     
     
     ✗ Wrong 
    <meta property="og:image" content="/cover.png">
     
     
     ✓ Correct 
    <meta property="og:image" content="https://example.com/cover.png">
     
     
     
     
    Missing og:url
     
    Without a canonical og:url, share counts split across URL variants and platforms may pick the wrong address.
     
     
     ✗ Wrong 
    <!-- no og:url -->
     
     
     ✓ Correct 
    <meta property="og:url" content="https://example.com/page">
     
     
     
     
    Image too small or wrong ratio
     
    Facebook ignores images below 200×200 and crops anything far from 1.91:1.
     
     
     ✗ Wrong 
    600×600 og:image
     
     
     ✓ Correct 
    1200×630 og:image (1.91:1)
     
     
     
     
    Forgetting twitter:card
     
    Even with full Open Graph tags, X renders no card unless twitter:card is set.
     
     
     ✗ Wrong 
    <!-- OG only, no twitter:card -->
     
     
     ✓ Correct 
    <meta name="twitter:card" content="summary_large_image">
     
     
     
     
    Empty twitter:image breaks fallback
     
    An empty twitter:image stops X from falling back to og:image — omit the tag instead of leaving it blank.
     
     
     ✗ Wrong 
    <meta name="twitter:image" content="">
     
     
     ✓ Correct 
    <!-- omit it; X uses og:image -->
     
     
     
     
    Charset placed too late
     
    The charset declaration must appear within the first 1024 bytes of the document or it is ignored.
     
     
     ✗ Wrong 
    <meta charset> after many tags
     
     
     ✓ Correct 
    <meta charset="utf-8"> first in <head>
     
     
     
     
     
      
     
    Common use cases
     
     
     
    Launching a landing page
     
    Generate the full head block for a new marketing page so it looks polished the moment someone shares the link on X, LinkedIn or Slack.
     
     
    Blog & article previews
     
    Add article:published_time, article:author and Article JSON-LD so posts qualify for Pinterest Rich Pins and rich social cards.
     
     
    Fixing a broken share
     
    Import your current tags, spot the missing og:image or wrong dimension in the checks panel, fix it, and re-scrape with the debugger links.
     
     
    Framework head snippets
     
    Copy a clean, correct tag set to drop into a static site, a CMS template, or a server-rendered head partial.
     
     
     
      
     
    How the generator works
     
     
     
    Live, in-browser preview
     
    Every card is rendered from the values you type, never by fetching your URL. That keeps previews instant and private, and it is the only honest way to preview before a page is deployed.
     
     
    Pixel-accurate SERP meter
     
    Google truncates titles and descriptions by pixel width, not character count. A canvas measures your text in the same font so the meter turns amber exactly when the snippet would be cut.
     
     
    Client-side image checking
     
    Your og:image URL is loaded into an Image in your browser to read its real width and height, then checked against 1200×630 and the card's aspect ratio. Cross-origin images still report their size, so the check works without any upload.
     
     
    Complete, modern tag set
     
    Basic SEO, Open Graph, Twitter Card and JSON-LD in one block, with charset emitted first so it lands within the first 1024 bytes. Legacy tags like meta keywords are off by default.
     
     
     
      
     
    Meta tag best practices
     
     
     
    Use absolute HTTPS URLs
     
    og:image and og:url must be full https://… URLs. Relative paths work locally but render blank when a crawler fetches the live page.
     
     
    Always set og:image:width & height
     
    Declaring the dimensions lets platforms lay out the card immediately, so the first share is not blank while they fetch the image asynchronously.
     
     
    Keep canonical and og:url the same
     
    Point both at the one canonical URL so share counts and search signals are not split across URL variants.
     
     
    Write for the pixel budget
     
    Aim for a title around 50–60 characters and a description around 155 — but trust the pixel meter, since Google measures width, not character count.
     
     
    Render tags server-side
     
    Facebook, LinkedIn, WhatsApp, Telegram and Discord crawlers do not run JavaScript, so Open Graph tags must be in the static or server-rendered HTML.
     
     
     
      
     
    Frequently asked questions
     
     
     What is a meta tag generator? 
     A meta tag generator builds the HTML tags that go inside your page's <head> — the <title>, meta description, canonical link, Open Graph tags for Facebook and LinkedIn, and Twitter/X Card tags. This tool generates all of them at once, shows a live preview of how your link will look on Google, Facebook, X, LinkedIn, Slack and Discord, and lets you copy the code with one click. Everything runs in your browser. 
     
     How do I add Open Graph tags to my website? 
     Fill in your title, description, canonical URL and an og:image URL, choose the Open Graph type, then copy the generated tags and paste them inside the <head> of your HTML. Because Facebook, LinkedIn, WhatsApp and Telegram crawlers do not run JavaScript, the tags must be present in the server-rendered or static HTML, not injected by client-side scripts. 
     
     What size should an Open Graph image be? 
     The recommended og:image size is 1200×630 pixels, a 1.91:1 aspect ratio, which also satisfies X's summary_large_image card. Facebook ignores images smaller than 200×200 and shows a small square for anything under 600×315. Always include og:image:width and og:image:height so the first share renders instantly, and serve the image over HTTPS at a public URL that is not blocked by robots.txt. 
     
     Is the twitter:card tag required? 
     Yes — twitter:card is the one Twitter/X tag you must include, otherwise X will not render a card even when your Open Graph tags are present. Set it to summary_large_image for a big image or summary for a small square thumbnail. For everything else (title, description, image) X falls back to your og:* tags, so this tool leaves them out by default to keep the markup clean. 
     
     Do meta tags help SEO? 
     The <title> and canonical tag matter for SEO; the meta description is not a direct ranking factor but influences click-through by shaping the search snippet. Open Graph and Twitter Card tags do not affect Google rankings, but they control how your links look when shared, which drives social traffic. Google may rewrite your title in results, so write a clear, unique one and keep the important words first. 
     
     Does this tool upload my content or images? 
     No. Everything is generated locally in your browser with JavaScript. Your title, description and image URL never leave the page — there is no server, no upload and no account. The og:image is loaded only in your own browser to preview it and read its dimensions. 
     
     Can I import meta tags I already have? 
     Yes. Open the Import panel, paste your existing <meta> tags, and the tool parses them locally with the browser's own HTML parser to fill in the form — no network request, nothing uploaded. It is the privacy-first alternative to tools that fetch a live URL from their server. 
     
     Why does my updated preview still show the old image on Facebook or LinkedIn? 
     Platforms cache Open Graph data: Facebook for about 30 days, LinkedIn for about 7 days. After you deploy, re-scrape the page with the Facebook Sharing Debugger or LinkedIn Post Inspector to refresh the cached title, description and image. The debugger links are listed under the generated code. 
     
     
     
     
       
      
     
     
    Related Tools
      View all tools →
 
     
      
     
      
      
      
     
     
    cURL Command Generator & Builder
     
     
    Web & API
     
    Build curl commands in your browser — set method, headers, auth, and body, get a copy-ready command instantly. Presets for Bearer, POST JSON, file upload. Free, private, no signup.
     
     
       
          
     
      
      
      
     
     
    htpasswd Generator — bcrypt, Apache MD5 (apr1) & Basic Auth
     
     
    Web & API
     
    Generate htpasswd entries with bcrypt, Apache MD5 (apr1), SHA-1 & more. Get ready-to-paste Apache, nginx & Docker config. 100% in your browser — no upload.
     
     
       
          
     
      
      
      
     
     
    Number Base Converter — Binary, Hex, Decimal & Octal
     
     
    Conversion Tools
     
    Convert between binary, hex, decimal, octal and any base (2-36) instantly. Free, private — all processing in your browser.
     
     
       
          
     
      
      
      
     
     
    Base64 Decoder & Encoder
     
     
    Encoding & Formatting
     
    Decode and encode Base64 online for free. Real-time conversion with full UTF-8 and emoji support. 100% private — runs in your browser. No signup needed.
     
     
       
          
     
      
      
      
     
     
    Base64 to Image Converter
     
     
    Encoding & Formatting
     
    Decode a Base64 string or data URI back into an image in your browser. Preview, read dimensions & MIME, then download as PNG, JPG, GIF, SVG. No upload.
     
     
       
          
     
      
      
      
     
     
    Bcrypt Hash Generator & Verifier
     
     
    Security Tools
     
    Generate and verify bcrypt password hashes online — adjustable cost, $2b$/$2a$/$2y$ prefixes. 100% in your browser; your password is never uploaded.