About this tool
When you build a new page, it helps to see how it will look when someone shares it before you write the tags. This tool generates a Twitter/X card preview and a general OGP-style preview (Facebook, LINE, and similar) side by side as you fill in a title, description, image URL and a few other fields.
You don't need a final image URL to get a feel for the layout — switch between a sample placeholder image and a no-image layout instead. Warnings appear immediately if a required tag is missing or if the title or description is too long.
Once you're happy with the result, copy the generated meta tags straight into the page's <head>. Nothing you type is sent anywhere — everything is built in your browser.
How to use it
- Fill in whatever you know: title, description, page URL, and so on.
- Twitter/X and Facebook/LINE-style card previews update on the right as you type.
- If you don't have an image URL yet, switch between "preview with sample image" and "preview with no image" to check the layout.
- Once any warnings are resolved, copy the generated HTML and paste it into your page.
Features
Two previews at once
See a Twitter/X card and a general OGP-style card (Facebook, LINE, and similar) side by side.
Preview the layout before you have an image
Switch between a sample placeholder and a no-image layout to check the design before the final image URL is ready.
Instant warnings for missing tags or overlong text
See a warning right away if a required tag is missing, or if the title or description is too long.
Ready-to-paste HTML
Generates the exact meta tags to paste into your page's <head>, based on what you entered.
Frequently asked questions
Where do I paste the generated HTML?
Paste it inside the <head> tag of the target page. If a tag with the same name already exists, replace it rather than duplicating it.
What image size is recommended?
For summary_large_image and general OGP cards, around 1200×630px works well. For Twitter's summary card, a near-square image of at least 400×400px is recommended.
Can I use the sample image on my real page?
No. The sample image is just a colored placeholder generated in your browser to help you check the layout — it isn't included in the actual OGP tags. Use a real image URL before publishing.
Is what I enter sent anywhere?
No. Both the previews and the generated HTML are built entirely in your browser. Nothing you type is sent to a server.
