<!-- Open Graph --> <meta property="og:title" content="My Amazing Article" /> <meta property="og:description" content="A short, compelling description shown when this page is shared on social media platforms." /> <meta property="og:url" content="https://example.com/articles/my-article" /> <meta property="og:image" content="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=630&fit=crop" /> <meta property="og:site_name" content="Example Site" /> <meta property="og:type" content="article" /> <meta property="og:locale" content="en_US" /> <!-- Twitter Card --> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@example" /> <meta name="twitter:title" content="My Amazing Article" /> <meta name="twitter:description" content="A short, compelling description shown when this page is shared on social media platforms." /> <meta name="twitter:image" content="https://images.unsplash.com/photo-1517694712202-14dd9538aa97?w=1200&h=630&fit=crop" />
About Open Graph Meta Generator
Whether a link shows a title, description, and large image when shared to WeChat, Twitter, LinkedIn, or Slack depends on the Open Graph tags in the page head. This tool generates a complete set of og: and twitter: meta tags locally in your browser from the title, description, image, URL, and type you enter, ready to paste into the head. It focuses on the Open Graph protocol (distinct from a general Meta Tag generator) to help you craft attractive social share cards, assembling everything on your machine with nothing uploaded. Tip: Bookmark this tool for quick access during your web development work. All processing happens locally in your browser with no installation required.
How to Use
- Open the Open Graph Meta Generator tool page
- Enter or paste your data into the input area
- View the real-time results and use the copy button to get the output
Use Cases
- Share cards — Generate og tags for an article or landing page so links show a big-image title preview on social platforms.
- Twitter large image — Set twitter:card to summary_large_image so tweets display a striking banner card.
- Multilingual sites — Generate tags with og:locale per language page to improve sharing abroad.
- E-commerce products — Use og:type product so product links carry an image and title when shared.
- Bulk templating — Produce one standard template, then swap title and image fields to apply it across pages fast.
- Social preview debug — Generate og tags with placeholder values and test how the preview renders on a social sharing debugger.
- Video/article embeds — Configure og:video or og:audio tags so media links show inline players on supported platforms.
FAQ
How do Open Graph tags differ from ordinary meta tags?
Open Graph is a protocol from Facebook, widely adopted by social platforms, using property="og:*" to control share previews; our Meta Tag generator leans toward SEO tags like description, keywords, and viewport — different purposes.
What size should og:image be?
Use 1200x630 (about 1.91:1); most platforms crop to it, and too-small images may be ignored or shown small. Prefer an absolute URL and make sure crawlers can access the image publicly.
Why does sharing still show old content after I changed the tags?
Social platforms cache crawl results; use the matching debugger (Facebook Sharing Debugger, Twitter Card Validator) to re-scrape and refresh the cache before new content appears.
Are twitter: tags required?
Not required, but they give X/Twitter a nicer card style. Twitter falls back to og: tags when twitter: tags are missing, so providing both is safest.
What should og:url contain?
The page's canonical absolute address (with https) as the content's unique identifier, so multiple URLs with tracking parameters are not treated as different pages and share counts aggregate correctly.
Any browser compatibility requirements?
This tool works in all modern browsers (Chrome, Firefox, Edge, Safari). No plugins or extensions required.
Can I use it offline?
After initial load, most features work offline. The core logic runs entirely in your browser with no network dependency.
Comments
💬 Comments are stored locally in your browser. Configure Giscus for cloud-based comments.