OG / Meta Tag Preview Generator
See how a page's title, description, and image will actually look in Google search results, a generic social link preview, and a Twitter/X card, then copy the meta tags to your page.
Preview
example.com
Title
Description
The social card preview approximates how most chat apps and feeds render Open Graph tags (Slack, Discord, KakaoTalk, and similar all use the same og: tags, though each app's exact layout differs slightly).
Generated tags
Why the same title looks different everywhere
Google, Facebook-style social cards, and Twitter/X each truncate text at different lengths and read from slightly different tags, so a title that fits perfectly in a search result can still get cut off mid-word in a chat app preview. Checking all three before publishing catches awkward truncation before readers see it.
Open Graph tags vs Twitter Card tags
Open Graph (og:title, og:description, og:image) is the tag set almost every platform reads by default, including Slack, Discord, KakaoTalk, LinkedIn, and Facebook. Twitter/X has its own separate twitter: tags, but if they are missing, Twitter falls back to the Open Graph tags, so setting both explicitly just gives more precise control over the Twitter-specific card.
Choosing summary vs summary_large_image
The summary_large_image Twitter card shows a wide image above the text, which works well for photos, illustrations, or article headers. The summary card shows a small square thumbnail beside the text instead, which suits logos or icon-style images better than a stretched or cropped photo.
FAQ
Do I need both Open Graph tags and Twitter Card tags?
Open Graph tags alone cover most platforms since Twitter/X will fall back to them if twitter: tags are absent. Adding twitter: tags explicitly is only needed if you want the Twitter-specific card to differ from the general Open Graph preview.
Why is my og:image not showing up when I share a link?
The most common causes are a relative image path instead of a full URL starting with https://, an image that returns an error or requires login to view, or a caching layer at the platform serving an old preview from before the tags were added.
What image size should I use for og:image?
A minimum of 1200 by 630 pixels is a common recommendation, since it satisfies the roughly 1.91:1 aspect ratio most large-image social cards expect without the platform needing to upscale it.
Why do some apps cache an old preview after I update my meta tags?
Most platforms cache the scraped Open Graph data rather than re-fetching it on every share. Many offer a debugging or cache-busting tool, such as Facebook's Sharing Debugger, that lets you force a re-scrape of the current tags.
Does this tool upload my page or image anywhere?
No. Everything runs locally in your browser using the values you type in, and the image is only requested directly by your browser to render the preview, exactly as a visitor's browser would when loading the image URL you provide.