What is Open Graph & Twitter Card Builder?
Open Graph and Twitter Card tags control how a page appears when someone shares it on social platforms, messaging apps, and link preview tools. They define the preview title, description, image, page URL, and card format. They are useful when default previews pull the wrong text or no image at all.
quickAnswer
Generate Open Graph and Twitter Card meta tags to control how your page appears when shared on social platforms, messaging apps, and link preview tools. Use absolute URLs for images and test after publishing.
Last updated: 2026-06-11
limitations
- Generated tags must be placed in the HTML head section of each page. Social platforms and messaging apps read these tags when the page is fetched, not when the page is built.
- Social platforms cache previews aggressively. After updating og or twitter tags, use each platform's debugger or share tester to force a cache refresh.
- Some platforms ignore certain tags. X reads twitter:card while Facebook and LinkedIn use og: tags. Not every platform supports every directive.
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
How to use this tool
- Enter the page title, description, canonical URL, site name, and preview image URL.
- Choose the Open Graph type. Use website for normal pages and article for blog posts.
- Copy the generated meta tags into the head section of your page.
- Use an absolute image URL and test the page after it is published.
What you can use it for
- Prepare social sharing tags before publishing a blog post.
- Create a repeatable meta tag block for static HTML pages.
- Preview title, description, and image length before copy-pasting.