urltoolskit.org
URL utilities, in the browser
Say hi →

OG / Twitter Card meta builder

generate <meta> tags + mock unfurl previews

Form-driven generator for Open Graph + Twitter Card + Schema.org <meta> tags, with mock previews of how Slack, Discord, X, LinkedIn, Facebook, iMessage, and Telegram will unfurl your URL.

Output


      

        
      

      
Previews

      

      
Ready.

    


    
How to use

    
    
      
  1. Fill in Title, Description, Image URL (or drop an image — it stays local), Site URL, Site name, Type (article / website / video / product).
    2. 
      
  2. (Optional) Fill the Twitter tab — handle, card type (summary / summary_large_image / player / app).
    3. 
      
  3. The Output panel shows the full <meta> block ready to paste into your <head>.
    4. 
      
  4. The Preview tab renders mock unfurls for 7 platforms side-by-side.
    5. 
      
  5. Copy as HTML or Copy as Next.js metadata (or as Nuxt / as Astro) — pick the framework you're using.
    6. 
    


    
Image sizing

    
Image must be at least 1200×630 for X "summary_large_image" and LinkedIn previews to look good. The tool warns you if your dropped image is smaller. Facebook prefers the same; iMessage shows whatever you give it; Slack and Discord crop the edges. Use 1200×630 as the universal default.


    
FAQ

    

      Why are the previews mocks and not live?
      
To fetch a real Open Graph preview, we'd need to fetch the destination URL from a server — and arbitrary cross-origin fetches are blocked in the browser. The mocks render what the meta tags say; the real unfurl depends on what each platform's bot scrapes.

    

    

      Does Facebook still use OG?
      
Yes — Open Graph remains the canonical way to control how a URL unfurls on Facebook, Slack, Discord, iMessage, LinkedIn, and most other platforms. Twitter Cards layer on top for X-specific behaviour.

    

    

      What about Schema.org / JSON-LD?
      
Important for SEO (Google uses it heavily), but separate from social unfurls. Add it manually below the OG block.

    

    

      Can I import existing tags?
      
Not yet — paste your existing tags into the URL explainer as a structured input for now.